How to add Sliding Floating Facebook Like box in Blogger.

How to add Sliding Floating Facebook Like box in Blogger.

I have written so many posts on how to use social media buttons on blogger and wordpress (site). The first mindset before publishing any post is to give readable and catching post for your readers to read, they will still intend to come back to read any of your new post, with facebook like buttons you can keep them update with just only one click. 

The Facebook is one of the top social media network through which massive traffic can be generate for sites and for the promotion of  site content and brand. 

Am going to show you another facebook like box widget, which slide in and out  from the left or right side of the site depending on your desire side as it is on our site. 

With just one click to like your facebook fan page it will make your visitor to become regular reader just by clicking like button. And also the box will also increase the numbers of your facebook fans. It is easy to add to blogger without affecting any existing widget (s) on the site.

Importance of Facebook likes For business and Brands

To get this widget for your site kindly follow the steps below:


1. Go to Blogger

2. Click the Blog, you want to add the widget on.

3. From the blogger dashboard, click layout menu from the blogger dashboard menu.

4. On the layout menu click "Add a Gadget". Now a new window pop up.

Now copy the code below

 <style>/*crawlist.net CSS starts*/
.ks-slide {
  position: fixed;
 top: 200px;
  right: 0;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
.ks-box{
  height:270px;
  width:266px;
  border:2px solid #444444;
  border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
  background:#fff;
  position: fixed;
 top: 200px;
  right: -265px;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
.ks-slide:hover {
right:265px;
}
.ks-slide:hover .ks-box{
  right: 0;
}/*crawlist.net CSS ends*/</style>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="ks-slide">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKM06HkZa51FPBrZMS7a0uHdf6G8XlP7RMYtWMqvVCqzGEqO8WQIzbzN5v4fBRqOoJWQAlFfdwHQQEgABHKZLJodYKSEJdQ8o6LWUzLDlSXqPdRLet-3jgpF3fpIxuOw0rRJz5dZYzTXk/s1600/m.png" />
  <div class="ks-box">
<div class="fb-like-box" data-href="http://www.facebook.com/dohhnutt" data-width="265" data-height="265" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="true"></div> 
  </div>
</div>

5. Paste your code into the new pop up window "Content Space"

How to add Facebook like box in wordpress – FB fan box for wordpress

Note: Replace my facebook page URL with your page URL, You can also change the Width And Height of the widget to your own desire size.

4. Now click save and you are done.

You can also like us on Facebook