How to Add Facebook Popup Like Box to Blogger Blogs

Facebook has released many widgets for Blogger and Facebook popup like box is one of them. A good fan base is the best source of huge traffic and the social media interaction improves the search engine optimization of your blog. Using this one time Facebook popup like box your readers can reach your page easily and this will earn you more like's to your fan page.

Without readers your article is a big zero, regardless of the quality of the article, Facebook can increase your blog article readership.

Compare to WordPress Blogger have fewer widgets but Facebook like box is a part of social media widget collection and proper use of these widgets can contribute a large difference.

If your website gets any penalty from Google, there is a huge possibility to drop in search engine rankings and decrease in organic traffic. So for successful online marketing, a backup plan is necessary to maintain visitors and Facebook is the perfect choice for it.

Why you should choose Facebook as secondary source to get traffic:

The answer is simple, the most popular social network has more than 1.94 billion active users. This huge number of active users are the best source to get exposure.

Like social media, we know email marketing is one of the popular ways to reach customers, every blogger should start collecting email from day one. The major limitation of email marketing is that your mail may not reach its audience because of spam filter and even there is a minute chance to shut down your website if several customers report your mail as spam. Due to these reasons, Facebook can dominate email marketing.

A well maintained Facebook page has following benefits:

1. Building the Brand, if you continuously provide valuable and informative articles, people's will follow you without considering how popular your website is. By consistency and responding to visitors queries you can earn trust, this is the basic step to building a brand.

2. More traffic, Facebook page will definitely increase your blog traffic if you use it properly. Sharing increase exposure, more exposure means more traffic. By using attractive images and description number of clicks can improve.

3. Boost SEO, we already know the importance of social signals when it comes to SEO. Facebook enhances the social media interaction to boost SEO, which will bring more visitors via search engines.

How to Add Facebook Popup Like Box to Blogger Blogs

1. From Web browser log into your blogger account and select the blog you want to add the widget.
2. Now from the dashboard navigate to 'Layout' and click on ' Add a Gadget' in the sidebar.
3. When the popup window came, select 'HTML/JavaScript' and paste the below code.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#fanbox {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#fanclose {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTGpEZZ1DPgM8nT391kLzlPiK9hIkMa8hXn5Y-LDFllIpu83ttEoMtnJGQxcwLPmJ1FCspTG-U7Tg98A6sXaihyphenhyphenUiCFuYcjJ8po27diSdrjbtkp8GWooufwrbJ1UuZvLjQnRrjleFKQzZr/s1600/fanclose.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
</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_user_login') != 'yes'){
$('#fanback').delay(10000).fadeIn('medium');
$('#fanclose, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');

});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fanback'><div id='fan-exit'></div><div id='fanbox'><div id='fanclose'></div><div class='remove-borda'></div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=http://www.facebook.com/326511797720823&width=402&height=255&colorscheme=light&show_faces=true&border_color=%23E2E2E2&stream=false&header=false'
style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe>
</div></div>

4. After adding the code correctly and click on 'Save' button to complete it.

Customizing Facebook like box:

You can make some changes to this code according to your wish.

• To insert your Facebook page URL, replace http://www.facebook.com/326511797720823 with the URL of the page that you want to show.
• Currently, the widget will show 10 seconds after loading the page. You can increase or decrease the delay by changing '10000' in .delay(10000)
• Do you want to show the like box every time new page loads? Remove $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 }); from the above code.

Final word

Keeping the readers using a subscription box is always a nightmare for many bloggers. I am sure that if your blog has a decent number of readers you can keep them easily because when a new reader opens a page Facebook like box will popup, this will increase the chance of getting more like's. As a result, Whenever you share a post on Facebook, your blog will get more traffic. This widget will work well with some niches like Sports, Technology etc. Writing articles with attractive headings will boost your traffic.

Hope the article helped you if you have any doubts regarding this feel free to share with us via comments. Happy blogging!