jQuery Popup Facebook Likebox Widget For Blogger

Facebook popup is one the most favorite widgets specially for blogger users which can focus on enhancing more likes and engagement. It's a JavaScript based social media widget fully workable on blogger templates and regular html websites. The popup functions on the basis of browser's cookies expiry time if you set it for 7 days then jQuery will direct HTML to function after every 7 days for a user and for 30 days it will work after 30 days interval. The widget is fully customizable and over monetized in design and outlook. The jQuery plugin is developed by colorpowered.com and copyrights to Jack Moore. If you want to share this article on your blog then don't forget to give credit me also the main author.

See Live Demo

Install jQuery Facebook Popup Likebox on Blogger

1. Go to Blogger > Layout Section
2. Click on Add a Gadget
3. Now choose HTML/JavaScript from the list of gadgets
4. Now copy following code and paste inside it

<style>
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}

#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO2NQykXe7NvA3I3JJC5KfrsmvsDAhG4mro1cIschEB-35R3Bnnagzm96Kux0cm0WNOzoOs4MZu0w-YtOw9SQ9f_du_5_IOCPR2vNCo2AFk3NSeDrwMHHpTl18tWhdTZn_QSuPJ_eOBjc8/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGLC1wfbRWPcsmuu5sYNBxgqxEjVO4A82V4PIgo5r3baMr-bcj-NAK7qSslgo2ZpEra28xK7BZkkHpinbwb0HCSblI6G8sHiu7RZhz5Qz1kBcVGV3jDhmw1zk0-0BATqbDueTQs8CPoz6i/s1600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO2NQykXe7NvA3I3JJC5KfrsmvsDAhG4mro1cIschEB-35R3Bnnagzm96Kux0cm0WNOzoOs4MZu0w-YtOw9SQ9f_du_5_IOCPR2vNCo2AFk3NSeDrwMHHpTl18tWhdTZn_QSuPJ_eOBjc8/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO2NQykXe7NvA3I3JJC5KfrsmvsDAhG4mro1cIschEB-35R3Bnnagzm96Kux0cm0WNOzoOs4MZu0w-YtOw9SQ9f_du_5_IOCPR2vNCo2AFk3NSeDrwMHHpTl18tWhdTZn_QSuPJ_eOBjc8/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGLC1wfbRWPcsmuu5sYNBxgqxEjVO4A82V4PIgo5r3baMr-bcj-NAK7qSslgo2ZpEra28xK7BZkkHpinbwb0HCSblI6G8sHiu7RZhz5Qz1kBcVGV3jDhmw1zk0-0BATqbDueTQs8CPoz6i/s1600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO2NQykXe7NvA3I3JJC5KfrsmvsDAhG4mro1cIschEB-35R3Bnnagzm96Kux0cm0WNOzoOs4MZu0w-YtOw9SQ9f_du_5_IOCPR2vNCo2AFk3NSeDrwMHHpTl18tWhdTZn_QSuPJ_eOBjc8/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO2NQykXe7NvA3I3JJC5KfrsmvsDAhG4mro1cIschEB-35R3Bnnagzm96Kux0cm0WNOzoOs4MZu0w-YtOw9SQ9f_du_5_IOCPR2vNCo2AFk3NSeDrwMHHpTl18tWhdTZn_QSuPJ_eOBjc8/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO2NQykXe7NvA3I3JJC5KfrsmvsDAhG4mro1cIschEB-35R3Bnnagzm96Kux0cm0WNOzoOs4MZu0w-YtOw9SQ9f_du_5_IOCPR2vNCo2AFk3NSeDrwMHHpTl18tWhdTZn_QSuPJ_eOBjc8/s1600/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9sHUG5G5VbckEVn9w3d1wqHCoyAqMxnZYw9HsqxCBD5MkkucSu0xdVuv5jP0TFcZVLWbLQpW6oNUo1v262aUuVNJsVj-mwY9NOYhve0T98R_uoo3cuuEpW_0TF7_IoxNMUDm59zAGGxgw/s1600/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEo2OMyUifL8OZDxtSVHohWVForCB6XjZ3umRr9ZR3vagHOEIZT8f-oiKQiinPsW51bC0TPPChlYKKbClYfJZW_YmBuysbXa0IA_lPIgWGIfDJOZi1Og5fL9Hkhko-yTlV_A5Y9MhdwIc5/s1600/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#F1F1F1;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#F1F1F1;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO2NQykXe7NvA3I3JJC5KfrsmvsDAhG4mro1cIschEB-35R3Bnnagzm96Kux0cm0WNOzoOs4MZu0w-YtOw9SQ9f_du_5_IOCPR2vNCo2AFk3NSeDrwMHHpTl18tWhdTZn_QSuPJ_eOBjc8/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose.hover{background-position:-100px 0px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}

    /*-----------------------------------------------------------------------------------*/
    /*   Facebook Likebox popup For Blogger
    /*-----------------------------------------------------------------------------------*/
    #subscribe {
        font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
    }
    #subscribe a,
    #subscribe a:hover,
    #subscribe a:visited {
        text-decoration:none;
    }
    .box-title {
       color: #F66303;
       font-size: 18px !important;
       font-weight: bold;
       margin: 10px 0;
    border:1px solid #eee;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    box-shadow: 5px 5px 5px #CCCCCC;
    padding: 10px;
    line-height:25px; font-family: Arial !important;
    }
    .box-tagline {
       color: #999;
       margin: 0;
       text-align: center;
    }
    #subs-container {
        padding: 35px 0 30px 0;
        position: relative;
    }
    a:link, a:visited {
    border:none;
    }
    .demo {
    display:none;
    }

.email {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNG3DJNjAhFAz4nFsq-dCbsVs0zjPUTq96FBDNDrGSyfkSdhEdAf9Ag8RxiRSPXWJgSvxE2ZIZHVbz1fOjMMOzFZRWNJlFIja0Dq3MtJ4CeV6TtcA7lS6c7FutlQ7MnmpgXyxdth1SfELk/s1600/email.png") no-repeat scroll 0px 12px transparent;
    width: 295px;
    padding: 6px 0px 6px 55px;
    float: none;
    font-size: 16px;
    font-weight: bold;
    color: rgb(246, 99, 3);
    margin: 0px auto 0px 0px;
    font-family: Arial;
    border: 1px solid rgb(238, 238, 238);
    border-radius: 6px 6px 6px 6px;
    box-shadow: 5px 5px 5px rgb(204, 204, 204);
}
.emailsubmit {
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:170px;
color:#666;
}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script src="https://cloudfired.googlecode.com/svn/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script>

<div style='display:none'>
   <div id='subscribe' style='padding:10px; background:#fff;'>

<h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:10px;" >&#8711;</p></center></h3>

<center>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FWild-Blogger-Tricks%2F156374544545705%3Fref%3Dhl&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false' style='border:none; overflow:hidden; width:292px; height:240px;'/></iframe>
</center>

<div class='email-subscription'>Or Subscribe via Email<form action='http://feedburner.google.com/fb/a/mailverify' id='feedform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=microwbt&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes, left=400, top=100, width=480,height=420&apos;);return true' target='popupwindow'>

<input class='textarea' gtbfieldid='3' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}' onfocus='if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter email address here'/>
<input name='uri' type='hidden' value='microwbt'/><input name='loc' type='hidden' value='en_US'/>
<input class='email-subscriptionsubmit' type='submit' value='Submit'/>
</form>
</div>

<p style=" float:right; margin-right:35px; font-size: 10px;" >Powered By <a style=" font-size:11px; color:#3B78CD; text-decoration:none;" href="http://www.thewildblogger.com/" >Blogger Widgets</a></p>

</div>
</div>

Now make following changes:

• Change Orange colored text as the headline of widget box to promote FB likes, you may add any different text you wish

• Change your FB page user ID by Wild-Blogger-Tricks

• Change the email subscription message by Or Subscribe via Email

• Change your feedburner feed username by microwbt

Change Validity period of appearing of the widget per user:

Look carefully the widget works on Cookie refreshment per user it will appear every after 7 days because of the value set as 7 which is for seven days after the cookie will expire and user will see the popup again. If you want to elongate the period simply change the value from 7 to any max value you want. If you want to decrease it change value from 7 to any lower digit.

Note: For better user experience of your blog you should avoid using lower term because it will not only create irritation to readers but also take more time to load resources by browsers so you will lose frequent visits.

If your blog only has jQuery plugin ver 7 or upgrade then avoid adding the orange highlighted jQuery code

Finally save your template and visit your blog front page

Need More Help?

I think the tutorial is not much crucial to understand and implement the widget on blogger blogs as i have tried my best to make the tutorial represented in very simple language and have demonstrated the coding easily so that newbie bloggers can understand it and make the work done by themselves. If you need more support don't forget to ask me any single point you don't understand or have trouble in installation procedure.