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.
<!--Floating Facebook Widget by www.TheBlogWidgets.com START-->
<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".theblogwidgets").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .theblogwidgets{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRCT1VvIIQpzltbU2uScYQipM3Kx98vr_SQLcXVj2nTLZ6Oy0lqXqOAEMRmXONOW4q6X4zYZjQBFecdthCAZ9aYPhbj181lPzurRoQnOmekeByKFOuRUP_OQv_4FAqwDwdT8gc4JX5_V05/") 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%;} .theblogwidgets div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;} .theblogwidgets span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .theblogwidgets span a{color: gray;text-decoration:none;} .theblogwidgets span a:hover{text-decoration:underline;} } </style><!--Brought to you by www.TheBlogWidgets.com--><div class="theblogwidgets" style="">
<!--Brought to you by http://www.theblogwidgets.com/2013/11/floating-facebook-like-box-widget-for.html--><div>
<!-- http://www.theblogwidgets.com/2013/11/floating-facebook-like-box-widget-for.html--> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Ftheblogwidgets&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;color:000;"><!--Brought to you by www.TheBlogWidgets.com--></iframe><!--Brought to you by www.TheBlogWidgets.com--><span><!--Brought to you by www.TheBlogWidgets.com--><center>
<a style="color:#a8a8a8;font-size:8px;" href="http://jasperroberts.com">Jasper Roberts</a> - <a style="color:#a8a8a8;font-size:8px;" href="http://www.theblogwidgets.com/2013/11/floating-facebook-like-box-widget-for.html">Blog</a></center>
</span></div>
</div>
<!--Floating Facebook Widget by www.TheBlogWidgets.com AND www.JasperRoberts.com END-->
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.
<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 theblogwidgets with 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 theblogwidgets with your own facebook page username. If you don’t have a username you can easily create your own here.
facebook.com%2Ftheblogwidgets
0 comments:
Post a Comment