How to put Facebook Like-box in your blog

Adding 'facebook like-box' is one of the best way to promote your blog. You can easily make a 'facebook like box' for your facebook fan page from following link : developers.facebook.com/docs/reference/plugins/like-box/


The transition for mouse hover and mouse exit is done using 'jquery'. jquery smoothens the transition to make it cool. Here are some simple steps to implement this dynamic facebook.


Step-1 : First of all you have to add Jquery Javascript plug-in to make your any Jquery run softly.(Ignore this step if your blog is already having Jquery plug-in)




a. Go to template > Edit HTML
b. Copy and Paste below code before </head>.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

c. Save template.


Step-2 : Adding HTML code for your Facebook like-box.


a. Go to Layout tab >> Add a Widget >> Html/Java Script.
b. Once you have added this widget , open it and paste below code in it.

<a href="http://avixittech.blogspot.in/" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><script type="text/javascript">


//<!--


$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});


//-->


</script>


<style type="text/css">


.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHAHIneKSgFHeP7Un52IbMiGWmDow61ZHBBK3jvpyYpvK_RpJDO9ZtkozxPIbktRyWTF7AiioLcUMsCmmL_Rb62O4sn9d0cM1sBrLOo9W2sTLvsfDf2Yw2FfZn80baEdcLQnIP_zylAtW7/s1600/facebookbadge.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%;}


.w2bslikebox div{border:none;position:relative;display:block;}


.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}


.w2bslikebox span a{color: #808080;text-decoration:none;}


.w2bslikebox span a:hover{text-decoration:underline;}


</style><div class="w2bslikebox" style=""><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/Avixittech&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>By <a href="http://avixittech.blogspot.in/2012/05/how-to-put-facebook-like-box-in-blog.html">Blogspot tutorial</a> / <a href="http://avixittech.blogspot.in/2012/05/how-to-put-facebook-like-box-in-blog.html">+Get This!</a></span></div></div>

c. Click on Save.


Note :- Don't forget to change red letters with your facebook fan page id.

And you're done. Open your home page and enjoy your smooth 'facebook like- box'. 


#Comment below if you're having any doubt.

Posted in: How to