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 mouse over. Demo: You can see a static Facebook badge at the right side of this blog.
Adding Static Facebook Like widget on blogger

Just follow the steps: 

1. Log in to your Blogger Dashboard, go to Design >> Edit HTML

2. Check the "Expand Widget Templates" box

3. Search (CTRL + F) for this tag:
</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("http://3.bp.blogspot.com/-1GCgbuSZXK0/T38iRiVF41I/AAAAAAAABpg/WlGuQ3fi-Rs/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/Sx....

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

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!

7 comments:

  1. It's a shame you don't have a donate button!
    I'd most certainly donate to this excellent blog! I suppose for now i'll settle
    for book-marking and adding your RSS feed to my Google account.
    I look forward to fresh updates and will talk about this
    blog with my Facebook group. Talk soon!

    Here is my blog post :: www

    ReplyDelete
  2. each time i used to read smaller articles which as well clear their
    motive, and that is also happening with this paragraph which I am reading at this place.


    Stop by my site www

    ReplyDelete
  3. Hello everyone, it's my first pay a visit at this web page, and post is truly fruitful for me, keep up posting these articles or reviews.

    Also visit my page; www *http://www.flagmatoxic.com/node/10616*

    ReplyDelete
  4. We are a gaggle of volunteers and opening a new scheme in our community.

    Your website provided us with helpful info to work
    on. You have done an impressive job and our entire community
    can be grateful to you.

    my homepage Swiss Replica Rolex

    ReplyDelete
  5. Hello, its pleasant article about media print, we all be familiar
    with media is a fantastic source of facts.


    My web blog: www (http://www.acaibeerekaufen.de)

    ReplyDelete
  6. Тhаnks in favor of sharing such a nіce thinking, parаgraph is plеasant, thats why і have
    read it entirely

    Feel free to νisit my web page: aktualizaсϳa
    Gοogle, *algorytmup.wordpress.Com*

    ReplyDelete
  7. Greetings! Very useful advice in this particular article!
    It is the little changes which will make the biggest changes.
    Thanks for sharing!

    my blog post www [www.anabolikakaufen24.de]

    ReplyDelete