How To Add Popup FB Fan Page Like Box In Blogger Blog

Adding a Facebook fan page like box to your blogger blog will attract more visitors and can gain more likes. What about a popup Facebook fanpage box?
Let’s learn it!
Here, you can get simple method to do this. You don’t need any special knowledge in coding for this.
All you need is one blogger blog!
So, let’s get started.

Read: Download OptinMonster plugin with serial keys free.

Login to your blogger dashboard and go to layout section.
Now, select add a gadget menu from that page.
Here, i’m selecting from right sidebar.


A popup window will open. Select html/ JavaScript from that menu.


At new window, there will be 2 places for adding heading and name.
Here, heading is not must. At the JavaScript box, put the below code and hit on save.

<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/tricksmaxcorp” 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=”https://tricksflare.com” rel=”nofollow”>TricksFlare</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.
Hit on save and save the arrangement.


You are done!
Visit your blog for confirmation.

Don’t forget to change the Facebook usernames with your own.
They are marked at red here.
If you have some doubts, feel free to contact us.
Also you can reach us at [email protected].

Trending Now On TricksFlare

Sreehari Sree

About the Author: Sreehari Sree

I am Sreehari Sree, a blogger and student from Kerala, India.
CEO and Founder of TricksFlare and TricksMax Corporation.
Just started my blog as a passion and for powering newbie bloggers to get success from their blog. All you need is here.
Just stick with us and be awesome!

Leave a Reply

Your email address will not be published. Required fields are marked *