Cara Membuat Pop Up Fanspage Facebook Di Blogger Mudah
Kali ini saya akan berbagi tutorial cara membuat popup fans page facebook. Mungkin bagi anda yang belum memiliki fanspage silakan buat terlebih dahulu.Banyak keuntungan yang bisa anda dapatkan dari fanspage facebook selain bisa sebagai media promosi juga bisa sebagai halaman official bagi pengunjung dari media sosial. Mereka bisa mengakses fanspage anda dan bertanya melalui fp facebook anda.
Selain itu anda juga harus mencari like untuk fp facebook anda. Ada cara yang berbayar dan yang gratis tentunya. Yang berbayar anda bisa menggunakan facebook ads,selain meningkatkan like fp juga meningkatkan visitor blog anda. Untuk cara gratisnya anda bisa memasang widget fp facebook dan menambahkan popup fanpage facebook saat situs dibuka.
Baca juga : Cara Memasang Kotak Fanspage Facebook (Like Box)
Dengan begitu maka anda bisa menambatkan banyak like fanspage facebook. Menambahkan popup fanspage facebook juga memiliki manfaat bagi kalian yang memiliki blog download dan memasang iklan karena bisa menjadi trik untuk meraup banyak dollar dari iklan popunder. Tertarik untuk menambahkan popup fans page facebook. Yuk ikuti langkah dibawah.
Cara Membuat Pop UP Fanspage Facebook
Langkah 1
Silakan buka blogger, pilih Template → Edit HTML. Salin kode dibawah ini dan pastekan diatas kode </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>
Lalu simpan template.
Langkah 2 (Buat Widget Baru)
Buka Tata Letak → Tambahkan gadget → HTML/Javascript. Salin kode dibawah dan masukkan/pastekan kode yang sudah disalin kedalam widget baru.
<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/anggasaveblog' 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>
Ganti https://www.facebook.com/anggasaveblog dengan url fanspage facebook anda.
Jangan lupa untuk menyimpan gadget. Sekarang coba buka blog anda. Tunggu apakah popup fanspage facebook sudah muncul di blog anda. Jika sudah maka cukup sekian artikel yang bisa saya bagikan semoga bisa membantu dan bermanfaat.
Related Posts :
Cara Membuat Daftar Isi Blog Otomatis 2017 Sesuai LabelDaftar isi sangatlah penting dalam sebuah blog. Karena merupakan sebuah laman navigasi yang membantu pengunjung dalam melihat daftar artikel… [Read More]
Cara Membuat Artikel Terkait/Related Post Keren Di BloggerArtikel terkait merupakan widget yang penting. Terutama untuk menurunkan bounce rate/rasio pentalan blog anda. Rasio pentalan ini menunjukka… [Read More]
Cara Membuat Efek Tulisan Berjalan Didalam Postingan BlogIngin menampilkan sesuatu yang keren didalam postingan blog. Sesuatu yang bisa menarik perhatian pengunjung. Salah satu caranya adalah denga… [Read More]
Apa Itu Bounce Rate? Cara Menurunkan Bounce Rate Blog - Pengertian Rasio PentalanBagi anda yang baru di dunia blogging pasti masih belum tahu istilah-istilah yang ada dalam dunia blogging. Entah itu pernah mendengarnya se… [Read More]
Berapa Bounce Rate Yang Bagus? Cara Mengurangi Rasio Pentalan?Pernah dengar tentang bounce rate? Bounce rate ini ternyata juga penting untuk suatu blog karena menjadi patokan dalam penilaian atau suatu … [Read More]
itu responsive ga di versi mobile?
ReplyDeleteTidak,tapi jika ingin agar tidak muncul di mobile seluler bisa ditambahkan tag kondisional
Deletekode tag conditionalnya gimana mas?. bisa di share. trims
Delete