Hello folks,Today in this article we are going to explain How to install facebook floating like box in blogger sidebar.In previous article we have already talked about how to create new 2016 facebook popup widget for blogger template.fb like box is a very important gadget for any website or blog.you must install facebook plugin to increase your website fans or followers.With the use of this sidebar floating facebook like box you can grow your facebook fans very easily.This beautiful widget comes with on mouse effect when someone just put a mouse hover on facebook button this gadget will slide out and they can just click on like button and become your follower.you might have seen this kind of widget in lot's of websites.we have customized it to suits every blog niche.
However there are still lot's of facebook plugin tool we will share in next post and bloggersstand trying hard to send you each and every gadget with unique features and suits your blog design.Facebook followers always play a important role in any website to increase the ranking because whenever you share your article on your website facebook page it's always get some visitors from facebook,if your posts is unique and original you might get a big traffic from social media networking sites.So always install facebook,twitter, plugins tool in your website or blog to keep your reader updated with latest updates of your blogger blog.soon we will share more amazing tricks and gadget for you.Now to grab this widget just follow the steps mentioned below.
How to create facebook like box floating slide out button in blogger template:
Installation Steps:
Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.
Step 2. Now Go to your Layout->Add a Gadget->Select->HTML/JAVASCRIPT box and copy the below code snippet and paste in the gadget.
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".bsdbox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.bsdbox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ6EWtypQ_L6jf66Pqs6Zx1ZwHHDAW24feME9JW-vqD2VFd0QoIXGymL4cRbViI_UViraApyzHEaA0GL8uqQpvfV46DZAXj-VGVQQvT32E7ZhIPt3XWEBtXgC7YMAAL4hqH7XTRzxDuxQ/s1600/floating+fb+button+bloggersstand.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%;}
.bsdbox div{border:none;position:relative;display:block;}
.bsdbox span{bottom: 12px;font: 8px "Roboto",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.bsdbox span a{color: #808080;text-decoration:none;}
.bsdbox span a:hover{text-decoration:underline;}
</style><div class="bsdbox"><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fbloggersstand&width=246&colorscheme=light&show_faces=true& connections=9&stream=false&header=false&height=272" scrolling="no" frameborder="0" style="border:4px solid rgb(59,89,152); overflow: hidden; height: 267px; width: 242px;background:#fff;"></iframe></div></div>
Step 3. Now Search for the <body> tag and copy the below java script and paste it after/below <body> tag. if this script is already added then you can skip this step.
<div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
// Facebook Floating Box By www.Bloggersstand.com
window.fbAsyncInit = function() {
FB.init({
appId : '1480936988887062', // you can change with your app id
status : true, // check login status
cookie : true, // enable cookies
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
//]]>
</script>
Customization:
- if you already created your facebook like box app then you can replace the above highlighted app id with your app id.
Step 4. Now Save your Template..Done !