Facebook Popup like box
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

  1. Go to your blogger blog dashboard
  2. Select Layout and Click Add a Gadget
  3. Select HTML/JavaScript
  4. 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/internetsmash" 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.internetsmash.com" rel="nofollow">Internetsmash</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/internetsmash
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.

19 comments:

  1. please your close button is not working

    ReplyDelete
    Replies
    1. Codes are updated. Now it should be work. Thanks.

      Delete
  2. Hello,

    Very nicely written code. This is the best blog where you can find all blogger widgets easily :)

    Thanks for sharing such and awesome plugins for free :)

    It really requires hardwork to make such widgets as being a developer, I know and feel this thing :)


    Thanks,

    Piyush

    ReplyDelete
    Replies
    1. Your welcome bro and also thanks for your input. I promise I will create more helpful widgets, so don't forget to subscribe.:D

      Delete
  3. Thanks a lot. Is there any way to remove cover photo from showing up in this pop up?

    ReplyDelete
  4. Thanks, this is what I have been looking for my blog :3 Greetins from Mexico

    ReplyDelete
  5. Is there a way to make the html code compatible for mobile?

    ReplyDelete
  6. good info. love it. Tq so much for the info.

    ReplyDelete
  7. you all who help people for such widgets are same.
    everyone has same content.
    when i installed fb pop up box in my site from any of site like yours ,
    pop up come even after alreddy liked if any one open.
    it irritates people.

    i want pop up box that comes everytime till people do not like the fb box.
    if u can make then your are real otherwise it is just copy pasted.

    ReplyDelete
  8. hi admin if you please update the code not close the box by clicking outside, the close button is useless since you can click outside the box or anywhere on the page.

    thank you

    ReplyDelete
  9. It come on every page when it loads, i want this only when homepage loads, please help

    ReplyDelete
  10. Hello sir I liked you widgets but Its working on mozila.. And not working for Google Chrome browser.. Can you please fix this problem.

    ReplyDelete

NOTE - Every input is always appreciated. However, comments are always reviewed and it may take some time to appear. Always keep in mind URL without nofollow tag will consider a spam.