Add Static Facebook Pop Out Like Box with JQuery

Add Static Facebook Pop Out Like Box with JQuery

Here I am providing tutorial about How to Add Static Facebook Pop Out Like Box with JQuery widget for blogger website. This static facebook... 9:10:00 AM

Here I am providing tutorial about How to Add Static Facebook Pop Out Like Box with JQuery widget for blogger website. This static facebook pop out like box widget for your free space on left or right side of your website. This widget show your facebook fan page on the box to get more likes on facebook page. Here I give you simple jquery code with hover effect. When anyone move their mouse on the facebook plate than your facebook fan page visible by sliding to the left.

Static Facebook Pop Out Like Box with JQuery

Follow below steps to add Static Facebook Pop Out Like Box with JQuery:

Step 1

Login into your blogger account. Go to your Blogger Dashboard and click on layout button from left panel. Click on Add a gadget Link as shown in below picture.

Step 2

When you click on Add a Gadget link a popup box will open with all gadgets list, Choose HTML/JavaScript from gadgets. Like below picture.

Step 3

Now copy and paste below code into HTML/JavaScript box.

Style 1

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuX5uh4wO6DVIYpnZ8mM8RpMgZ4md3APy_NL4L1g8qS8jq6UgCqmq-TTGurCJC0r-S3ZICGMjYlVcklvv8Gi0Bq4kqN1Nr9IR2Dlk-dyUzzJhX6CyPGwM3DZf9b5wEpa9k7ShP681kddTQ/s1600/facebookbadge.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%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div><a href="http://www.haakblog.com/" rel="dofollow" target="_blank" title="My Blogger Tricks"><img src="http://img1.blogblog.com/img/blank.gif" alt="My Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/haakblog&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>

Note: Change Haakblog to your fanpage name.

Style 2

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style type="text/css">
img, a { border: 0; }
#on { visibility: visible; }
#off { visibility: hidden; }
#facebook_div { width: 196px;
height: 340px;
overflow: hidden; }
#facebook_right {
z-index: 10005;
border: 2px solid #3c95d9;
background-color: #fff;
width: 196px;
height: 353px;
position: fixed;
right: -200px; }
#facebook_right img {
position: absolute;
top: -2px;
left: -35px; }
#facebook_right iframe {
border: 0px solid #3c95d9;
overflow: hidden;
position: static;
height: 360px;
left: -2px;
top: -3px; }
#facebook_left {
z-index: 10005;
border: 2px solid #3c95d9;
background-color: #fff;
width: 196px;
height: 353px;
position: fixed;
left: -200px; }
#facebook_left img {
position: absolute;
top: -2px;
right: -35px; }
#facebook_left iframe {
border: 0px solid #3c95d9;
overflow: hidden;
position: static;
height: 360px;
right: -2px;
top: -3px; }
</style>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#facebook_right").hover(function () {
jQuery(this)
.stop(true, false)
.animate({ right: 0 }, 500); }, function () {
jQuery("#facebook_right")
.stop(true, false).animate({ right: -200 }, 500); });
});
</script> <br /> <div id="on"><a href="http://www.haakblog.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="http://img1.blogblog.com/img/blank.gif" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://www.haakblog.com/" rel="dofollow" target="_blank" title="Blogger Tutorial"><img src="http://img1.blogblog.com/img/blank.gif" alt="Blogger Tutorial" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><div id="facebook_right" style="top: 10%;">
<div id="facebook_div">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPz3RMsYH1qJfiV0Jkxdw19_irdGnkgtjZxXja4aMe_daNjBu83r3kWDtyBzywHjci2oL1UOI4eeJQcaGnYj4j2UKn-Sr5rIK0l3R13iqgVjOJqTUPNeRR2wpDaSEVm71o0ml5lJ8kES1M/s1600/NBTfacebook_right.png" />
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/haakblog&amp;
width=200&amp;
height=346&amp;
colorscheme=light&amp;
show_faces=true&amp;
border_color&amp;
stream=false&amp;
header=false" style="border: none;
height: 346px;
overflow: hidden;
width: 200px;">
</iframe>
</div>
</div></div>

Note: Change Haakblog to your fanpage name.

Step 4

Click on Save button.