How To Add Facebook Popup Like Box Widget in Blogger

Facebook is the most powerful social media site today. It has 1.35 billion users worldwide out of which 864 million users log onto their account on daily basis and you will be surprised to know that in every second, 5 new facebook accounts is created.

As you can see that facebook is a vast source of visitors, so we cannot ignore it. Utilizing facebook in correct manner may help your blog to get a regular supply of extra traffic and new visitors and subscribers.

Creating a facebook page for your blog and connecting it to your blog is a good way to increase your readership. The process is simple that people who connected on your blog through facebook reached your blog posts every time you upload your blog post as a status in facebook. Here you are receiving visitors from your already connected members from facebook. But using a popup facebook like widget you can actually send traffic from your blog to your facebook page. It helps you to create a good base on facebook and you can use this after strength to get visitors every time you create a post.

Add Facebook Popup Like Box Widget In Blogger

Step 1 : Open your bloggers dashboard. Now go to "Layout" and then select "Add a Gadget" as you                 can see in the picture below.

Step 2 : When you click on Add a Gadget, a popup window will appear. Then from the list shown                     select you have to select HTML/Javascript gadget.

Step 3 : Copy and paste the following code given below inside that box.

             <script src='https://kdcode.googlecode.com/svn/trunk/facebook.js' type='text/javascript'></script>

<style>
#fbox-background {
    display: none;
    background: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
}

#fbox-close {
    width: 100%;
    height: 100%;
}

#fbox-display {
    background: #eaeaea;
    border: 5px solid #828282;
    width: 340px;
    height: 230px;
    position: absolute;
    top: 32%;
    left: 37%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#fbox-button {
    float: right;
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 0px;
}

#fbox-button:before {
    content: "CLOSE";
    padding: 5px 8px;
    background: #828282;
    color: #eaeaea;
    font-weight: bold;
    font-size: 10px;
    font-family: Tahoma;
}

#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {
    color: #aaaaaa;
    font-size: 9px;
    text-decoration: none;
    text-align: center;
    padding: 5px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fbox-background').delay(5000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fbox-background'>
<div id='fbox-close'>
</div>
<div id='fbox-display'>
<div id='fbox-button'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/pages/Smart-Blogging-Guide/784490484957465&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe>
<div id="fbox-link">Powered by <a style="padding-left: 0px;" href="http://smartbloggingguide.blogspot.com" rel="nofollow">Smart Blogging Guide</a></div>
</div>
</div>

Step 4 : Save the template and you are done with it.

Required Customization in This Widget

1. Replace the facebook URL in blue color with the URL of your facebook page

    https://www.facebook.com/pages/Smart-Blogging-Guide/784490484957465

2. This widget will appear on your blog after 5 seconds after the loading of your page. You can increase or decrease this time by changing the number 5000 given in red color in the code. Here 5000 means 5 seconds. 

    .delay(5000)

3. According to this code, the popup will appear only first time the users opens your page. It will next appear after 7 days. If you want to change the number of days after which popup will again appear then change the number 7 according to you in the green code. If you want to appear popup everytime then replace the value 7 with 0.

   $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });

I hope this tutorial helped you to add facebook popup widget on your blogs. Please leave a comment if you done it successfully.