Facebook Pop-up Like Box With Lightbox For Blogger

Facebook like box  is a widely used gadget provided Facebook developers. Many blogs and site's get half of their traffic from social net...

Facebook like box is a widely used gadget provided Facebook developers. Many blogs and site's get half of their traffic from social networks like Facebook, twitter, Linkedin etc but Facebook is the most popular social network and has more then 1 billion users. Bloggers and visitors get their half of traffic from their social pages where their fans follow them that's why all bloggers and site owners tries to increase their followers so that the could get more traffic because traffic is the need of every blog and website.
Many bloggers and webmasters simply add a Facebook like box which lies in the sidebar of blog but it doesn't help to get more likes. So bloggers are now using pop-up like box to get more likes and increase followers. Pop-up like box helps you to get 90% of likes because when a visitor visits your blog this pop-up box appears and the visitor clicks like and starts following your blog. This gadget is more popular than the simple Facebook like box. This gadget looks smart and when it open the background of blog fades out, you can see a snapshot below:

Updated!(New Facebook Plugin Ready)

Don't Miss:

• How To Add New Facebook Page Plugin In blogger
• How To Fully Optimize Blogger Blog Titles For Seo
• Check out other +50 blogger widgets.
• Boost your blog traffic by making your blog seo friendly.

See a Live Demo

How to add Facebook pop-up like box in blogger:

You can add this gadget to you blog in a while, its very easy to add this gadget. You have to add a code in your blog as a gadget and all is done. In the end of this tutorial I will also show you how can you make some customization in this gadget. To add this gadget in your blog follow below steps:

Step 1: Go to Blogger Dashboard and click on Layout.

Step 2: Add a gadget and scroll down to Html/javascript.

Step 3: Copy the below code and paste it in the Html/javascript window:

<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/pages/101Helper/623626157780837&width=340&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; background: #fff; width: 340px; height: 200px;'></iframe>
<div id="fbox-link">Powered by <a style="padding-left: 0px;" href="https://101helper.blogspot.com/2014/11/facebook-pop-up-like-box-with-lightbox.html">101Helper</a></div>
</div>
</div>

Step 4: Replace https://www.facebook.com/pages/101Helper/623626157780837 with your fb page link.

Step 5: Click on save and you are done successfully.

Customization:

Here I am going to tell you what can you customize in this gadget but before that I have to tell you that this gadget saves up cookies in the visitors computer which informs it about when it will appear again on the same computer. The default time is 7 days means when a visitor visits your blog this pop-up box will appear and when it is closed then it won't appear again before 5 days. This feature is added in this gadget because a blog with more pop-ups isn't liked by visitors. You can customize this with your own choice, to increase or decrease number of days replace 7 in below part of code with the number of days you want this pop-up box to appear in:

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

The number of days set will decide when the pop-up box have to appear again on the same computer until the cookies are deleted. But if someone clears his browser's history along with cookies the pop-up box will appear on the same computer and the count down will start again, now after 7 days the pop-up box will appear again on the computer.

That's it you can't customize this gadget more, if you have a knowledge about css or javascript. 

Hope you like this gadget. If you have any problem regarding this post feel free to ask me in comments or contact me directly. Follow and subscribe by E-mail to get latest news about blogger gadgets in your inbox or find us on Facebook, Twitter and Google+. If you like this post take a few seconds to share it with others.

Tags: Facebook like box for blogger, Facebook like box pop-up, Facebook pop-up like box for blogger, Facebook pop-up like box with lightbox for blogger, How to add facebook like box in blogger, how to get more likes on Facebook, Facebook pop-up like box with lightbox for website, How to get more followers, Smart gadgets for blogger, 101Helper gadgets for blogger.