Everyone knows that the strongest social network is Facebook, so you must collect a fan base from this site by creating a page for your site on the Facebook

Loading ...

If you really look closely, most overnight successes took a long time.

– Steve Jobs

Blog Categories : Home - Web Widgets - Tips and Tricks - Reviews
Login Signup
Reviews Giveaways
Products Giveaways Android Apps Giveaways Our Software Giveaways Contests Extended Trials & Similar promo
Hot Deals Courses Search
How to Create a Facebook Like Box Popup

How to Create a Facebook Like Box Popup

Hello, everyone knows that the strongest social network is Facebook, so you must collect a fan base from this site by creating a page for your site on the Facebook, and collect the largest possible number of followers.
So one of the most important ways to increase your followers is to ask them to like your page through a very beautiful popup window that appears once,let's start with the preview of our widget:


So if you like it let's me show you how to add it in your blog or websites:

Step 1: Add this code before the </head> Tag

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>

Step 2: Add this code before the </body> Tag

#popupFbLikeBox {display:none;position:fixed;background:rgba(0,0,0,0.7);height:100%;width:100%;left:0;top:0;z-index:99999;}
#popupArea {position:absolute;background:white;height:270px;width:auto;left:63%;top:58%;border-radius: 5px;margin:-220px 0 0 -375px;-moz-border-radius: 5px;-webkit-border-radius: 5px;}
#popupClose{text-align:center;padding:10px;cursor:pointer;background: linear-gradient(#eee, #fff);border-top-left-radius: 5px;border-top-right-radius: 5px;color:#000;
width: auto;
float: right;
position: absolute;
right: 5px;
.fbLikeboxArea {margin:0 auto;width:366px;height:1px;margin-top:16px;margin-left:20px;position:relative;}
@media only screen and (max-width: 500px) {
#popupArea{left:63%;top:58%;margin:-220px 0 0 -250px;}
.fb-like-box,.fb-like-box span,.fb-like-box span iframe[style]{width: 100% !important;}}
jQuery.cookie = function (key, value, options) {
// 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' : ''
//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;};
if($.cookie('logedin_user') != 'yes'){
$.cookie('logedin_user', 'yes', { path: '/', expires: 3 });
<div id='popupFbLikeBox'>
<div id='popupArea'>
<div id='popupClose'>X
<div class='fbLikeboxArea'>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe>

Step 3 : Change the green with your seconds before the box show (ex: 1 Second = 1000) and the blue with number of days before the cookie expire and the red with your Facebook Page

That's All, if you have a question ask in comment box.

Share this :

Did you find this post useful?
There are no comment yet. Be the first.

We'll never share your email with anyone else.