Showing posts with label Facebook Floating Widget. Show all posts
Showing posts with label Facebook Floating Widget. Show all posts

Sunday, June 30, 2013

How to Add a Floating Facebook Like Box into Blogger Blog/Blogspot

Facebook fan Page are a great way to promote your blog or website and facebook like box is widely used social plugin from Facebook developers. This facebook like box will help your visitor to become regular reader just by clicking like button. So that this box will increase number of your facebook fans. To get this widget follow below procedure.

Simple Facebook like box:


Let me explain how to add simple facebook like box.

Adding Jquery Plugin

1. Login To Blogger Account.
2. Go To Dashboard > Template > Edit HTML
3. Search for </head> teg in your template and just below it paste the following JQuery code (You can ignore this step if Jquery Link is already added in your template)

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

Adding Widget Code
1. Go to Layout > Add A Gadget
2. Select HTML/Javascript
3. Paste the following code inside it.

 <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: 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%3A%2F%2Fwww.facebook.com%2Fbeing.imran.ansari&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><a style="font-family: arial, sans-serif; font-size: 9px; color: #999;" href="#" target="_blank"> +Get this</a></span> </div> </div>  


4. Replace being.imran.ansari with your Facebook fan page URL.
5. Now save your template and you are all done!

Visit your Blogs to see it floating at the right side of your webpage.