Add Static Facebook Pop Out Like Box With Smooth Jquery Hover Effect

Facebook Like Box allows your visitors to get your updates/notifications in an easy and convenient way. This box allow your visitors to join your community with ease of a single click. After subscribing, the person will receive all the recent updates on their feeds. So, today in this tutorial we're going to show you that How to Add Static Facebook Pop Out Like Box With Smooth jQuery Hover Effect to Blogger that slides to the left on mouse hover.

Adding Static Facebook Like widget on blogger

Step 1. Log in to your Blogger Dashboard, go to Template >> Edit HTML
Step 2. Search (Ctrl + F) For the following tag:

</head>

Step 3. Add the below code just above/before </head> tag.

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

Step 4. Click Save template button
Step 5. Now go to Layout >> Add a Gadget >> Choose HTML/JavaScript From the list of Gadgets  and in the HTML Box Paste the below code.

<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/AVvXsEjzO01zSbbsTvUj7qEztQIzNAy7C1bnDq236gjP5HSW5v9s_lc4rW_HCQ0vLDmNq6r0W1kdNJ5Jj0pG8bmB7SgmRCumGWpXIBrAnX2bspVVZZskekdqTEAO28avZr5s_8vkdAiG1Mc2ywM/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(tct){
        tct(document).ready(function(){
            var $dur = "medium"; // Duration of Animation
            tct("#fbplikebox").css({right: -250, "top" : 100 })
            tct("#fbplikebox").hover(function () {
                tct(this).stop().animate({
                    right: 0
                }, $dur);
            }, function () {
                tct(this).stop().animate({
                    right: -250
                }, $dur);
            });
            tct("#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&amp;width=250&amp;height=250&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:250px;background:#FFFFFF;" allowtransparency="true"></iframe>
</div>

Customization:
Replace Facebook Page Url with the Url of your facebook fan page.(Note In Your facebook fan page url, Don't forget to replace / symbol with %2F and : symbol with %3A).
For Example my Facebook fan page is:

http://www.facebook.com/pages/blogolect/603253459726210

After replacing the characters above, your Facebook fan page should look like this:

http%3A%2F%2Fwww.facebook.com%2Fpages%2FF603253459726210

Click Save button.
And you're done!

Share This:

Tags:

Widgets

• Prevoius
• Next