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);});
//-->
</script>
<style type="text/css">
.exelikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrBmPE8y8WSDkH3VMdC9I7BJB9gGuWRCyzLv8jAt9ONiwZiOSju2JcTxdxWGILIMk54sqbXstrfsjDRfe8RO444iCZOvOF3nXOaCte7sskZUKhK01QvIZhvjnl46pd6479V_qAO0CrG7hl/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.

Advertise Here Free

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! >>