Ilyet hogy lehet csinálni HTML-ben?

ez nekem több összetevősnek tűnik:

html, css, javascript

CSS(3/JS) + facebook app.

hover eseményre, elő hozza, Egyébb esetben vissza csúszik.

Nem kell ehhez js, csak css3, ami azt jelenti, hogy az ócska böngészőkhöz (ie7 vagy alatta) js kell, a fejlettebbeknek elég ez is:

[link]

Átírva neked:

[link]

HTML:

<div id="fb-root"></div>

<script type="text/javascript">

//<!--

(function(d, s, id) {

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) return;

js = d.createElement(s); js.id = id;

js.src = "//connect.facebook.net/hu_HU/all.js#xfbml=1";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));

//-->

</script>

<div class="fbBoxKeret">

<div style="position:relative;">

<div class="fbBoxTab"></div>

<div class="fb-like-box" data-href=" [link] data-border-color="#FFFFFF" data-width="290" data-height="500" data-show-faces="true" data-stream="false" data-header="false"></div>

</div>

</div>

CSS:

div.fbBoxKeret {

display: block;

position: fixed;

top: 50%;

right: 0px;

width: 290px;

height: 500px;

background-color: #FFFFFF;

border: 5px solid #5A74AF;

margin-right: -300px; /* - width+border */

margin-top: -255px; /* - (height+border)/2 */

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

-webkit-transition: all 300ms ease-in-out;

-moz-transition: all 300ms ease-in-out;

transition: all 300ms ease-in-out;

-webkit-transition-delay: 3s;

-moz-transition-delay: 3s;

transition-delay: 3s;

box-shadow: 2px 2px 3px rgba(0,0,0,0.3);

}

div.fbBoxKeret:hover {

margin-right: 0px;

-webkit-transition-delay: 100ms;

-moz-transition-delay: 100ms;

transition-delay: 100ms;

}

div.fbBoxTab {

display: block;

position: absolute;

top: 150px;

left: -50px; /* - width */

width: 50px;

height: 150px;

background-color: #5A74AF;

background-image: url(' [link]

background-position: 50% 50%;

background-repeat: no-repeat;

cursor: pointer;

-webkit-border-radius: 5px 0px 0px 5px;

-moz-border-radius: 5px 0px 0px 5px;

border-radius: 5px 0px 0px 5px;

box-shadow: 1px 1px 2px rgba(0,0,0,0.3);

}