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.

[symple_button url=”http://test.eobasi.com/” color=”blue” button_target=”_blank”]See Demo[/symple_button]

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="https://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:

Did you get the answer you were searching for?

Save hours of searching online or wasting money testing unnecessary plugins, get in touch with me and let's discuss a suitable plan for your project. Best thing about this service is that you are never placed on hold and get to talk to an expereinced Oxwall/Skadate developer.

Get Answers for Free!

Ask a question related to this topic and get immediate answers from other community members in 48hrs or less. Contribute by answering members questions.

Ask Question
Premium Service

Whether it's a custom plugin, theme or dedicated support needed to get you started on your project, get professional 24/7 support tailored to your need.

Get in Touch

Or just leave a comment...

  • 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

4 thoughts on “Awesome Facebook LikeBox for Websites and Blogs”

  1. 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 🙂

  2. thanks for the tutorial, can I use the script to my work removing the backlink below the widget “widget by ewnet”??

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