HOW TO ADD A STATIC FACEBOOK POP OUT LIKE BOX WITH JQUERY HOVER EFFECT TO BLOGGER

One of the strategies which can be used to boost a blog 's popularity is by establishing a Facebook post for it. Creating a Facebook page goes a long way in increasing your blog's fan page. It helps you link your Facebook friends to your blog post.


SEE ALSO:
==>>HOW TO AUTOMATICALLY SHARE YOUR BLOG POSTS ON YOUR FACEBOOK PAGE.

In this tutorial, am going to show you how to add a Facebook plugin to your blog. It is a sticky Facebook plugin which float on the right hand side of your screen. Just follow the steps below and you would be able to enjoy this wonderful feature.

ADDING A STATIC FACEBOOK POPUP WIDGET TO BLOGGER

• Firstly, Log into your blogger account, then select TEMPLATE and next, you select EDIT HTML.

• 

• Next, Click anywhere anywhere inside the code area and press the CTRL + F keys to bring out the search box.

• Search for this Tag (Using CTRL + F)

</head>

•  Now, add the following code block just above the </head> Tag

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

• Now save the Template.
• Next, go to Layout ==>>Add a new Gadget==>>Now select the HTML/JAVASCRIPT gadget==>>Paste the code below into the Html/Javascript 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsVc6ZFvUzpkkgh0Vvj1qYeKpbh6VyjzcnjtH5CMFPvqidt2KzRUTgcMxkSnaRMWP400aSg-7gjwJr3jx1tLk2s-SVvG1d5-pwAHrgHK31O1d6l7i-jPs8JaxxmeI-GFNDVEsFJxLgHtM/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;" allowtransparency="true"></iframe>
</div>

•  Now replace YOUR-FACEBOOK-PAGE with your own Facebook fan page URL.
• Replace the following characters in the URL, as follows: 

       The symbol   :   with  

%3A

       The symble   /   with  

 %2F

So, if your Facebook fan page is something like:

http://www.facebook.com/ugoxy/46456324523

After following the steps above and replacing the symbols, your URL should look like this:

http%3A%2F%2Fwww.facebook.com%2Fugoxy%2F46456324523

OTHER CONFIGURATIONS.

1. You can change the background colour of the box by changing the #ffffff  value. You can pick the colour of your choice using this Hex Colour Code Generator.
2. You can also change the facebook badge colour by replacing the #3B5998 colour to the colour of your choice.
3. Finally, you can change the height and width of the Facebook box by changing the values in (250)

 That's all, you can now save the Static sidebar Facebook gadget by just clicking the SAVE button.

So that's how you add a static Facebook  pop out box to your blog. If you are lost at any step or have any question, you can leave it in the comment section.


Don't forget to share and also drop by for more..............