The Weboutline: Adding Floating Facebook Like Button On Sites

Wanna increase your like by adding the Floating facebook like buttons on your website. Then you are in the right page. 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.

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.

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.

<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"> .bittnbyte{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWkoiE5sFpUettrZwpBuLMcLTOwY9xXEnThJCwSfJK9cDvzNBSRhqczMf3LfQPazB3rOMzhPAoEx7JF6FseEhfB4DwqG0irSY5ek5l-4GwbwueE4CDfV_uoZ6FW8Iap92rR4HHwaS666jr/") 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%;} .bittnbyte div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;} .bittnbyte span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .bittnbyte span a{color: gray;text-decoration:none;} .bittnbyte span a:hover{text-decoration:underline;} } </style><div class="bittnbyte" style="">
<div>
 <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;"></iframe><span><center>
<a style="color:#a8a8a8;font-size:8px;" href="http://faceupward.com">Face Upward</a> - <a style="color:#a8a8a8;font-size:8px;" href="http://bittnbyte.blogspot.com/2014/06/adding-floating-facebook-like-button-on.html">Widget</a></center>
</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.

Go to Design>Edit HTML
Search for <head> and just below it paste the following JQuery code.

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.

Enter your facebook username
Search for the line of code below and replace bittnbyte with your own facebook page username.

The Weboutline

Pages

Friday, June 13, 2014

Adding Floating Facebook Like Button On Sites

How to Customize

No comments:

Post a Comment