How to Put Popup Facebook Like Box

How to Put FansPage Facebook Like Box Pop-up - Facebook is the most popular social media. Through facebook we can get a friend, confide, business, and become a benchmark product, for example a specific product that made its fanspage. The more the number like the fanspage, the higher its value in the eyes of the public because of the more well-known.

If before I give a tutorial on how to install the widget fanspage facebook just stick on the sidebar of your blog / website just to add like from facebookers, so this time I will share a tutorial on how to create FansPage up the float on every page on your blog / website, or so-called pop-up fanspage facebook like box,

Replacing the pop-up fanspage aims to increase the number of Facebook like on our Facebook fanspage. Will be a lot of people who give like her after visiting the blog / website. Then pop up fanspage facebook is very effective to optimize our facebook fanspage likers, at the same time will also attract visitors from accessing the vistor posting our blog articles via facebook.

The following results display facebook like box fanspage pop up and how to install them.

How to Install Popup Facebook Like Box

Go to blogger> Layout> Click to add the gadget> click HTML / JavaScript> copy and paste the code below in it.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fbox-background {
    display: none;
    background: rgba(0,0,0,0.8);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
}
#fbox-close {
    width: 100%;
    height: 100%;
}
#fbox-display {
    background: #eaeaea;
    border: 5px solid #828282;
    width: 340px;
    height: 230px;
    position: absolute;
    top: 32%;
    left: 37%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#fbox-button {
    float: right;
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: 0px;
}
#fbox-button:before {
    content: "CLOSE";
    padding: 5px 8px;
    background: #828282;
    color: #eaeaea;
    font-weight: bold;
    font-size: 10px;
    font-family: Tahoma;
}
#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {
    color: #aaaaaa;
    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() : '', // use expires attribute, max-age is not supported by IE
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'){
$('#fbox-background').delay(3000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fbox-background'>
<div id='fbox-close'>
</div>
<div id='fbox-display'>
<div id='fbox-button'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/Eventgamepsp&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe>
<div id="fbox-link">Powered by <a style="padding-left: 0px;" href="http://www.skipzen.org" rel="nofollow">Blogger</a></div>
</div>
</div>

If you have copied click 'Save'

configuration Settings

Change the following url to your facebook page url fanspage

https://www.facebook.com/Eventgamepsp

This widget is only performed when a first-time visitor to stop by our blog. If you want to bring up a pop-up box fanspage facebook like this every time the page is visited blog, then please remove the following code.

$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 }) 

This widget will appear 3 minutes after the page has finished loading. If you want to change the time jedanya, change the number 3000 in the following code.

.delay(3000)

So first of this tutorial, hopefully this article can be useful. If you have any questions and opinions, please convey through the comments.