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='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#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;
}
</style>
<script type='text/javascript'>
//<![CDATA[
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 : '',
options.secure ? '; secure' : ''
].join(''));
}
// 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>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#popup-background').delay(1000).fadeIn('medium');
$('#fb-butam, #popup-shut').click(function(){
$('#popup-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='popup-background'>
<div id='popup-shut'>
</div>
<div id='popup-container'>
<div id='fb-butam'>
</div>
<iframe src="http://www.facebook.com/v2.3/plugins/page.php?app_id=&amp;channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2FNM7BtzAR8RM.js%3Fversion%3D41%23cb%3Df37a7397d8%26domain%3Dbloggerspice.com%26origin%3Dhttp%253A%252F%252Fbloggerspice.com%252Ff1f37dc2f8%26relation%3Dparent.parent&amp;container_width=300&amp;hide_cover=false&amp;href=https%3A%2F%2Fwww.facebook.com%2FBloggerSpice&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="http://www.bloggerspice.com" rel="dofollow">Blogger Spice</a></div>
</div>
</div>

Customization

  • You can skip below Jquery file if your template already included another Latest Jquery file.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
  • Replace www.facebook.com%2FBloggerSpice 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   www.facebook.com/BloggerSpice. after Encode it will become like www.facebook.com%2FBloggerSpice

  • 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.

Blog with Actionable Guidance · Based In Hungary

Copyright © 2012 - BloggerSpice ‧ All rights reserved.

Go Up