Cara Menambahkan Pop Up Like Box Facebook

Cara Menambahkan Pop Up Like Box Facebook di Blogger. Tutorial dari widget yang satu ini memang sudah banyak yang menyebarkan di blog lainnya, namun disini Saya akan coba menunjukkan tampilan yang lebih sederhana.

Dalam rangka meningkatkan pengunjung ke halaman Facebook, sahabat perlu mempromosikan halaman Facebook untuk mendapat lebih banyak like dari pengguna yang mengunjungi blog sobat. Dan tidak diragukan lagi, dengan menambahkan pop up like box facebook ini di blogger yaitu salah satu cara terbaik untuk meningkatkan penggemar dari halaman facebook sobat.

Silakan ikuti langkah sederhana berikut ini :

Disini sahabat hanya perlu menambahkan arahan di bawah ini pada widget blogger.

Buka blogger > Tata letak > Klik tambahkan gadget lalu klik HTML/JavaScript > Salin dan terapkan semua arahan di bawah ini didalamnya 

<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: 7 }); }); </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/arlinadesign&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>

Setelah ditambahkan, klik Simpan.

Setelan :

Ganti url https://www.facebook.com/arlinadesign dengan url halaman fan page facebook sobat

Jika ingin memunculkan pop up like box ini setiap kali halaman blog dibuka, silakan hapus arahan $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 }); pada arahan di atas dan menonaktifkan cookie : false pada script ini (Jika terpasang pada template)

<div id='fb-root'/> <script> window.fbAsyncInit = function() { FB.init({ appId : 'KODE-APLIKASI', status : true, // check login status cookie : false, // enable cookies to allow the server to access the session xfbml : true // parse XFBML }); }; (function() { var e = document.createElement('script'); e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; e.async = true; document.getElementById('fb-root').appendChild(e); }()); </script>

Untuk mengatur jeda waktu munculnya pop up like box ini, silakan atur nilai dari arahan ini .delay(3000)

Result

Update

Bagi yang ingin memasang versi HTML5 yang seo friendly, silakan salin arahan ini pada widget

<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: 7 }); }); </script> <div id='fb-fanbox'> <div id='fb-boxclose'> </div> <div id='fb-boxview'> <div id='fb-closebox'> </div> <div class='fb-like-box' data-href='https://www.facebook.com/arlinadesign' data-width='402' data-height='255' data-colorscheme='light' data-show-faces='true' data-header='true' data-stream='false' data-show-border='false' style='border:none;overflow:hidden;width:339px;height:200px;'></div> </div> </div>

Simpan widget, selanjutnya simpan arahan di bawah ini sesudah <body> atau sebelum </body>

<div id="fb-root"></div> <script>(function(d, s, id) {   var js, fjs = d.getElementsByTagName(s)[0];   if (d.getElementById(id)) return;   js = d.createElement(s); js.id = id;   js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=562901580420523&version=v2.0";   fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

Cukup sekian ihwal Cara Menambahkan Pop Up Like Box Facebook, Selamat mencoba.

Tweet

Subscribe to receive free email updates: