How to Add Static Facebook Pop Out Like Box with Smooth Jquery Hover Effect

Hello friends we all know that BlogSpot is the most popular blogging in the world. On the other side Facebook is the world largest social Networking site. . Today Facebook Like button,Like Box became a more powerful tool for sharing content. So why you not add Facebook Pop Out like button on your blogspot blog?

This Facebook Box Will Help Your Visitor To Become A Regular Reader Just By Clicking Like Button. Most Of Readers Like To Fetch Updates From Facebook Page (This Is Better Than Email Newsletter). Follow These Steps To Add Facebook pop Out Like Box To Blogger Blog. 

How to add Facebook Pop Out Like Box to Blogger  

Go To Blogger Dashboard.

1. Next, go to Template, and click on the Edit HTML button:

2. Check the "Expand Widget Templates" box:

3. Search (using CTRL + F) for the following code :

</head>

4. Add the following code just before/above </head> tag:

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

5. Save the Template.


6. Now go to Design >> Page Elements >> Add a new Gadget >> Choose HTML/JavaScript and in the HTML box, paste the code below:

<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/AVvXsEg1OHfoqTzk1ZUpPFfPVXzhGfTNrMEq4fvzurhRWGW6RGV7xiaTUccPd3klpNPTDnbCl85AvGxOs5zROGsUZW-eiMTvLMdLIsThJszZo38Qows5K80tWwBuDLNDep_3Y42-oRFVOpB_qG0/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=YOUR-FACEBOOK-PAGE&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>

7. Replace YOUR-FACEBOOK-PAGE text above with the URL of your facebook fan page.
Also replace the : symbol in your URL with %3A and / with %2F

For example, my facebook fan page is:

http://www.facebook.com/pages/Pinkusays/270740233060112

After replacing the characters above, your facebook fan page should look like this:
http%3A%2F%2Fwww.facebook.com%2Fpages%2Fpinkusays%2F270740233060112

Other settings (optional):
- to change the width and height of the facebook box, change the bolded values (250)
- to change the background color of the facebook fan box, replace #FFFFFF with the hex code of your color (you can choose it from here)
- if you want to change the color of the facebook badge (facebook button) replace this code #3B5998
with your own.

8. Now you can save your widget. Enjoy!

Posted in: facebook, Tutorials