Facebook Popup Like Box With Timer For Blogger

This Blogger widget is a Facebook Popup Like Box with a timer.

A Facebook Like box allows visitors to your site to follow your Blog/Website on Facebook.

This means that they do not have to search through Facebook Pages in the hopes of finding your blog, but they can follow and get your site's content on Facebook, directly from your blog.

Also,

You no longer have to constantly invite your Facebook Friends individually to like your Facebook Page using a Facebook Invite Button.

Instead, you can take advantage of the visitors trooping into your site to turn them into return visitors and loyal readers.

Other benefits of a having a Facebook Like Box on your Blogger blog include:

  • It brings more traffic to your blog because you now have more subscribers on your Facebook Page.
  • More traffic from a large user fan base means more income generated from your blog.
  • Other than blog exposure and popularity on social media, you stand to gain a Social Media traffic source other than search engines like Google, Yahoo, and Bing and this is most helpful if your blog is still new. 


Now,

Why A Facebook Popup Like Box With Timer? You may ask.

Here are the features of this widget that makes it unique from the regular Facebook Like Box.

Features of the Blogger Facebook Popup Like Box  With Timer


Unlike the Facebook Like or Follow box which can be generated from the Facebook developer's website, this particular widget comes with unique features.

These include:


  • A Popup Like Box that is displayed on the user's screen on visiting your site.
  • As a Popup blogger widget, it is not fixed to one location on your blog as is the case of the regular like box. 


You don't have to decide the best possible places to position it on your blog such as header, sidebar, footer, or within your blog's content.


  • A countdown timer that is manually set to enable the Popup to disappear automatically after some seconds of activity or inactivity by the user.


This means that you can determine how long in terms of seconds,  a user on your site has to wait before viewing your content.

Also,


  • This widget does not display on all pages on your blog because it pops up only once on the user's screen upon visiting your site.


You don't have to worry about having a blog with a bad user experience due to popups since the number of times and how long each user sees the widget is very limited.

Does this sound good to you?

If Yes,

Then follow the guidelines below to add a Facebook Like Box Timer to your blog.



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

To add a Popup Facebook Like Box to your Blogger Blog, follow the steps outlined below.

 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(http://4.bp.blogspot.com/-rNUTIpDQ21s/T0NqE_vv6GI/AAAAAAAACps/GSoWE2n9Oy8/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.techlass.com/" target="_blank">Techlass</a> / <a href="http://techlass.com/2014/08/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 before viewing the content which was the major reason why they visited.

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

Conclusion:


Following the steps outlined below on how to add Facebook Popup Like Box to Blogger, you should be able to add this widget on your blog and see a significant increase in the number of Likes of your Facebook Fan Page.


Also Read:  Numbered Page Navigation Widget For Blogger Blogs
                    Stylish Popular Post Widget For Blogger
                    Numbered Page Navigation Widget For Blogger Blogs
                   Platform Twitter Follow Button Widget For Blogger

Do you like this post? Please link back to this article by copying one of the codes below.

URL Of Post:


HTML Link Code:

BB (forum) link code:

Comments

  1. I have been wanting to do this for my site.

    ReplyDelete
    Replies
    1. Facebook like box gadget works fine on blogger. hope you get more fans with it

      Delete
  2. This will force the user to decide whether he wants to like or ignore the FB fan page. Instead of keeping a box some where in the side bar, it is better actually.

    Thanks for sharing
    Prasanna LP

    ReplyDelete

Post a Comment

Please share your views on this topic with Grace Joseph by leaving a comment.