UrduBloggingHub | Informatvie Blog About SEO & Blogging: Add Popup Facebook Like Box To Blogger Blog

.

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.

LIVE DEMO

Instructions To Follow:

Step No.1

1. Go to Blogger Dashboard→Your Blog
2. Template→Edit HTML Tab
3. Now find in template the tag  <b:skin> by pressing (CTRL+F)
4. Copy the following code and paste it just above <b:skin>

JavaScript Code:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css' rel='stylesheet'/>

Step No.2

1. Find </b:skin> by pressing (CTRL+F) inside blogger template
2. Copy the following code and paste it just above </b:skin>

CSS Code:

#ubh-likebox-bg {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#ubh-likebox-bg-out {
width:100%;
height:100%;
}
#ubh-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;
}
#ubh-likebox-out {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
color: #e1e1e1;
z-index: 999;
}
#ubh-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;
  }
#ubh-likebox-out:hover:before{
color:#fff;
  }

Step No.3

1. Now find again for tag </body> in blogger template
2. Copy the following code and paste it before </body>

Code:

<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>
<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%2FUrduBloggingHub&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>

Step No.3

Save Your Blogger Template and Now See Your Blog With Awesomness!

Customization:

1. Replace UrduBloggingHub with the URL of your Facebook page
2. 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 });

Need Help?

We hope this tutorial helps you further decorate your blogs like never before and create beautiful widgets that may engage your readers even more. Let us know if you need any help via comment section below.There you have it! Until next time, happy blogging! :)