Cara Pasang Widget Pop Up Like Fanpage di Blog

Memasang widget Like Facebook di Blog adalah cara yang paling banyak digunakan dan diandalkan untuk memperbanyak orang yang menyukai halaman Blog di Facebook.

Untuk tampilanya sendiri, widget ini akan muncul beberapa waktu yang telah ditentukan setalah halaman Blog selesai dimuat.

Dan pengunjung akan diberikan 2 pilihan, yaitu apakah akan klik Like atau Close. Pengunjung bebas menentukan untuk menyukai halaman Facebook kita atau tidak.

Cara Membuat Popup Like Facebook di Blog

Login ke akun Blogger sobat.

Pada bagian Tata Letak, klik Tambahkan Gadget di posisi mana pun.

Pilih Mode HTML/Javascript dan masukan script di bawah ini.

<style scoped='' type='text/css'> #fb-fanbox {display:none;background:rgba(0,0,0,0.9);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;-webkit-transform:translateZ(0);} #fb-boxclose {width:100%;height:100%;-webkit-transform:translateZ(0);} #fb-boxview {background:#fff;border:8px solid #03a9f4;width:340px;height:230px;position:absolute;top:33%;left:37%;border-radius:3px;} #fb-closebox {float:right;cursor:pointer;position:absolute;right:-1px;top:-2px;z-index:2;} #fb-closebox:before {content:"CLOSE";padding:5px 8px;background:#03a9f4;color:#fff;font-weight:normal;font-size:10px;font-family:inherit;} #fb-boxlink,#fb-boxlink a.visited,#fb-boxlink a,#fb-boxlink 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) { // 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() : '', // use expires attribute, max-age is not supported by IE options.path ? '; path=' + options.path : '', options.domain ? '; domain=' + options.domain : '', options.secure ? '; secure' : '' ].join('')); } // Dapatkan 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'){ $('#fb-fanbox').delay(3000).fadeIn('fast'); $('#fb-closebox, #fb-boxclose').click(function(){ $('#fb-fanbox').stop().fadeOut('fast'); }); } $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 1 }); }); </script> <div id='fb-fanbox'> <div id='fb-boxclose'> </div> <div id='fb-boxview'> <div id='fb-closebox'> </div> <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php? href=https://www.facebook.com/blogger.lembak/?ref=br_rs&pnref=lhc&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false' style='border:none;overflow:hidden;width:339px;height:200px;'></iframe> </div> </div>

Jangan lupa ganti https://www.facebook.com/blogger.lembak dengan URL halaman fanpage sobat.

Untuk mengatur waktu tampilan silahkan ganti  .delay(3000) dan atur nilainya.

 Jika sobat ingin memunculkan popup facebook ini setiap kali halaman blog di buka silahkan hapus kode,

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

Save dan lihat hasilnya.