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.
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