Add Facebook Sliding Like Box with jQUERY To blogger blog

Would be not wrong if I say you already use facebook like box for your facebook page at your website/blog. But they don’t have any kind of effect they just live at your website/blog like a simple widget. It’s about how to add a pop out facebook like box with slide effect. I found a script online that adds a floating Facebook button to right side of your blogs or websites. The button upon clicking slides towards left revealing a Facebook Like Box. It is an excellent coded slider that Hides the Likebox inside a container and reveals it only when visitors hovers the cursor on the floating button.

 

View Live Preview

 

 

Add Like Box To Blogger Blog

 

1. Go To your Blogger Dashboard>>Template>> Edit HTML

2. and click on HTML Code then press CTRL+F and Find the Following code.

</head>

3. and paste the following jquery link before </head>

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

4. Find the following code.

</body>

5. and paste the following code before/above </body>

<style type='text/css'>
/*<![CDATA[*/
#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
.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/AVvXsEjYDHRMeqYDWWtPzgJcuBQ0I_hb7Zi05LB3fqvZ4vTB069WZ_88HA1eikglY4OMQGkm9XRdZm1XNdNVJ1kTuV-EkXOwSVnEW1XsPk1zNYZJRM7eY-vkl2U3NSoDtX85dl7i5WAc4JjbKvmR/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(w2b){
        w2b(document).ready(function(){
            var $dur = 'medium'; // Duration of Animation
            w2b('#fbplikebox').css({right: -250, 'top' : 350 })
            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=http%3A%2F%2Ffacebook.com%2Fbloggertricks&amp;width=250&amp;height=260&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false' scrolling='no' frameborder='0' style='border:none; overflow:hidden; width:250px; height:260px;background:#FFFFFF;' allowtransparency='true'></iframe>
</div>

http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fbloggertricks&amp

6. Replace “Bloggertricks” with you facebook page user name highlighted above in blue.

7. Click on save button and take your blog new look..

Visit your Blogs to see it floating at the right side of your webpage.  The widget  was created by Harish and we reshared at BLOGGERTRICKS. If you wish to change the direction, width, height, background. of the Likebox or make the image changes then do let me know.  Thanks for reading our post.