Facebook Popup Like Box For Blogger - Light Box

Like This Article

Previously I teach you that how to create a Facebook page and make another admin . Every professional strategists say that Facebook is th...

Add 5 Star Post Rating System in Blogger

Add Recent Posts Image Gallery in Blogger

How to Add Twitter Feeds Widget in Blogger

Previously I teach you that how to create a Facebook page and make another admin. Every professional strategists say that Facebook is the best place to gain traffic and through Facebook pages, we get lots of page views in the face of followers. So the fact is that we increase page likes in order to gain huge traffic. For this you have to put Facebook like box on your blog and it's better for you when you add Facebook Pop up like box on your website. Visitors like some unique styles, so you can also make your page box in unique by pop up styles.

So lets begin the tutorial, first of all move on Facebook like box developers site where you can optimize your box as you like. Once time we used html coded box, but now Facebook released a new plugin from this our page box looks more attractive and cool. Here you can check the below image for consideration.

How to Add Facebook Popup Like Box in Blogger Blog

• Sign in on your blog>> Click on the template.
• Before inserting codes back up your template.
• Then click on layout>> ADD a gadget.
• Select HTML Script as shown in below image.

• Copy and paste the below codes into HTML script.

<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/protechnify&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://protechnify.blogspot.com" rel="nofollow">Pro Technify</a></div>
</div>
</div>

 Note: Replace protechnify with your page url.

• This light box work on your web after 5 to 10 sec and if you want to change the timing search the below code.
• This time has denoted from thousand so if you want to keep one second, you will have to write like this. 1 secs= 100.
• If you want to show your pop up box every time on every page, so remove following codes.
• And if you want to show this box only one time on the home page, so follow the below instructions.
• Move on template>> Click on edit HTML.
• Search <body> and paste the below line.

&lt;b:if cond='data:page.type == "index"'&gt;ADD THE FACEBOOK WIDGET CODE HERE &lt;/b:if&gt;

 In this line you have to add all codes which you added above.

Save the template and check your clean coded Facebook popup box.

I have added a video and if you don't understand this, watch below video.

Conclusion

From this I hope you can upgrade your Facebook fans easily and if you suffer from any error or your box not appear, so clear your browser cookies and then try it will be work. For more widgets and tricks follow us on our social networks.