Facebook Popup Like Box For Blogger [With Timer]

We all know that Facebook is the largest social networking site and it is also best place to expand your online audience. If you are a blogger or website owner then you must have to have a Facebook page of your site. There are several post was published in this site regarding facebook fan page and Facebook like box. You will find these post in the Facebook section.

Having a Facebook page and implementation of Facebook like box on your site is not enough. You need to have good amount of likes on your page. Sometimes it grows naturally and sometimes you need to collect them. There are several way of implementing Facebook like box on a site but I think Popup like box is the best of all.


About This Facebook Popup Like Box

Popup Facebook likebox can boost the like because it attract and force the visitors to like your Facebook page. This like box is different from the other like box because This box comes with Timer, fast loading, well shaped. This box will automatically close after 10 seconds. Most important thing is that you can customize this box as you need.


Adding Facebook Like Box With Timer To A Blogger Blog:

To add this Facebook Like box in your blogger blog you need to install JQuery plugins. If you have already installed then no need to install it again, just skip this steps. But if not then follow the below steps to install JQuery plugins in blog.

1. First Sign In to your Blogger Dashboard.
2. Then click on Template.
3. Then click Edit HTML button and you will land on your blog HTML page.
4. Then here find </Head>.
5. Now Copy the below Script and Paste it just before the </Head> tag.
6. Then click on Save Template.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

After installing the JQuery plugins it is time to add the Facebook like box in your blog. Follow the below steps.

1. Now click on Layout option.
2. Then click on Add a Gadget.
3. Then from the gadget list Select HTML/Javascript.
4. Now Copy the below code and Paste it in the Content Box. 
5. And click Save button to complete the process.

<style type='text/css'> #makingdifferentpopup{ position: fixed; top:100px; z-index:9999; display:none; padding:0px; right:600px; border:10px solid rgba(82, 82, 82, 0.7); -webkit-background-clip: padding-box; /* for Safari */ background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */ -webkit-border-radius:8px 8px 8px 8px; -moz-border-radius:8px 8px 8px 8px; border-radius:8px 8px 8px 8px; width:400px; height:360px; overflow:hidden; } #makingdifferentpopup span{ font-size:20px !important; font-weight:bold !important; } #makingdifferentpopup h1{ background:#6d84b4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3AIzga9TUqIRpmbulRB8TiBo1673THnPjFpVttylf2-F6Uw4n8cn1_Q8oKLF031128MUUqmIVnRYZSnKtCddKA0z77fqHKXoYmyXQE-8uPfmYtwbQwwsiAhIjK7-Ztlkg04vvlTMtdAGc/s1600/%255Bwww.gj37765.blogspot.com%255Dh1.png) 98% no-repeat; border:1px solid #3b5998 !important; color:#FFFFFF !important; font-size:20px !important; font-weight:700 !important; padding:5px !important; margin:0 !important; font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important; overflow:hidden !important; } .htmlarea{ font-size:12px !important; font-weight:normal !important; height:265px !important; padding:1px !important; background:#fff !important; border-bottom:2px solid #ddd; overflow:hidden !important; } #mdfooter{ text-align:left; background:#F2F2F2 !important; height:56px !important; padding:10px 10px 10px 10px !important; overflow:hidden !important; } #mdclose{ float:right; background-color:#eee !important; border:1px solid #ccc !important; color:#111 !important; font-weight:bold !important; padding:5px 8px 5px 8px !important; text-decoration:none !important; display:inline-block !important; font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important; outline:none !important; position:relative !important; font-size:18px !important; margin:1px !important; } #mdclose:active{ top:1px; left:1px; } .grabthis{ bottom:80px; font:8px "lucida grande",tahoma,verdana,arial,sans-serif; position:absolute; right:6px; text-align:right; z-index: 99999; } .grabthis a{ color: #000; text-decoration:none; } .grabthis a:hover{ text-decoration:underline; } </style> <script type='text/javascript'> jQuery(document).ready(function() { function makingdifferent_ppopup() { var sec = 10 var timer = setInterval(function() { $("#mdfooter span").text(sec--); if (sec == 0) { $("#makingdifferentpopup").fadeOut("slow"); clearInterval(timer); } },1000); var mdwh = jQuery(window).height(); var mdpph = jQuery("#makingdifferentpopup").height(); var mdfromTop = jQuery(window).scrollTop()+50; jQuery("#makingdifferentpopup").css({"top":mdfromTop});} jQuery(window).fadeIn(makingdifferent_ppopup).resize(makingdifferent_ppopup) //alert(jQuery.cookie('sreqshown')); //var mdww = jQuery(window).width(); //var mdppw = jQuery("#makingdifferentpopup").width(); //var mdleftm = (mdww-mdppw)/2; var mdleftm = 500; //var mdwh = jQuery(window).height(); //var mdpph = jQuery("#makingdifferentpopup").height(); //var mdfromTop = (jQuery(window).scrollTop()+mdwh-mdpph) / 2; jQuery("#makingdifferentpopup").animate({opacity: "1", left: "0" , left: mdleftm}, 0).show(); jQuery("#mdclose").click(function() { jQuery("#makingdifferentpopup").animate({opacity: "0", left: "-5000000"}, 1000).show();});}); </script> <div id="makingdifferentpopup"> <h1> Join us on Facebook</h1> <div class="htmlarea"> <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com/FacebookPageUsername&width=400&colorscheme=light&show_faces=true&border_color=%23fff&stream=false&header=false&height=250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:250px;" allowtransparency="true"></iframe> <div class="grabthis"> By <a href="http://www.ittimesbd.com/" target="_blank">iTTimesbd</a> / <a href="http://www.ittimesbd.com/2014/05/facebook-popup-like-box-with-timer.html" target="_blank">+Get This!</a> </div> </div> <div id="mdfooter"> Please wait..<span>10</span> Seconds <a href="#" id="mdclose" onclick="return false;">Cancel</a> </div> </div>

Customization:

• Change Username: In the above code find FacebookPageUsername and replace this line with your facebook page username. 
• Timer: By default this like box will appear for 10 seconds. To customize the time find var sec = 10 and change 10 to any other digit as you want.

That's it. After completing this above process correctly now view your blog and you will see the Facebook Popup Like Box.

Stay with www.iTTimesbd.com for more IT related Post.