Floating Facebook Like Box Widget For Blog or Website

Floating Facebook Like Box Widget For Blog or Website

Floating Facebook Like
Floating Facebook Like Box is one of the essential and beautiful widget for blog. It helps you to get more facebook likes and increase your facebook fans. If you want to add a Floating Facebook Like Box in your Blog or Website, You must have a Facebook Page. You have already a Facebook Page its OK. But if you don't have Facebook Page, then create a Facebook Page using your Facebook Account.
Generally many website or blog Use fixed Facebook like Box in their pages. But using fixed Facebook like box on the blog or website page may consume valuable spaces of the blog or website page. That is why many blog or website owner don't want  to add fixed Facebook Like Box. Floating Facebook Like Box may be the solution for this problem. Lets see how to add floating Facebook Like Box.
  • Follow the below steps to Add Floating Facebook Like Box:
  1. At first log into your Blogger Account.
  2. Then click on the Template option.
  3. Now click on Edit HTML.
  4. Here in the HTML page Search for <head> and Copy and Paste the below code just Below the <head> tag.


  5. Then click the Save Template button.
  6. Then click on the Layout option.
  7. Here you will get several add a gadget button.
  8. Now click on Add A Gadget button. ( you can choose anyone ).
  9. Then from the gadget list click HTML/ JavaScript.
  10. Now Copy and Paste the below Code in the Content box.

  11. <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://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/s150/w2b_facebookbadge.pn") 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=http%3A%2F%2Ffacebook.com%2Fehimini&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>Widget by:<a href="http://livetechnologybd.blogspot.com">A Information Technology Blog</a></span></div></div> 

    • Customization
    Here in this code Replace 
ehimini
    with your Facebook Page Username.

  1. The click the Save button.
That's it, Now visit your Blog or Website and you will see floating Facebook Like Box on your Blog or Website page. 

Comments

Popular posts from this blog

Truecaller hookup With Google Duo: Rolls Out New SMS and Flash Messaging Services to Users

Mobile Balance Transfer for different networks – Vodafone, Airtel, Aircel, Idea, BSNL and Tata DOCOMO