Popup Facebook Like Box for Blogger

UPDATE With the release of Graph API v2.3, the Like Box plugin is deprecated and stopped working on June 23rd 2015. This widget still works but will not look as good with the new Facebook Likebox plugin.

Introduction

As we all know, Facebook is the leading social media on the internet today with millions of user loging in each day. We can take advantage of this great opportunity to acquire a variety of readers around the globe. Adding a Popup Facebook Like Box is one of the great ways to generate likes and earn traffics from a huge variety of audience. When someone liked your content and shared it with their friends on Facebook, it can generate you a lot of traffic and help your blog grow. Follow the easy steps below to add this great widget.

External Scripts

FontAwesome (?)
Jquery Library v1.2.3 or higher (?)

Live Demo

Demo

HTML

Go to Blogger » Template » Backup your Template » and Edit HTML
Find (ctrl+f) </body>

<div id='mba-likebox-bg'>
<div id='mba-likebox-bg-out'>
</div>
<div id='mba-likebox'>
<div id='mba-likebox-out'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fmybloggeraide&amp;colorscheme=light&amp;show_faces=true&amp;show_border=false&amp;stream=false&amp;header=false&amp;' style='width:390px; height: 230px;'/>
</div>
</div>

CSS

Find (ctrl+f) </b:skin>
Copy the following code and paste it just above </b:skin>

#mba-likebox-bg {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#mba-likebox-bg-out {
width:100%;
height:100%;
}
#mba-likebox {
background:#fff;
padding: 20px 10px 10px 10px;
top: 20%;
left: 33%;
position: absolute;
-webkit-box-shadow: inset 0 10px 0 0 #3b579d;
-moz-box-shadow: inset 0 10px 0 0 #3b579d;
box-shadow: inset 0 10px 0 0 #3b579d;
}
#mba-likebox-out {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
color: #e1e1e1;
z-index: 999;
}
#mba-likebox-out:before {
font-family: "FontAwesome";
font-weight: normal;
font-style: normal;
text-decoration: none;
content: "\f00d";
text-align:center;
display: block!Important;
width: 40px;
height: 40px;
line-height: 40px;
background:#3b579d;
  }
#mba-likebox-out:hover:before{
color:#fff;
  }

Jscript

Find (ctrl+f) </body>
Copy the following code and paste it before </body>

<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(&#39;popup_user_login&#39;) != &#39;yes&#39;){
$(&#39;#mba-likebox-bg&#39;).delay(100).fadeIn(&#39;medium&#39;);
$(&#39;#mba-likebox-out, #mba-likebox-bg-out&#39;).click(function(){
$(&#39;#mba-likebox-bg&#39;).stop().fadeOut(&#39;medium&#39;);
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>

Replace mybloggeraide with the URL of your Facebook page
If you would like the Facebook Like box to popup every time the page loads, then remove $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
Save your Template

Final Words

That's it! Enjoy a beautiful Popup Facebook Like box!

Rate This Article

Thanks for reading: Popup Facebook Like Box for Blogger, Stay tune to get latest Blogging Tips.

TheBloggerJet