How To Add Facebook Popup Like Box Widget

Click Here For Demo

How To Add Facebook Popup Like Box Widget

1. Log into your blogger account and select your blog > goto "Layout" & click the "Add a Gadget" link on the right side.                                                                                                      
2. Once the Popup window is open, select HTML/Javascript gadget from the list.                              
   
3. Copy the following code and Paste it inside the empty box.

(Selectable Text Below)

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.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/tipsandtricks9771&width=339&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://problemswithsolutions9.blogspot.com/2016/08/how-to-add-facebook-popup-like-box.html" rel="nofollow">ProblemswithSolutions</a></div>
</div>
</div>

(End Of Code)

    4. Press the "Save" button to add the widget to your blog. That's all...!!!

Customization:

• After adding the code replace the address of your facebook page with blue area "https://www.facebook.com/tipsandtricks9771"                                                   
• The Widget will appear 5 seconds after the page finishes loading. If you want to change this delay, change the number 5000 to a greater or lesser number in this part. ".delay(5000)"                                                                                     
• By default the like box only shows up the first time the user visits your blog. If you would like to Popup facebook like box every time the user visits your blog then remove this line of code. "$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });"

After saving your work, you can test our your new feature by visiting your blog homepage or any other old post of your blog, which should bring up a little popup widget asking if you'd like to join the site's facebook page.

If you don,t see facebook like box on the page, then you may need to delete your cookies or check out the customization section above in order to display the widget every time a user visits your site. Once this widget added to your site, all your hard work should start to translate into an increase in web traffic and number of Facebook fans...!!!

 If you like my posts then please share it with your other friends and follow me on Twitter, Google+ and like us on Facebook also... Thanks.