Static Facebook Pop Out Like Box will add a floating light box on the left side of the blog. Only floating Facebook button will be shown and your page like box will be shown when someone will hover on Facebook button.
How to Add Static Facebook Pop Out Like Box with Smooth Jquery Hover Effect?
Step 1. Go to Template > Edit HTML.
Step 2. Search for the following code.
</head>
Step 3. Add the following code just above the searched code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Step 5. Save Template.
Step 6. Go to Layout > Add a New Gadget > Add HTML/Javascript Gadget.
Step 7. Paste the following code in HTML/Javascript Gadget.
<style type="text/css">
#fbplikebox {
display: block;
padding: 0;
z-index: 99999;
position: fixed;
background: #ffffff;
}
.fbplbadge {
background-color: #3B5998;
display: block;
height: 150px;
top: 50%;
margin-top: -75px;
position: absolute;
left: -47px;
width: 47px;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKEaxNeO3Y4yINHs9uknrz68nurjyELJgw0G0HSfveLDsAzZ9Jq2XMzq8_-U_2MqqxPKRJZNlmpgL-ZWApySWVIuaBA1BxkSf17Oj1XnHt9fb8RM-9rm7ahDIORJUzIjNLO6qpbyNiYKg/s1600/vertical-right.png");
background-repeat: no-repeat;
overflow: hidden;
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-topleft: 8px;
-moz-border-radius-bottomleft: 8px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
</style>
<script type="text/javascript">
/*<![CDATA[*/
(function(w2b){
w2b(document).ready(function(){
var $dur = "medium"; // Duration of Animation
w2b("#fbplikebox").css({right: -250, "top" : 100 })
w2b("#fbplikebox").hover(function () {
w2b(this).stop().animate({
right: 0
}, $dur);
}, function () {
w2b(this).stop().animate({
right: -250
}, $dur);
});
w2b("#fbplikebox").show();
});
})(jQuery);
/*]]>*/
</script>
<div id="fbplikebox" style="display:none;">
<div class="fbplbadge"></div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=FACEBOOK-PAGE-URL&width=250&height=250&colorscheme=light&show_faces=true&border_color=%23C4C4C4&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;" allowtransparency="true"></iframe>
</div>
Step 8. Change FACEBOOK-PAGE-URL with your Facebook Page URL. You have to also do changes with URL as follow.
- Change ":" with
%3A
- Change "/" with
%2F
Example:
My Facebook Page URL is
http://www.facebook.com/DownTechz
After Replacing code it will look like
http%3A%2F%2Fwww.facebook.com%2FDownTechz
Customization for Facebook Pop Out Like Box
- To change the background color, change the value #ffffff with color code.
- To change the facebook button color, change the value #3B5998 with color code.
- To change the size of the static facebook like box, change the value 250 with the size you want for your static facebook like box.
Step 8. Click Save and You are Done!