Blogger- Adding Floating Facebook Like Box into Blogger Blog

In my post Adding Facebook Like Box into Blogger Blog, I explained you how you can add Facebook Like box in your blogger blog. This post is the refined version of my previous post. Here I will show you how you can add floating Facebook Like box into you blogger blog.

You can find some more articles related to Blogging, SQL Server , ASP.Net, C# and many more. To add floating Facebook like box follow the below procedures.

1. Go to Blogger > Template >Edit HTML
2. Search for </head> tag and paste the following jQuery link code just before the </head> tag(You can ignore this step if Jquery Link is already added in your template).
   

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

3. Now Go to Layout>Add a Gadget
4. Now add a new HTML/Java Script widget.
    
5. Now copy and paste the following code into content box.
   
   

   <script type="text/javascript">
           //<!--
           $(document).ready(function () {
                   $(".floatfblikebox").hover(function () {
                       $(this).stop().animate({ right: "0" }, "medium"); 
                   },
                   function () {
                       $(this).stop().animate({ right: "-250" }, "medium");
                   }, 500);
           });
           //-->
       </script>
       <style type="text/css">
           .floatfblikebox
           {
               background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9JK7308rPvh6PxWIZz9p-p2dmUMdp6YtPEVECCAivXUdfWGxKh4wU2DYGemMpKcP5lYvWLyySob3EpCg0xZPm3NnQAS5ssERBeDOzUZlBT2wWaaODq35a5RTfNijs-I_GEe_CiasyFkod/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%;
           }
           .floatfblikebox div
           {
               border: none;
               position: relative;
               display: block;
           }
           .floatfblikebox span
           {
               bottom: 12px;
               font: 8px "lucida grande" ,tahoma,verdana,arial,sans-serif;
               position: absolute;
               right: 6px;
               text-align: right;
               z-index: 99999;
           }
           .floatfblikebox span a
           {
               color: #808080;
               text-decoration: none;
           }
           .floatfblikebox span a:hover
           {
               text-decoration: underline;
           }
       </style>
       <div class="floatfblikebox" style="">
           <div>
               <iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/Dot-Net-World/409266942502687&width=245&height=270&colorscheme=light&show_faces=true&border_color&stream=false&header=false&"
                   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="http://manish4dotnet.blogspot.com/2012/07/how-to-add-facebook-like-box-into.html" target="_blank"> +Get Your</a></span>
           </div>
       </div>

   
   Replace the my Facebook page url(pages/Dot-Net-World/409266942502687) with your Facebook page URL and change the width and height according to your need.
6. Now save it and you are done.
   

I hope you enjoyed this article. I would like to have any feedback from you. Your valuable feedback, question, or comments about this article are always welcome.

Happy Blogging!!