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

In this tutorial, I will show you how to add a cool floating Facebook like widget for Blogger that slides to the left on mouseover. Demo: You can see a static Facebook badge on the right side of this blog:

Adding Static Facebook Like widget on Blogger

Step 1. Log in to your Blogger account, go to "Template" and hit the "Edit HTML" button

Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box:

Step 3. Search (CTRL + F) for this tag:
Step 4. Add the following code just before/above </head> tag:
<script src=""></script>
Step 5. Save the Template.

Step 6. Go to Layout > Add a new Gadget > select the 'HTML/JavaScript' gadget and paste the code below in the HTML box:
<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("");
    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;
<script type="text/javascript">
            var $dur = "medium"; // Duration of Animation
            w2b("#fbplikebox").css({right: -250, "top" : 100 })
            w2b("#fbplikebox").hover(function () {
                    right: 0
                }, $dur);
            }, function () {
                    right: -250
                }, $dur);
<div id="fbplikebox" style="display:none;">
    <div class="fbplbadge"></div>
    <iframe src=";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;" allowtransparency="true"></iframe>
Step 7. Replace YOUR-FACEBOOK-PAGE text with your Facebook fan page URL. Then, you will need to replace the following characters in the URL, as follows:

The  symbol with:
The  symbol with:
For example, the Facebook fan page of this blog is:
After replacing the above symbols, the Facebook fan page would look like this:
Other settings (optional):
- to change background color of the fan box, replace the #ffffff value in red. You can pick the favorite color using this Color Code Generator.
- to change the Facebook badge color, replace the #3B5998 color value with your own.
- to change the width and height of the Facebook box, change the values in red (250)

Step 8. Now you can save this static Facebook fan box widget - press the 'Save' button. Enjoy!

Credit goes to Harish (way2blogging)


  1. Replies
    1. It works with my IE 9. Please verify if you have added the jQuery plugin from step 4.

  2. hai my facebook plugin working only on home page. plzz help me.
    nice plugin

    1. Search for this in your template (expand widget templates first): <b:widget id='HTML8'

      See if you don't have this line somewhere below it: <b:if cond='data:blog.url == data:blog.homepageUrl'>
      This should be removed (also the closing tag </b:if> located immediately after <b:include name='quickedit'/>)

    2. how to delete this wigdet

  3. this is a definite like, love it

  4. I especially like that I could change the color of the tab to match the dark blue on my site rather than using an image. I was also able to figure out to make style #fbplikebox {margin-top: to push it down past my header.

    Perfect! Thank you for sharing.

  5. I tried this on my blog here >>> instead of showing the facebook page however, it showed the top left corner of the blog on the roll out

  6. Never mind i figured out what i did wrong (Y) Working correctly now :)

  7. really love it...
    but this javascript make my slider and my Jquery dropdown menu didn't work... :(

  8. i love it thanks well on my blog

  9. Thanks for the tutorial is easy to understand and very useful

  10. how to make it always on top? the slide just appeared behind my sidebar blocks...

  11. hii....i have inserted the codes but still it is not working on my blog...please help me ....

  12. this is superb. its really work. i wasted 5 hours on searching it but i finally find your blog. it works you can view my site for demo
    where is the google + button

  13. its not working completely in my blog......picture template.
    i can see that at right side of my blog but not complete.
    just showing facebook.........please do something

  14. can you Please tell me the way to add this widget on my blog. but not as facebook page as facebook people.

  15. How to Remove duble faces in this Please tell me fast!

  16. it showing the box but not showing fb pge it showing my blog in that frame.. i done perfect as u suggested in description replaced the Facebook page url

    my page is

    1. Yes, it really works but i did not replace the symbol [ : ] and the [ // ] with what has been said in the last step. I used the original facebook fan page url. Plese try to visit my blog at to see

  17. Excellent tutorial. Thank you! Purple Facebook button looks great :D

  18. I would like to add that it also works on my website. Whoop! Whoop!


  20. I did not work for me can anyone help

  21. thank you so much,it works well :)

  22. Managed to add it but once I change the size it won't work... Any tips?

    1. Hi Laura,

      Please make sure that you don't delete any symbol around the 'width' and 'height' value.

  23. Perfectly working on my site

    Thanks for sharing.