Cara Membuat Popup Facebook Fanspage Like Box di Blog

Baca Juga

SALAH satu cara meningkatkan "likers" Fans Page Facebook adalah dengan membuat, memasang, atau menampilkan Popup Facebok Fanspage Like Box di situs web atau blog.

Popup ini akan sedikit mengganggu kenyamanan pengunjung, apalagi jika muncul terus tiap halaman. Biar tidak terlalu mengganggu, munculkan Popup Fanspage ini hanya sekali, atau di satu halaman yang dibuka, jangan tiap halaman.

Nah, kode berikut ini hanya memunculkan popup like box itu sekali saja, saat pertama kali pengunjung membuka halaman blog Anda. So, gak terlalu mengganggu 'kan?

Cara Membuat Popup Facebook Fanspage Like Box di Blog
1. Buat dulu Fans Page di Facebook2. Dapatkan URL atau username
3. Layout > Add a Gadget > HTML/Javascript
4. COPY & PASTE kode berikut ini di kolom "Content"
 

<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(5000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
});</script>
<div id='fbox-background'>
<div id='fbox-close'>
</div>
<div id='fbox-display'>
<div id='fbox-button'>
</div>
<div class="fb-like-box" data-href="https://www.facebook.com/romelteamedia" data-width="300" data-height="300" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="false"></div>
</div>
</div>

5. Widgetnya 'gak usah dikasih judul apa-apa. Judul biarkan kosong!
6. Ganti url Fanspage-nya dengan link page Facebook Anda.

7. Pastikan di template Anda ada kode seperti ini:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

Jika belum ada, tambahkan kode itu di atas kode </head>

8. Save!
Kini, jika lancar gak ada kendala, misalnya dibekukan Kemenpora kaya PSSI, maka Popup Facebook Fanspage Like Box sudah muncul di halaman blog Anda.

Untuk blog CMS Wordpress, Anda bisa install WP Plugin Facebook Page. (http://www.romelteamedia.com).*

Sumber