how to add a floating facebook fanbox to blogger or wordpress

Social Media is a great tool for bloggers who wish to gain extra traffic outside organic, direct and referral traffic.

Therefore building up a Facebook Fanbase using the facebook fanpage feature won’t be a bad idea at all.

This post would guide you through how to create a Floating and Slide Out Facebook Fan Linkebox on your WordPress or Blogger Blog like this image here.


One thing obvious about this box is that it would help convert your visitors into your Fans and readers because of its visibility.

 

Adding the Facebook Floating Fanbox to Blogger

Here is a step by step guide to add this to your blogger blog.

  1. Login to your Blogger Dashboard. Right beside the blog you wish to add this to, click on the drop down men, select Layout > Add Widget > HTML/JavaScript .
  2. A new window would pop up, in the Content area, copy and paste the below code.


    <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://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><div style=""><div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Foscarmini&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>Widget by:<a href="http://www.OscarMini.com">Blogging & WordPress Tips</a></span></div></div>

  3. Then Click on Save.
  4. Now go back to your blogger Home Dashboard, click the drop down button next to the blog, select Template > Edit HTML. Now tick the Expand Widget Templates checkbox.
  5. Press Ctrl + F to search, then search for </head>
  6. Right before it copy and paste this code


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

  7. Click on Save Template.

And that’s how to add a floating Likebox to blogger. Visit your blog and see the effect. Now, let’s move over to how to add it to WordPress blogs.

Adding the Facebook Floating Fanbox to WordPress

Here is a guide to add this to your WordPress blog as well.

  1. Login to your WordPress Dashboard. Locate Appearance on the Left sidebar, click on Appearance > Editor.
  2. After the new page loads, Click on header.php on the right sidebar to load the header file.
  3. Press Ctrl + F to search, then search for </head>
  4. Right before it copy and paste this code


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

    Then click on Update File.

  5. Now click on Appearance > Widgets, drag and drop a Text Widget to your sidebar, then copy and paste the below code in the wide box.


    <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://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><div style=""><div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Foscarmini&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span>Widget by:<a href="http://www.OscarMini.com">Blogging & WordPress Tips</a></span></div></div>

  6. Then Click on Save.

And that’s how to add the Floating Slide Fanpage Likebox to your WordPress blog.

Note:: Remember to change oscarmini to your facebook fanpage username.

Here is a Demo to checkout what it looks like. It is located on the right sidebar of the Demo Page.

9 COMMENTS

  1. Sorry, I got a Problem. If i use wordpress genesis ramework theme,where do I add the ” ” ? or something should I change ? please tell me how to do?

  2. Thank you for sharing this tips, dear. How to use this widget to make floating in the center of page when visitor click on my site ( with close button on the corner)? Please advice…

    • Hi Whedan,
      It won’t be cool floating this at the centre of your page as it can annoy users. Although their are other floating Like boxes you might want to try out also. Check out our social media tuts session for those.
      I hope I answered you correctly, if not , please let me know.

LEAVE A REPLY

Please enter your comment!
Please enter your name here