Facebook Popup Like Box With Cookie on Blogger / WordPress Open Just Once

Most Like Boxes used by Blogger platform blogs use PopUp with timers and always appear. This is quite disturbing, because visitors should only be offered once in a while, not treated to each page open. Plus, timer features are also often annoying. The time to see a short article should wait 30 seconds for the popup to disappear, while there is no close button at all. So very very annoying right.

Why should it popup? Because popups are proven to heighten conversion rates, whether it's like, follow, subscriptions, even sales. As long as the popup is not disturbing, not every time it appears, does not make visitors uncomfortable, very valid use this model.

The Likebox that I use is simple, but based on how many times per user per day, and has a close button, no timers. I hate timers most, so I do not make that. Many also actually design the same popup layout, because the design of this pop up layout becomes a trend. But I still use Facebook iframe as its Like Box base because it is most easily positioned, compared to HTML5 or XFBML. There is no link attribution on the widget, so it will not make the popup look professional. The important thing is not copas post people just plain without attribution / source.

Here's the snippet script:

<!-- Facebook Popup Widget Plus Cookie by webmasterseo3.blogspot.com  -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#bukafpop {display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;}
#bukafmetu {width:100%;height:100%;}
#burasbox {background:white;width:420px;height:270px;position:absolute;top:58%;left:63%;margin:-220px 0 0 -375px;-webkit-box-shadow: inset 0 0 50px 0 #939393;-moz-box-shadow: inset 0 0 50px 0 #939393;box-shadow: inset 0 0 50px 0 #939393;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;margin: -220px 0 0 -375px;}
#buras {float:right;cursor:pointer;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJowUAdpkVLL9bmQbbO0-G6dS5603_04gec1UyomuQhyphenhyphen6oNDYL6NLnES_kboMPMu20LCNHuBAAzFdln518efmeIW9WN0D4qjrjc14X_LfkkxAkFhiFz5JnFKcabsK7NN0e4r2ds8ZTIh1o/s1600/buras-tutup.png) repeat;height:15px;padding:20px;position:relative;padding-right:40px;margin-top:-20px;margin-right:-22px;}
.burasbord {height:1px;width:366px;margin:0 auto;background:#F3F3F3;margin-top:16px;position:relative;margin-left:20px;}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key dan nilai (value), pengaturan 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() : '', // atribut expires, IE ga support max-age
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// setting cookie by webmasterseo3.blogspot.com...
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_user_login') != 'yes'){
$('#bukafpop').delay(20000).fadeIn('medium');
$('#buras, #bukafmetu').click(function(){
$('#bukafpop').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 30 });
});
</script>
<div id='bukafpop'>
<div id='bukafmetu'>
</div>
<div id='burasbox'>
<div id='buras'>
</div>
<div class='burasbord'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/Webmaster-Development-1982670348689141&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><center>
</center>
</div>
</div>
<!-- Facebook Popup Widget Plus Cookie by webmasterseo3.blogspot.com  -->

To be more practical, I paste all in the widget so no need to add CSS or javascriptnya in edit Blogger HTML or edit the footer template in WordPress (no plugin).

Blogger:
1. Open the layout page in the dashboard. Dashboard> Layout.
2. Add the gadget, take the bottom one, if there is a better footer gadget. If no use the bottom sidebar gadget. Tomorrow-tomorrow if you want to add more gadgets, make sure the gadget Likebox PopUp is tetep below ya.
3. Then select the type of HTML / Javascript gadget.
Copy the entire code above, paste it in an editor like NotePad or NotePad ++. (to edit)
5. Enter the edited script and save / save.

WordPress:
1. Go to dashboard> appearance / view> widget.
2. Select text widget (text)
3. Paste into the bottom sidebar or footer widget (if any), it's important make sure the bottom position of all widgets.
Copy the entire code above, paste it in an editor like NotePad or NotePad ++. (to edit)
5. Enter the edited script and save / save.

Customize
After the script is copied and inserted into a text editor (notepad, etc.), and before it is installed on the blog, customize the following sections:

• Red Color is HTML for calling jquery (which is hosted by Google), in some cases, if you already have jquery before, it could crash, so some scripts just do not work. So, if it already exists, delete this jquery section. If after trying popup baseball path, try to install / restored to the original. To see if jquery exists or not (most templates already) go to edit HTML in dashboard> template, and search with jquery keyword. Or just remember to remember to install gadgets / widgets that have jquery or not. If you do not want to ribet in the beginning, just put all the first for nyoba.
• .delay (20000) is the time value of the delays of the likebox to appear when the page is accessed by the visitor for the first time. Value 20000 in milliseconds, means 20 seconds. I personally prefer slower delay to mastiin page and likebox already loaded with bener. Let the visitors ga cepet nutup nutup, and let more surprised little while reading the article. Heuheu. Change the value to be larger or smaller to further slow or accelerate the appearance of popup likebox.
• The script line in green is a statement to declare the time limit for cookies implanted in the visitor's browser, the value expressed in days. Notice in expires: 30, that means cookies are valid within 30 days (before then appear again on same visitor once every 30 days), change the value to be smaller or bigger. For example 1, if you want popups to appear once a day for visitors with the same browser. But if you want popup likebox appears every time the user opens the blog page (whatever) delete the green line.
• https://www.facebook.com/Webmaster-Development-1982670348689141, change this with your Facebook Page URL.

Suggestion, if you want to do the test, you should first remove the green line first, so the likebox appears. Let's remember the original place, blank line it, do not deleted, spaced (top down distance). If it is fixed appears well, return the green line in all places. Or better yet if you have blogs and templates for the test, if it is clear sorted out, just installed diblog main.

That's it for now, if there is a problem, please drop the comment below.

Have a nice blogging, then ...

Share this with short URL: Get Short URL

Share this