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.


facebook box

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

 

facebook widget


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.


facebook like

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("http://2.bp.blogspot.com/-TNZHLj4Kwkw/UA-vZcFs0WI/AAAAAAAAAe0/vHQnokct5jU/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.


10 comments:

  1. really nice to know all of this. Fortunately, I started listening to the podcast immediately after launch, so I was able to straighten things out really quickly.
    http://www.lantai-kayu.co.id
    http://www.lantaikayu.in
    http://www.suryarental-bandung.com
    http://www.legorealty.com
    http://www.lapakrumah.com
    http://www.beautyme-clinic.com
    http://www.beauderm.net

    ReplyDelete
  2. Quietly impressive post, where are available some code that extremely effective to learn coding system.

    ReplyDelete
  3. That is a pretty cool speccy little like box. I might use it myself.

    ReplyDelete
  4. oho this is a nice post its very helpful. thanks for shearing this think...

    ReplyDelete
  5. Tips to Find Dofollow Blogs for Blog Commenting | Get Effective Back links. | Blogger Blog Tips: Great article and very informative. Thank you for your contribution.http://www.music3.in

    ReplyDelete
  6. This is a nice post about your business, really i happy to read this, we have also a New sofwtare Based site

    ReplyDelete
  7. Slick pie Tips to Find Dofollow Blogs for Blog Commenting | Get Effective Back links. | Blogger Blog Tips: Great article and very informative. Thank you for your contribution.

    ReplyDelete
  8. Thanks for sharing, Youtube comments is a successful tool to promote videos and to be watched world wide,comments boost video to get more views,subscribers,likes etc buy youtube comment now buy youtube views likes comments "

    ReplyDelete
  9. Thanks for sharing, Youtube comments is a successful tool to promote videos and to be watched world wide,comments boost video to get more views,subscribers,likes etc buy youtube comment now buy youtube views likes comments "

    ReplyDelete
  10. Hi
    A very warmly welcome to you here. I am happy you liked this post. Keep visiting and giving your feedback. Thanks
    Have a super successful week ahead.
    Mi sunny recently posted… specialized comment examples to get free trafficMy Profile.
    Robux Bag 2017!

    Join me and good day everyone.

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...

More From Webworld