If you want to write for us and increase your blog traffic.Then Fire your article at sndsabin@gmail.com .For more info click here

Floating widget for facebook like box


Facebook is one of the most famous social networking sites in the world. Many bloggers now days use Facebook to drive traffic to their blogs by publishing their feeds and post to their official facebook fan page.Generally when we move around another blog/sites,we can find their respective facebook like box of their page mostly entitled as “Follow us on Facebook”.



In this post I came up with new floating widget for managing those fan page which requires almost no space and it looks more attractive than that of simply keeping the like box.This widget further helps to increase the number of fans and gives your blog a smart layout.
If you want this widget in your blog. follow the given instructions

Step 1: Adding Jquery JavaScript Plugin(Ignore this step if your blog have already a Jquery Plugin)
  1. Sign in to blogger
  2. Go to design>Edit HTML
  3. Find the </head> tag (press ctrl + F to open the find box and copy the code to find box for quick finding)
  4. Below that code copy the given code

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

Step 2: Adding Widget Code
it's Simple
Replace my facebook page URL below with the URL for your page.
(Note:- Facebook URL Must starting with "http://" and it contains no space or illegal Characters )









Your Facebook Page URL :






That’s it……..Enjoy…..
Please Comment regarding this post.Feel free to comment if you have any problem or views regarding any post……

22 comments:

SEO said...
This comment has been removed by a blog administrator.
Admin said...

Thankjs.
how can i float this widget in left side?

Anonymous said...

@Admin
Go to page elements and just open the gadets and you will find css codes like

.w2bslikebox{background: url("http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/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;}


Change all "right" to "left"

SB said...

Thanks for your widget tutorial. I installed it in my Site and it's working fine

Price In USA: said...

Thanks for the Share ,i had Used this In My Tech Blog

Anonymous said...
This comment has been removed by a blog administrator.
Recruit4health said...

Many thanks

Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Iqmal said...

Thanks

Anonymous said...

visit my site http://www.hdwallbase.com

Anonymous said...

What if you wanted to add this code to a website out side of Blogger how would you do that?

sabin said...

@AnonymousFor that you need to just add the css code(to be placed in head section or can be placed in external css sheet) i.e
<style type="text/css">
.w2bslikebox{background: url("http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/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>

IT's script code(to be placed in head section) is
<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>

and this is the code to be placed in body section

<div class="w2bslikebox" style=""><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FYOUR PAGE USER NAME&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>By <a href="http://www.sabinbhatta.blogspot.com/">Sabinbhatta.tk</a> / <a href="http://sabinbhatta.blogspot.com/2011/10/floating-widget-for-facebook-like-box.html">+Get This!</a></span></div></div>


Note;-replace YOUR PAGE USER NAME with your own page user name for example like meroblog

Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...

Wonderful stories, keep them coming :) This is the very first time i have commented, b¨´t i have been lurking for a while.

Sabin Bhatta said...

@AnonymousThanks!!!!!!!!!

Muhamamd Irfan Motiwala said...

how can i add this to my opencart website

Sabin Bhatta said...
This comment has been removed by the author.
Sabin Bhatta said...

@Muhamamd Irfan MotiwalaFor that you need to just add the css code(to be placed in head section or can be placed in external css sheet) i.e
<style type="text/css">
.w2bslikebox{background: url("http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/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>

IT's script code(to be placed in head section) is
<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>

and this is the code to be placed in body section

<div class="w2bslikebox" style=""><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FYOUR PAGE USER NAME&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>By <a href="http://www.sabinbhatta.blogspot.com/">Sabinbhatta.tk</a> / <a href="http://sabinbhatta.blogspot.com/2011/10/floating-widget-for-facebook-like-box.html">+Get This!</a></span></div></div>

Content's Hits

Search

Loading...



Advetisement Section

unity4change Web hosting To place your ad here contact sndsabin@gmail.com

About Me

My Photo
Sabin Bhatta
Namaste! I'm Sabin Bhatta, a blogger from Kathmandu,Nepal. I am a freelancer .Actually Blogging is my hobby.you can visit me at www.sabinbhatta.tk
View my complete profile

Followers

Sponsors

My Zimbio
Powered by Blogger.

Popular Posts Of the Week

Translate