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 Memasang Kotak Berlangganan Email (Subscribe Box) Di BlogKotak berlangganan atau bisa juga disebut subcription box merupakan kotak yang difungsikan bagi para pengunjung blog yang ingin berlangganan… [Read More]
Cara Membuat Widget Recent Post Berdasarkan Label Tertentu Di BlogRecent post merupakan widget yang berisi daftar post/artikel terbaru di blog sobat. Recent merupakan property blog yang harus ada jika anda … [Read More]
Cara Membuat Widget Melayang/Sticky Ketika Di Scroll SidebarWidget yang melayang/menempel di sidebar blog ini sangat cocok jika anda seorang blogger yang suka membuat artikel tutorial atau panjang. De… [Read More]
Cara Membuat Grid Recent Post Berdasarkan Label Tertentu Di BlogspotGrid recent post sangat cocok untuk blog download,terutama blog download game dan software. Karena tidak ada cuplikan. Recent post ini bisa … [Read More]
Cara Membuat Kotak Berlangganan (Subscription Box) Keren dan ResponsiveCara Membuat Kotak Berlangganan (Subcription Box) di Blog - Sangatlah penting untuk membuat kotak berlangganan email/subcription box,seperti… [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