Add Attractive Custom Facebook Like Box To Your Blogger Blog

Facebook like Box is a wonderful widget to show visitors who like your blog. Facebook offers a simple default Like Box plugin that you can easily add into your website but the default Facebook like box is not having very good look. In this tutorial I will show you how to Add Custom Facebook like Box using simple CSS code to your Blogger blog. Facebook like Box is the best way to get more fans on Facebook fan page. It’s a simple course just copy and paste the code. I think that this simple Customize Facebook like Box with CSS widget attracts your facebook fans boost the count of Likes.

How To Add a Custom Facebook Like Box to Your Webpage.

 

Step 1. From your Blogger Dashboard >> Layout tab >> Add a Gadget link. 

Step 3. Select 'HTML/Javascript' and add the one of the following code given below. 

<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/blognucleus&width=290&height=260&colorscheme=light&show_faces=true&border_color&stream=false&header=false&" style="border:none; overflow:hidden; width:292px; height:258px;" ></iframe>

Step 4. Then Click On Save 'JavaScript' You are done.

Note: Replace my facebook page URL (https://www.facebook.com/blognucleus)with your own page URL and you can change Width and Height according to your Template.

How to add floating face book like box in blogger blog

This tutorial I will show adding floating like box to blogger.

1. Go To Dashboard > Template > Edit HTML

2. Under </head> tag in your template and just below it paste the following JQuery code.

Note:You can ignore this step if Jquery Link is already added in your template.

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

    

 Adding Widget Code

1. Go to blogger dashboard >>  Layout >> Add A Gadget

2. Select HTML/Javascript

3. Paste the following code in the box.

<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/AVvXsEjYHRdaH3n1QUR1GulIYB4MVRhshRl5m70SrOtFMw5r0yvB1JpriuFahSVm6syiPtIuGivpwoIMd2_1GSPmnufjT3K2kxwcCQ0hOWa0Dxfrq8X1mA8TdXU7L54rfD24i2Io0y5Le7RkjRXa/s1600/FloatingFB.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 300px;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=http%3A%2F%2Ffacebook.com%2Fpages/

Child-Labor-Rescue-Forum-1636958169922549&amp;width

 =245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=292" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 292px; width: 245px;background:#fff;"></iframe><span><a style="font-family: arial, sans-serif; font-size: 9px; color: #999;" href="http://blogsnucleus.blogspot.com/" target="_blank"> BN</a></span> </div> </div>

4. Replace pages/ Child-Labor-Rescue-Forum-1636958169922549 with your Facebook fan page URL.

5. Now save your template and you are done.

Now go to your Blogs to see it floating at the right side of your blog.

Share this post