Add Floating Facebook Like Box Blogger

With facebook having millions of visitors and getting billions hits per day, it has become a very huge social media and also family for those who are alone. The popularity of facebook is amazingly increasing as hundreds of users sign up for it daily. Not only that for advertising also people use facebook as it ranks second in terms of traffic.

With such huge users it's probable that you also have a large family in facebook. So it's better to get more member to your family. Many users asked me "How to drive my visitors to my facebook page/account?". This question answer is this post. The best idea for it is to add a floating facebook. It's advantages are;

• You will be tremendously increasing your friends.
• Your friends will be updated no sooner you post.
• You will be watching your revenues soar high.

So be sure you add this widget. But before see this live preview;

So you wanna add this. Procure below;

ADDING JQUERY PLUGIN:

• Login to your blogger account.
• Go to your dashboard>design>edit html.
• Add the below code just before (above) </head> tag.

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

ADDING WIDGET CODE

• Go to design.
• Be forwarded to page elements.
• There click on Add A Gadget anywhere as it appears floating on right side always.
• Scroll down a bit and click on Html/Javascript.
• Leave the title field empty.

-->

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6GL4tyCiuV8ZiB6D8sVaXLpVd13-yN5a8iBGY2AkOGrrBiosU0Bksg3kdrYjhI_S9vJ_vvgOqzdyjmWc_w29qz4wi0RVNGeL4DfTja6yHntZcwwx7mSC5g-agEFT6VyWpyaSNPrqeCfs/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style><div class="floatinglikebox" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FMrmoazzamiqbal&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe><span><a href="http://bloggingsentral.blogspot.com/2012/08/adding-floating-facebook-likefan-box-to.html" target="_blank">+Get This!</a></span></div></div>

• Here in the above code replace;

1. Mrmoazzamiqbal with your own facebook page username.

For an example if your facebook page username is apple then, your URL should be like the below one;

http%3A%2F%2Fwww.facebook.com%2Fapple

So if you have properly done the steps above then your widget will be properly displaying. I think this post have become a little messy. If you have any problems then be sure you comment below so your problem get's fixed.
Be sure you don't remove the attribution.
Thanks!!