Social Medias like Facebook, Twitter and Google+ plays a vital rolefor generating genuine and relevant traffic for your blogs or websites. 

We have already discussed on our previous articles about how to increase Facebook likes and major SEO strategies for increasing social media ranking for your websites or blogs.


Join Is On Facebook box with timer Showing a social media promotion boxes while visitors visiting your blogs/websites will be a great idea to make them noticed that you are active on social medias. Major disadvantage of such pop up boxes are they may interrupt visitors buy showing all reloads and this will looks like you are forcing them.  So, here we are providing you an auto closing (with timer) facebook pop up widget for your blog. 

How to Enable Facebook Pop Up box for blogs/websites

1. Got to Blogger Dashboard >> Template >> Edit HTML. 
You will see a box with core HTML codes of your blog. Beware of editing this codes. 

2.  Copy and paste the following script before closing </head> tag or after opening <head> tag. (Press Ctrl + F after clicking on the HTML box and type  </head> on pop up box for easily getting this tag).
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
We have successfully added Jquery code for the box.

3. Now we need to add some style sheets for the box for thelooks and feels. Again find the code below in the template
]]></b:skin>
And add the code shown below before closing b:skin tag.



/*css for fbpopup*/



#fbpopupdata { 

    background-color: none; 

    position:absolute; 

    z-index: 9999; 

    display: none; 

    padding: 0; 

    border: 10px solid #446c95; 

    -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: 420px; 

    height: 300; 

    overflow: auto; 

    left:50% !important; 

    margin-left:-220px; 

    margin-top:auto; 

    box-shadow: inset 0 1px rgba(0,0,0,0.1); 

}



#fbpopupdata span { 

    font-size: 12px !important; 

    font-weight: normal !important; 

}



#fbpopupdata h1 { 

    background: #446c95 url(http://4.bp.blogspot.com/-wbOyGFuANTQ/UVF1F4ouC4I/AAAAAAAABiA/RX4jNlICbjM/s1600/aktechz-fb-lock.png) 98% 30% no-repeat; 

    border: 0px solid #3b5998 !important; 

    color: #FFF !important; 

    font-size: 20px !important; 

    font-weight: 700 !important; 

    padding: 5px !important; 

    margin: 0 0 10px 0  !important; 

    font-family: arial !important; 

    overflow: hidden !important; 

}



.fbpopupdatadata { 

    font-size: 12px !important; 

    font-weight: normal !important; 

    height: 275px !important; 

    padding: 1px !important; 

    background: #fff !important; 

    border-bottom: 0px solid #ddd; 

    overflow: show !important; 

}



#fbpopupdatafooter { 

    text-align: right; 

    font-size:12px; 

    background: #F2F2F2 !important; 

    height: auto !important; 

    padding: 10px !important; 

    overflow: hidden !important; 

}



#fbpopupdatafooter p { 

    text-align: right; 

    font-size:12px; 

}



#fbpopupdataclose { 

    float: right; 

    background-color: #446c95 !important; 

    border: 0px solid #ccc !important; 

    color: #fff !important; 

    font-weight: normal !important; 

    padding: 5px 35px !important; 

    text-decoration: none !important; 

    display: inline-block !important; 

    font-family: arial !important; 

    outline: none !important; 

    font-size: 12px !important; 

    margin: 0px !important; 

    box-shadow: inset 0 1px rgba(0,0,0,0.1); 

    -webkit-transition: background 0.3s; 

    -moz-transition: background 0.3s; 

    transition: background 0.3s; 

}
4. Almost completed the final step is here.  
<!-- Facebook POPUP LikeBox With Timer Code Start --> 
<script type='text/javascript'> 
jQuery(document).ready(function() { 
function fbpopupdatafunc()  { 
var sec = 60 
var timer = setInterval(function() { 
$("#fbpopupdatafooter span").text(sec--); 
if (sec == 0) { 
$("#fbpopupdata").fadeOut("slow"); 
clearInterval(timer); 
} 
},1000); 
var fbpopupdatawindow = jQuery(window).height(); 
var fbpopupdatadiv = jQuery("#fbpopupdata").height(); 
var fbpopupdatatop = jQuery(window).scrollTop()+50; 
jQuery("#fbpopupdata").css({"top":fbpopupdatatop});} 
jQuery(window).fadeIn(fbpopupdatafunc).resize(fbpopupdatafunc) 
//alert(jQuery.cookie('sreqshown')); 
//var fbpopupdataww = jQuery(window).width(); 
//var fbpopupdatawww = jQuery("#fbpopupdata").width(); 
//var fbpopupdataleft = (fbpopupdataww-fbpopupdatawww)/2; 
var fbpopupdataleft = 500; 
//var fbpopupdatawindow = jQuery(window).height(); 
//var fbpopupdatadiv = jQuery("#fbpopupdata").height(); 
//var fbpopupdatatop = (jQuery(window).scrollTop()+fbpopupdatawindow-fbpopupdatadiv) / 2; 
jQuery("#fbpopupdata").animate({opacity: "1", left: "0" , left:  fbpopupdataleft}, 0).show(); 
jQuery("#fbpopupdataclose").click(function() { 
jQuery("#fbpopupdata").animate({opacity: "0", left: "-5000000"}, 1000).show();});});
</script> 
<div id="fbpopupdata"> 
<h1>Join Us On Facebook <a style="font-size:12px; color: white; float:right; margin-right: 15px; text-align: inherit; text-decoration: none;" href="http://www.techiefeeds.com/2015/03/javascript-facebook-popup-box-timer.html/" rel="nofollow" 
>Get Widget</a></h1> 
<div class="fbpopupdatadata"><center><iframe src="http://facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2F/Tamilhachers2.0&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:show; width:400px; height:250px;" allowtransparency="true"></iframe></center></div><div id="fbpopupdatafooter">Please Wait <span>60</span> Seconds<br/><a href="wwww.techiefeeds.com" target="_blank" id="fbpopupdataclose" onclick="return false;">Close X</a></div></div> 
<!-- Facebook POPUP LikeBox With Timer Code End –>

Change the yellow colored text (tamilhackers2.0) to your Facebook username.