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:

Preview

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

<style>
#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;
}
#popupClose:hover{color:red;}
.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;}}
</style>
<script>
//<![CDATA[
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' : ''
].join(''));}
//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>
jQuery(document).ready(function($){
if($.cookie('logedin_user') != 'yes'){
$('#popupFbLikeBox').delay(2000).fadeIn('medium');
$('#popupClose').click(function(){
$('#popupFbLikeBox').stop().fadeOut('medium');
});
}
$.cookie('logedin_user', 'yes', { path: '/', expires: 3 });
});
</script>
<div id='popupFbLikeBox'>
<div id='popupArea'>
<div id='popupClose'>X
</div>
<div class='fbLikeboxArea'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/GiveawaysNetworksDotCom&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe>
</div>
</div>

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.



Subscribe to our Newsletter

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

Subscribe to the mailing list of our blog and get the latest lessons and topics that are sent directly to your e-mail