Awesome Facebook LikeBox for Websites and Blogs

Awesome Facebook LikeBox for Websites and Blogs

Here we are again with this terrific widgets. People, over the years uses the facebook like button and default like box but today I want to introduce you to an amazing facebook widgets.Slightly like our all-in-one social media widget, the Floating Facebook Likebox is a Slider that hides the Like Box inside a container and reveals it only when visitors hovers the cursor on the floating button.

floating_slide_out_facebook

Supported Platforms

The Floating Facebook Like Box works on every platform. Yes, including bloggerwordpress and Oxwall. Although the installation varies from one platform to the other.

See Demo

Installing the Facebook Floating Like Box

Step 1: Adding JQuey Plugin

For this widget to work, you need to have the JQuery Plugin installed in your website. If you haven’t installed this pluging, kindly follow the steps below.

Adding JQuery Plugin To a Website

Add the following code anywhere within the header section. If you are not sure what the header section is simply find <head> in your html code and add the following  JQuery code just below/after it and save your changes.

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

 Adding JQuery Plugin To Blogger

  • Go To your Dashboard > Design > Edit HTML
  • Search for </head> before/above it paste the above JQuery code.
  •  Go To your Dashboard > Design > Edit HTML
  • Search for </head> before it Paste the following JQuery code.
  • Save your changes

Adding JQuery Plugin To Oxwall

  • Logon to your admin dashboard
  • Goto settings and click on main settings
  • Click on Page Settings
  • Now copy theabove JQuery code to where you have “custom head code”
  • Save your settings.

Step 2: Adding tthe Floating Like Box

Adding the following code anywhere in the <body></body> section should work just fine but to avoid making mistakes, it is advisable you use a Custom HTML/JavaScript Widget which is found in every cms. Just paste the following code into a new Custom HTML/JavaScript Widget.


<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/-UuBsjDC5vSc/TuiSd0g9bHI/AAAAAAAAAyk/MqKt8IpiIVM/s1600/facebook1.png") 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: 10px;font: 9px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #FF9D00;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style="">
<div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/elitestech&
width=245&colorscheme=light&show_faces=true& connections=8&stream=false&header=false&height=330" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span>Widget by:<a href="http://www.ewtnet.com/2012/06/how-to-add-floating-facebook-likebox-to.html" rel="nofollow">Elites World Technology</a></span></div>
</div>

If your are using the Blogger platform, you can do the following:

  • Go To Blogger > Design > Page Elements
  • Click on “ADD A GADGET”
  • Choose HTML/JavaScript Widget
  • Paste the above Code inside it..
If you have not yet created a Facebook Username to your Fan Page then Create it, Once you create a username then replace elitestech with your newly created username.
  •  Finally, hit the save key and leave your comments below

The following two tabs change content below.

Ebenezer Obasi

Senior executive editor at EwtNet
A web developer, IT undergrad, terrible entrepreneur, internet freak and a man of a few other incongruous talents, Ebenezer has been writing on technology since 2012, and plans to do so until a few days before his ultimate fate: cryogenic preservation. If resurrected, he is likely to go back to writing on technology.

Recieve Free Email Updates!

3 Comments

  • OMG,

    I’m glad that I read this tutorial. Wow such an amazing and very informative article.

    Thanks for sharing this. I found this really helpful and already shared it with my social media friends 🙂

    I also added it on my blog and its really working fine.

    Thanks once again 🙂

  • App Not Setup: This app is still in development mode, and you don’t have access to it. Switch to a registered test user or ask an app admin for permissions.
    When you try to share even on your demo

Leave a Reply