Add Facebook Popup Like Box On Blogger Blog

Like Google, Facebook is also one of the successful internet companies that never fail in helping people in terms in making money through online business. Every blogger agrees that social media, especially Facebook are the best way to drive traffic to a certain blog. With a billion number of Facebook users, all bloggers must definitely take advantage on this social media site to acquire new audience on their blog.

In targeting an audience, it’s pretty important for us to know where most of their time spent on surfing so that we can easily reach them. In the month of February 2015 Facebook had a 1.3 billion active users and 890 million login to Facebook per day. With the average time spent on Facebook about 21 minutes per user per day.

Having a great number of followers on Facebook will definitely help us in making a real traffic on our blog. There are many strategies has been shared by other bloggers to generate likes on our Facebook page, but on this post we are going to make a Facebook popup like box that can really help us achieve our goals.

Implementing this Facebook Popup like Box on Blogger Blog

Go to your blogger blog dashboard
Select Layout and Click Add a Gadget
Select HTML/JavaScript
Copy and Paste the following codes given below

Note: Do not put any name on the widget.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script src='http://aireshalili.github.io/internetsmash/facebook-popup-box.js' type='text/javascript'></script>

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=124246297655999&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<style>
#fb-box-background {display: none;background: rgba(0, 0, 0, 0.8);width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 99999;}
#fb-box-close {width: 100%;height: 100%;}
#fb-box {background: #eaeaea;border: 2px solid #3A3A3A;-webkit-border-radius: 5px;-moz-border-radius: 5px;padding: 4px 10px 4px 10px;border-radius: 5px;position:absolute;top: 40%;left: 40%;margin-top: -50px;margin-left: -50px;}

#fclose-button {position: absolute;top: -10px;right: -10px;background: #fff;font: bold 16px Arial, Sans-Serif;text-decoration: none;line-height: 22px;width: 22px;
text-align: center;color: #000000;border: 2px solid #2F2F2F;-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.4);-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.4);
box-shadow: 0px 1px 2px rgba(0,0,0,0.4);-webkit-border-radius: 22px;-moz-border-radius: 22px;border-radius: 25px;cursor: pointer;}
#fclose-button:before {content: "X";}
#Poweredby,#Poweredby a.visited,#Poweredby a,#Poweredby a:hover {color: #aaaaaa;font-size: 9px;text-decoration: none;text-align: center;padding: 5px;}
#follow-us{font-size: 1.7em;color: #010069;}
</style>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fb-box-background').delay(15000).fadeIn('medium');
$('#fclose-button, #fb-box-close').click(function(){
$('#fb-box-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 10 });
});
</script>
<div id='fb-box-background'>
<div id='fb-box-close'>
</div>
<div id='fb-box'>
<div id="follow-us">Follow us on Facebook</div>
<div id='fclose-button'>
</div>
<div class="fb-page" data-href="https://www.facebook.com/mujtabaeditingzone" rel="nofollow" data-width="400" data-height="400" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"></div>
<div id="Poweredby">Powered by: <a style="padding-left: 0px;" href="http://www.mjtabaeditingzone.tk" rel="nofollow">Mujtaba Editing Zone</a></div>
</div>
</div>

Customization

Time Delay: The Facebook Popup like box is set to appear on your blog 15 seconds after your blog is loaded. You may change it by changing the 15000.

Note: 1000 = 1 second.

Cookies Expiry Days: By default, this widget will appear if your audience visit your blog for the first time after setting this Facebook Popup like Box and it will load again after 10 days. If you want to load this widget whenever your visitor visit a page on your blog you may delete the line codes as shown below. If you want only to change the number of days before the cookies expire you may change only the 10 to your desired number of days.

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

Facebook Page: The Facebook page set to the codes is the Facebook page of this site. It must be changed to your own page.

https://www.facebook.com/mujtabaeditingzone

You may now test your Facebook Popup like Box by reloading your blog. If the widget failed to appear, just clear your browser’s cookies and reload again your blog. To clear the cookies just press Ctrl+Shift+Del on your keyboard, select cookies and click Clear browsing data button.