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.
Supported Platforms
The Floating Facebook Like Box works on every platform. Yes, including
blogger,
wordpress 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