See the screenshot of facebook floating like box here
You can see the demo in the right side of this post there is a facebook icon if you keep your mouse there you will see it. Now let's create your own facebook's page social box for your website.
At first copy the bellow code now log in to your account and click on add a widget from your site layout and click on html/text option now paste the code you allready copied.
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".sislikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.sislikebox{background: url("http://i.imgur.com/pb9yGIJ.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.sislikebox div{border:none;position:relative;display:block;}
.sislikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.sislikebox span a{color: #808080;text-decoration:none;}
.sislikebox span a:hover{text-decoration:underline;}
</style>
<div class="sislikebox">
</div>
<iframe frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fsiszone&width=245&colorscheme=light&show_faces=true& connections=9&stream=false&header=false&height=270" style="background: #fff; border: 4px solid rgb(53, 102, 203); height: 266px; overflow: hidden; width: 240px;"></iframe>
You need to chang siszone to your page user name . finally you done it.
0 Comments