Facebook Like Box For Blogger

Rate this Post:

{[['

']]}

Today i am sharing a beautiful static facebook like box which Pops out when you hover on the Facebook Button. Its a good way to attract the attention of your visitors and make your pages more attractive. It will also engage your users to spend more time on your Blog.
You can see the DEMO on my Own Blog in the Right Side. A Screenshot is also. I will Recommend to download the Images used in this Widget and upload in your Own Account to avoid any problems in the Near Future.

Add to Blogger:

Just Follow these Simple Steps;
Step 1: (Optional)
If You have JQuery Plug-in Then It’s good to Go to Next Step. If You Don’t have this script in your template, Then First Goto HTML and Paste this JavaScript above/before </head> tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
</script>

After You added This Script, Go to Next Step;
Step 2:

Login to Blogger
Goto Layout
Add a New Widget and Choose HTML/JavaScript

Now the Paste the Code given Below in the Widget.

<style type="text/css">
/*<![CDATA[*/
#likebox{
display: block;
padding: 0;
z-index: 99999;
position: fixed;
}
.fbbutton {
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/AVvXsEgPvA1PLZiDLo_v9oWLzcgy4mbuQoXAu-3D0t7RkaAyopJ3g0tXGQHKTBkxeDMwsYGT6uqWYknKaAZLcwojP2ytqHGus4dFc-htwM1BRRvZ5TN7fqDr55X70kMa_rl37HWicPNAWYXh-PjP/s1600/w2b_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(fbbox){
        fbbox(document).ready(function(){
            var $dur = "medium"; // Duration of Animation
            fbbox("#likebox").css({right: -250, "top" : 150 })
            fbbox("#likebox").hover(function () {
                fbbox(this).stop().animate({
                    right: 0
                }, $dur);
            }, function () {
                fbbox(this).stop().animate({
                    right: -250
                }, $dur);
            });
            fbbox("#likebox").show();
        });
    })(jQuery);
/*]]>*/
</script>
<div id="likebox" style="display:none;">
    <div class="fbbutton"></div>
    <iframe src="http://www.facebook.com/plugins/likebox.php?href=Link-of-your-facebook-page&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;background:#ffffff;" allowtransparency="true"></iframe>
</div>

Replace the “Link-of-your-facebook-page” with Your Own Facebook Like Page Link.
You can Change the Width and Height of your choice by changing the RED text.
That’s it. Now save the Widget and Refresh your page to see changes.
If you find any Problem. Please leave a comment Here.