Welcome to www.ExEBlogger.Blogspot.Com | Want This Template! Subscribe us!
Subscribe For Free Updates!

We'll not spam mate! We promise.

Sunday, 6 October 2013

Add Facebook Sliding Like Box with JQuery to Blogger

Add Facebook Sliding Like Box with JQuery to Blogger
Today I will tell you How tom Add Sliding Facebook Like Box for Blogger. Facebook pop up like box now a days used by many bloggers and webmaster to increase their Facebook fan page traffics in short period of time.Facebook pop up like box gain popularity day by day and it becomes a well known Facebook widget in 2013. You might have observed that now a days every one every webmaster and bloggers promote theirs blog website in different ways and styles. Many of them use this widget and it will surely increase your Facebook Fan page traffics.

This widget is widely used by many bloggers and webmasters to promote and increase the facebook fan page popularity. facebook pop up like box created in javascript, CSS, HTML and JQuery

For Live Demo Click Here  ======================>

See Sliding like Box on Right Side of Page :)

How To Add Floating facebook Like Box in blogger

Follow these Two simple steps given below
  • Got to Blogger Dashboard>>Layout:
  • Add a Gadget>>Html JavaScript Gadget:
  • Inside Html/JavaScript Gadget Past below code
Step 1:

<script type="text/javascript">
$(document).ready(function() {$(".exelikebox").hover(function() 
{$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
<style type="text/css">
.exelikebox{background: url("http://1.bp.blogspot.com/--tscpVzcBjo/TdUarKtcAlI/AAAAAAAAA3I/qVkypiYO9rc/s150/w2b_facebookbadge.pn") 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%;}
.exelikebox div{border:none;position:relative;display:block;}
.exelikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.exelikebox span a{color: #808080;text-decoration:none;}
.exelikebox span a:hover{text-decoration:underline;}
</style><div class="exelikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FExEBlogger&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp; connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div></div>

Step 2:

Now you have done step one comes here what the next:
  • After adding the above code in layout html JavaScript Gadget:
  • Now go to Dashboard >>Template >>Edit Html
  • Find </head> tag and just before it past the below code.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

Now you have done all most click on save template and visit your blog you will see facebook sliding like box on right side of home page. 

Facebook pop like box Customization

Two possible customization you have in this widget first one is change ExEBlogger with your own facebook fan page username and the second is if you want to appear this widget on left side then simply change float: right to float: left and you have done. 

What if facebook pop up like box does not work

  • Go to your Facebook Fan Page which you want to appear.
  • Go to Edit Page >> Update Info
  • Then write unique name for your page by click Username
  • when you write available username for your page then copy that and replace with ExEBlogger
  • Noted you can only one time change this name after this you have no permission to change it.

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you Subscribe to our regular Email Updates!
Share This Story, Choose Your Platform! >>


  1. Hey There. I discovered your blog the use of msn. That is a very smartly written article. I’ll be sure to bookmark it and come back to learn extra of your helpful information. Thank you for the post. I’ll definitely return.
    website design