Are you struggling to get more facebook likes? Add a floating facebook like box to your blog or website. The widget remains in a fixed position on the right-hand side of your site. When you hover over the blue facebook image, the like box will then slide and reveal itself using jquery.
View Demo
You can see a demonstration of this facebook widget on the right side of this page. Hover over the facebook image with your mouse. A facebook like box should appear.
Add Widget to Your Site
Step 1
Add the following code anywhere in the body section of your template. Or simply click the “add to blogger” button for blogspot blogs.
Add the following code anywhere in the body section of your template. Or simply click the “add to blogger” button for blogspot blogs.
<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .abtlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPMDjjo11ouNYdwA8H-Vp01QECEwlb3PKvGboqfTYDehtKv955rDkD3yjO4HJHYkH6kUYXhoPbbfyEZjKZyY_5BKRzbCfQ0Gvsl4jf2pW5FFTYjZRZdFlpV0gVFipDz8x6EeOHQnSlu4M/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .abtlikebox span a{color: gray;text-decoration:none;} .abtlikebox span a:hover{text-decoration:underline;} } </style> <div class="abtlikebox" style=""> <div> <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FSoftwarez-and-Gamez%2F643604845669871&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span>Get Widget Here :<a href="http://onlygamesandsoftwares.blogspot.com/2013/09/how-to-get-sidebar-facebook-plugin.html"> Softwarez and Gamez by HassaanTariq</a></span> </div> </div>
Step 2
If the floating facbook widget is not working properly after step 1, then you need to add jquery to your site. Follow the instructions below.
If the floating facbook widget is not working properly after step 1, then you need to add jquery to your site. Follow the instructions below.
- Go to Design>Edit HTML
- Search for <head> and just below it paste the following JQuery code.
1
|
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'>
|
How to Customize
Where to find the code?
In order to find the html go to the blogger dashboard>Layout. Click “edit” on the “HTML/Javascript” gadget.
In order to find the html go to the blogger dashboard>Layout. Click “edit” on the “HTML/Javascript” gadget.
Enter your facebook username
Search for the line of code below and replace FSoftwarez-and-Gamez%2F643604845669871with your own facebook page username. If you don’t have a username you can easily create your own here.
Search for the line of code below and replace FSoftwarez-and-Gamez%2F643604845669871with your own facebook page username. If you don’t have a username you can easily create your own here.
1
|
facebook.com%2Fpages%2FSoftwarez-and-Gamez%2F643604845669871
|
No comments:
Post a Comment