<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
//<[!CDATA[
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#facebook2_2").hover(function(){
jQuery(this).stop(true,false).animate({right: "0px"}, 500 );
},
function(){
jQuery("#facebook2_2").stop(true,false).animate({right: "-304px"}, 500 );
});
});
//]]>
</script>
<!--WIDGET FACEBOOK-->
<div id="fb-root"></div>
<script>(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/pl_PL/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="facebook2_2" style="right: -304px; z-index: 9999; background: #ffffff; padding: 0px; width: 300px; height:550px; position: fixed; top: 50px; border: 2px solid #3B95D8">
<a href="#"></a><img style="position: absolute; left:-33px;" src="facebook.png" />
<div class="fb-like-box" data-href="https://www.facebook.com/Fragowcypl-1512908489031166/" data-width="300" data-height="550" data-show-faces="true" data-stream="true" data-header="false"></div>
</div>
<!--KONIEC WIDGET FACEBOOK-->
</body>
</html>
Wklej ten kod odpowiednio do head i body. W data-href="https://www.facebook.com/Fragowcypl-1512908489031166/"zmień link do swojego fp oraz w src="facebook.png" daj odpowiednią nazwę obrazka. Kod testowałem panel się wsuwa i wysuwa oraz pokazuje zawartość.
