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.


30 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
  11. This comment has been removed by the author.

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
  13. Nice article
    If you are looking for brand promotion or e marketing services, then do visit Recharge Designs

    ReplyDelete
  14. quite impressive post...full of quality content
    if you are looking for a website which keeps you updating with new android applications, visit my website

    ReplyDelete
  15. Nice article
    Thank you for sharing useful Tips.
    Other then these, you can also visit This website
    Pepperfeed
    Find here Latest Trending News,Top Trending Stories from Lifestyle,Relationships,Women,Celebrity, News ,Sports,Politics,Viral Videos ,etc.

    ReplyDelete
  16. Very informative, keep posting such sensible articles, it extremely helps to grasp concerning things.

    ReplyDelete
  17. hello friends it's site fully free on our business promotion at the top rank soo click fast this link and get a more profit daily free free free.
    http://www.shoppakistan.com.pk/

    ReplyDelete
  18. So good this post you have published . Great thanks for this well post .

    ReplyDelete
  19. this is best technology site

    ReplyDelete
  20. http://www.techriation.com/
    this is best site for technology information

    ReplyDelete
  21. Nice and great post. thanks for sharing
    http://www.androidappsapks.com/

    ReplyDelete
  22. Thanks. It helped me a lot. Thanks again

    ReplyDelete
  23. very nice and useful information, thanks for share.

    ReplyDelete
  24. Thanks admin for share this.
    plz make article how increase blog tarffic.

    ReplyDelete
  25. I think this is an informative post and it is very useful and knowledgeable. Therefore, I would like to thank you for the efforts you have made in writing this article. Thank you very much for sharing. bit.ly/2JiB2t5

    ReplyDelete
  26. Hello there. I discovered your site by the use of Google while searching for a similar subject, your site came up. It looks good. I have bookmarked it in my google bookmarks to visit then.https://bit.ly/2RpUKYC

    ReplyDelete
  27. An intriguing discussion will be worth comment. I’m sure that you need to write more about this topic, it might not be a taboo subject but usually consumers are too few to chat on such topics. To another. Cheers https://royalcbd.com/product/cbd-roll-on-gel/

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...

More From Webworld