Awesome Floating Facebook Like Box Widget

add floating facebook like box widget.

As you all know facebook is the biggest social networking site in the world having 1.5+ billion users. So, just think how much traffic you can get from facebook.

But are you struggling in getting more facebook likes for your blog page ? add floating facebook like box widget to your blog / website. This will help you to get more and more likes. Even I have increased 35% likes by adding this jquery widget on one of my blog.

This widget will remain fixed on the right hand side of your blog and when you hover on facebook image, the like box will reveal and displayed to your visitor. This all is done using jquery. You can see the snap shot below.

See the live demo. Just download the html file and run it on any browser. This will help you better in installing this widget.

In the last post we had seen how to add stylish facebook popup like box widget for blogger and popup for facebook like box with timer. I recommend you to add this too.

Must Read :-

Add Floating Facebook Like Box Widget :

You have to go through couple of steps to add this.

Step 1 :- Go to blogger.
I recommend you to take backup of your blogger blog before making any changes into it.

Step 2 :- Now go to template.

Blogger dashboard >> Template >> Edit HTML

Just find <head> tag and copy and paste the below mentioned code.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>

Skip this if you had already added this before.

Step 3 :- Now go to layout.

Blogger dashboard >> Layout >> Add a gadget.

Now add "HTML/JavaScript". Look at the snap shot below.

Step 4 :- Just add below mentioned code.

<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".solvemyhow").hover(function() 
{jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ 
</script> 
<style type="text/css"> .solvemyhow{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsPNSBpvi-NlCEOSBf6MkXdDiRc60Zmcncqe0bqBgdOVoOIku8wBTkYRB8yMjPlu9ZLAUART2D60dkcXOi5mwRMKlGFPbDspFCN8dlBRVC4q30hOHDW8lPUuHCF9g5dphyphenhyphenqsGZfETGiq8_/s1600/ABT_facebook_widget.png") 
no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;
z-index: 99999;position:fixed;right:-250px;top:20%;} .solvemyhow div{ padding: 0; margin-right:-8px; 
border:4px solid #3b5998; background:#fafafa;} .solvemyhow span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;
position: absolute;right: 6px;text-align: right;z-index: 99999;} .solvemyhow span a{color: gray;text-decoration:none;} .solvemyhow span a:hover{text-decoration:underline;} } 
</style>

<div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fsolvemyhow&width=245&colorscheme=light&show_
faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;color:000;"></iframe><span><center>
<a style="color:#a8a8a8;font-size:8px;" href="http://goo.gl/5tb3k8">Get This Widget</a></center>
</span></div>

</div>

Step 5 :- Customization.
Now find the comment,



<div>

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fsolvemyhow&width=245&colorscheme=light&show_
faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;color:000;"></iframe><span><center>

</div>


Change the highlighted part with your page name.

for example :- https://www.facebook.com/solvemyhow - this is my page id name.

Step 6 :- Save the gadget.
Now visit your blog and you will see awesome floating facebook like box widget.

Must Read :-

How To Get Facebook Username ?

Step 1 :- Create your own facebook name.

Step 2 :- Select your page from the drop down list.
Now enter the url/name. Look at the snap shot below.

Step 3 :- Click on check availability.
Now check the availability whether the name you entered is available or not. Then click on confirm button and you will see the success message.