Add Floating Facebook Like Box to Blogger Blog

Today I will show you how to add floating facebook like box to blogger. In my previous post you have seen how to add facebook comment box. This article about adding floating facebook like box to blogger. Facebook floating like box allows people to like your facebook page. The special thing about this widget is it doesn't waste any space in your blog. Many blog owners add too many widgets and they are wasting sidebar space which will then very useful for placing adds.

These days many blog owners promoting their facebook pages in different ways. This floating facebook like box widget is another style of promoting facebook page. This floating facebook like box widget display whenever anyone move mouse to that position. Its one of the best way to promote your facebook page using your blog. This floating facebook like box widget is very easy to use and you need to follow some simple steps. Below is the screenshot of this facebook floating like box widget.

Recommended : Add Facebook Like Box To Blogger

Add Facebook Floating Like Box to Blogger

1. Goto your Blogger account

2. Then Layout >> Add a gadget >> HTML/Javascript

3. Then paste the below code in HTML/Javascript and then "Save".

<script type="text/javascript"> //<!-- $undefineddocument).readyundefinedfunctionundefined) {$undefined".w2bslikebox").hoverundefinedfunctionundefined) {$undefinedthis).stopundefined).animateundefined{right: "0"}, "medium");}, functionundefined) {$undefinedthis).stopundefined).animateundefined{right: "-250"}, "medium");}, 500);}); //--> </script> <style type="text/css"> .w2bslikebox{background: urlundefined"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7TKIYukfQMlMOq6RMlGQHWnkYmqvJ83aICqHAzYA8hUrFt_lZj95Q3dsQC26dCopWb7WXyxPNmhlbLJ7_pGTsyvBw_-ucc-zFaPL_h06I_sVlH_3d7raoVDBc_Tr8vAVa6oTEkW7is1os/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%2FBloggingMind&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></div></div>

Note : Now change BloggingMind to your facebook page username and if you want to display floating like box on left side, simply change from float: right to float: left.

4. Now Goto Template >> Edit HTML

5. Search for </head> and paste the following code before it.

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

Congratulations! You have succesfully added facebook floating like box widget to your blog. If you are facing any problems, comment below. Don't forget to subscribe below for FREE Email Updates.

 Also See : Add Vertical Social Sharing Buttons To Blogger

Subscribe Today And Discover All Tips And Tricks !

Note : Don't forget to click the confirmation link in youe email inbox!