Floating widget for facebook like box

By
Advertisement

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

<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 "http://" and it contains no space or illegal Characters )
<div class="w2bslikebox" style=""><div><iframe src="http://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="http://www.sabinb.com.np/">Sabinb.com.np</a> / <a href="http://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……

23 comments:

  1. This comment has been removed by a blog administrator.

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

    ReplyDelete
  3. @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"

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

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

    ReplyDelete
  6. This comment has been removed by a blog administrator.

    ReplyDelete
  7. This comment has been removed by a blog administrator.

    ReplyDelete
  8. This comment has been removed by a blog administrator.

    ReplyDelete
  9. This comment has been removed by a blog administrator.

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

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

    ReplyDelete
  12. @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

    ReplyDelete
  13. This comment has been removed by a blog administrator.

    ReplyDelete
  14. This comment has been removed by a blog administrator.

    ReplyDelete
  15. This comment has been removed by a blog administrator.

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

    ReplyDelete
  17. This comment has been removed by the author.

    ReplyDelete
  18. @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>

    ReplyDelete
  19. This comment has been removed by a blog administrator.

    ReplyDelete

Content's Hits