HOW TO ADD FLOATING FACEBOOK LIKE BUTTON TO YOUR SITE

How to Add Facebook Like Box into Blogger Blog

Facebook fan Page are a great way to promote your blog or website and facebook like box is widely used social plugin from Facebook developers. This facebook like box will help your visitor to become regular reader just by clicking like button. So that this box will increase number of your facebook fans. To get this widget follow below procedure,

Updated - 2 New Awesome Style of Facebook Like Box For blogger or Website

• Simple fecebook like box

Let me explain how to add simple facebook like box.

1. Login To Blogger Account.

2. Click Layout > Add A Gadget.

3. Select HTML / Javascript > Paste The Following Code In content Box.

<iframe src="//www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/MostlyUsefulSoftwares&width=292&height=258&

colorscheme=light&show_faces=true&border_color&stream=false&header=false&" 

style="border:none; overflow:hidden; width:292px; height:258px;" >

Replace my facebook page URL  with your page URL, Change Width And Height According To Your Template.

4. Now save and you are done.

• Floating facebook like box for Blogger

Now I came up with new tutorial for adding floating like box to blogger.

• Adding Jquery Plugin

1. Go To Dashboard > Template > Edit HTML

2. Search for </head> teg in your template and just below it paste the following JQuery code (You can ignore this step if Jquery Link is already added in your template)

<script src='https://ajax.googleapi
s.com/ajax/

libs/jquery/1.6.1/jquery.min.js' 
type='text/javascript'/>

• Adding Widget Code

1. Go to Layout > Add A Gadget

2. Select HTML/Javascript

3. Paste the following code inside it,

<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://2.bp.blogspot.com/-TNZ
HLj4Kwkw/UA-vZcFs0WI/AAAAAAAAAe0/vHQ
nokct5jU/s1600/FloatingFB.png") no-repeat 
scroll left center transparent !important;display:
 block;float: right;height: 300px;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;} .w2
bslikebox span a:hover{text-decoration:und
erline;} </style><div class="w2bslikebox" s
tyle=""><div>
 <iframe src="http://www.facebook.com/plu
gins/likebox.php?href=http%3A%2F%2Ffac
ebook.com%2F
mostlyusefulsoftwares&amp;width=245&a
mp;colorscheme=light&amp;show_faces=
true&amp; connections=9&amp;stream=f
alse&amp;header=false&amp;height=292
" scrolling="no" frameborder="0" scrolling
="no" style="border: medium none; overfl
ow: hidden; height: 292px; width: 245px;
background:#fff;"></iframe><span><a sty
le="font-family: arial, sans-serif; font-size
: 9px; color: #999;" href="http://www.jobs
mag.in" target="_blank"> JM</a></span> </div> </div>

4. Replace mostlyusefulsoftwares with your Facebook fan page URL.
5. Now save your template and you are all done!

Visit your Blogs to see it floating at the right side of your webpage.

Updated - 2 New Awesome Style of Facebook Like Box For blogger or Website

Socializer Widget By Awais Altaf.

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →