New Facebook PopUp Like Box Widget with Cover

New Facebook PopUp Like Box Widget with Cover

latest like box 2015

We knows that Facebook has updated their Graph API to version 2.3 and now we will get a new shape and looks in all plugins of facebook. Recently I have shared Facebook latest Like Box widget and Facebook comment box widget where I have used lated Graph API 2.3, but there are another important widget left which will help us to increase our Facebook fan. Yes, this is Facebook Popup widget.

Live Demo

This widget completely help the users to view the facebook cover page as well as number of fan already Liked your page and information about your friends those who like same Facebook fan page.We can use this widget in 2 ways. One time display (When a new user enter into your site then only one time this Like box will visible)  and display per page load (Facebook Like box will be visible each time after a page load).

I hope this new popup like box widget will spice up your Blog with new flavor. So let's proceed to the tutorial-

popup like box

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 4 Now Copy the below code and paste it in "HTML/JavaScript" Gadget.

<script src='' type='text/javascript'></script>
#popup-background {
    display: none;
    background: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
#popup-shut {
    width: 100%;
    height: 100%;
#popup-container {
    background: #415E9A;
    border: 5px solid #415E9A;
    width: 300px;
    height: 240px;
    position: absolute;
    top: 32%;
    left: 37%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
#fb-butam {
    float: right;
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 0px;
#fb-butam:before {
    content: "CLOSE";
    padding: 5px 8px;
    background: #415E9A;
    color: #eaeaea;
    font-weight: bold;
    font-size: 10px;
    font-family: Georgia;
#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {
    color: #FEFEFE;
    font-size: 9px;
    text-decoration: none;
    text-align: center;
    padding: 5px;
<script type='text/javascript'>
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', 
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '', ? '; secure' : ''
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
<script type='text/javascript'>
if($.cookie('popup_facebook_box') != 'yes'){
$('#fb-butam, #popup-shut').click(function(){
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
<div id='popup-background'>
<div id='popup-shut'>
<div id='popup-container'>
<div id='fb-butam'>
<iframe src=";;container_width=300&amp;hide_cover=false&amp;;locale=en_US&amp;sdk=joey&amp;show_facepile=true&amp;show_posts=false&amp;width=300" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" style="border: none; visibility: visible; width: 300px; height: 224px;" class=""></iframe>
<div id="fbox-link">Powered by <a style="padding-left: 0px;" href="" rel="dofollow">Blogger Spice</a></div>


  • You can skip below Jquery file if your template already included another Latest Jquery file.
<script src='' type='text/javascript'></script>
  • Replace by encoded link. You can encode your facebook fan page URL from our HTML Encoder. But encode without http:// code.
For example my facebook Fan page’s original URL is after Encode it will become like
  • To change the widget loading time alter .delay(1000) with more or less digit.
  • To display the widget every time after any page load just delete $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 }); line.
That's it. Now check your Blog and see the latest style facebook like box. I hope your Blog visitors will love this unique widget. Thank you.
New Facebook PopUp Like Box Widget with Cover
4 Stars stars - "New Facebook PopUp Like Box Widget with Cover " We knows that Facebook has updated their Graph API to version 2.3 and now we will get a new s...

Post a Comment

রাব্বী ভাই আপনাকে অংখ্য ধন্যবাদ। কাজের একটি টিউন্স যা নতুন দের কাজে আসবে।

Thanks.. Readers er comments e amake inspire kore. Joto comment Toto unique kico korte Valo lage.:-bd

ভাইয়া অনেক সুন্দর, ভাইয়া আমিতো আপনার বানানো ব্লগার টেম্পলেট ব্যবহার করতেছি এডিট করে । আপনি একবার আমার ব্লগে ঘুরে আসলে আমি অনেক খুশি হব ! আমার নিজের তেমন লেখা লেখির অভ্যাস নেই তার পরেও চেষ্টা করছি ভাল কিছু করার জন্য ।

ধন্যবাদ !!!

Best of luck Nayan :-d ... Blogging onek dhorjer bepar..onek hardword korte hoy. But really innovative idea thakte hobe.

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *