TUTORIAL IT

Facebook Popup Like Box With Timer

This blogger gadget is a Facebook popup like box with timer which you can set manually depending on the number of seconds you want your visitors to wait before viewing your content. Sharing your post to social networking sites is one of the ways to increase your blog's traffic, not only sharing it, but to a large audience. With this Facebook popup like box with timer,  you can increase the number of fans on your Facebook page, because the chances of someone liking the page is higher, rather than placing it in the wrong location in your blog. The timer in this blogger gadget decides how long the Facebook like box will be displayed on the first visit by your audience before it goes off.

Also Read: Facebook Invite Friends Button With Timer To Blogger
                    Floating Social Share Button For Blogger

How to Add Facebook Like Box With Timer On Blogger

 Step One

• The code below is for a jQuery plugin which we need for the facebook popup like box widget. If you have the jQuery code already in your blogger template, then ignore this step and continue to step two. 
• Goto your blogger dashboard.
• Navigate to your 'template'
• Click on 'edit html'.
• Using Ctrl+f  keys search for this tag </head> 
• Copy the code below and paste it 'above' </head> tag.

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


Also Read:  Social Follow and Subscription Follow Widget For Blogger
                     Sliding Recent Posts Gadget For Blogger

Step 2

After adding the jQuery code for those who didn't have it in their blogger template and have now included it.

• From your blogger dashboard
• Goto ' layout'.
• Click on 'add a gadget', depending on where you'll like the facebook popup like box to be on your blogger blog.
• Select 'html/javascript'.
• Copy the code below into the html/javascript editor.

<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/AVvXsEhvREEwKEMjyApgecG4dRhjexaAAoiR0D8nAwi9TsdVzlRwmNDuQedSRcDwy1KuGNjcm_tUbGsxV1knbhtEGRAcoLzSNGv8odnlqXEqPvNOC3QzSGZdnpT67t9KHJttunC1xbsGFkvGTcAC/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://www.facebook.com/PAGEUSERNAME&amp;width=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;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.informationtutorial15.blogspot.com/" target="_blank">informationtutorial15</a> / <a href="http://informationtutorial15.blogspot.com/2015/11/facebook-like-box-gadget-with-timer-for.html" target="_blank">+Get This!</a>
</div>
</div>
<div id="mdfooter">Please wait..<span>10</span> Seconds<a href="http://facebook.com/PAGEUSERNAME" id="mdclose" onclick="return false;">Cancel</a>
</div>
</div>
<!-- End popup -->



Also Read:  Square Popular Posts Blogger Gadget with Rotating Effect
                    Scrolling Popular Post Gadget For Blogger

NOTE:  Before saving, edit the code by replacing where you see PAGEUSERNAME with your facebook page username. In this code, the timer has been set to 10 seconds, you can change it to either 15 OR 20 seconds(optional). I'll suggest you keep it short, so your readers don't wait too long.

• Save the gadget and view your blog to see the facebook pop-up like box.