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>

<style type=”text/css”>
.w2bslikebox{background: url(“https://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>

<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>

Step 2: Save your template Go to design

·         Click on  Page Elements
·         Then  Add a gadget and choose HTML/java script
Copy the given code and save it

Replace sabinb.com.np URL below with the URL for your page.
(Note:- Facebook URL Must starting with “https://” and it contains no space or illegal Characters )

<div class=”w2bslikebox” style=””><div><iframe src=”https://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fsabinb.com.np&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=”https://www.sabinb.com.np/”>Sabinb.com.np</a> / <a href=”https://sabinbhatta.blogspot.com/2011/10/floating-widget-for-facebook-like-box.html”>+Get This!</a></span></div></div>

 

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

You may also like...