Cara Membuat Popup Facebook Like di Wordpress dan Blogspot
akan muncul pertama saat kita buka website
Cara Membuat Popup Facebook Like di Wordpress dan Blogspot
Cara Membuat Popup Facebook Like di Wordpress dan Blogspot - Dani Sukma.Anda mencari script pop up facebook like ? bagaimana membuat pop up facebook like saat blog pertama kali di kunjungi ? "Dan(Dani maksudnya) :) .. coba cari script untuk menampilkan like facebook fanpage !".untuk menanggapi permintaan tersebut akhirnya saya coba berkeliling mencari referensi, sebenarnya untuk wordpress hosting sendiri ada plugin untuk keperluan tersebut yaitu facebook page promoter lightbox.
Tapi.. kebetulan untuk blog yang saya kelola plugin tersebut tidak
berjalan dengan baik, alhasil saya harus mencari referensi lain. Akan
lebih mudah jika anda sudah familiar dengan web desain dan menguasai pop
up message menggunakan jquery,
pada prinsipnya menyertakan facebook page like box ke dalam pop up
message yang muncul saat pertama kali mengunjungi suatu halaman untuk
membuat facebook like box silahkan anda kunjungi halaman
facebook developper.
Membuat Facebook Like Box
isi facebook page url dengan alamat url fan page facebook anda lalu klik
get code, terdapat 4 pilihan code, dari beberapa referensi cara membuat pop up like facebook fan page memilih
code iframe, tapi dalam praktek yang saya lakukan menggunakan code html
5, berdasar referensi lain komponen iframe tidak seo friendly. Pilih
salah satu kode untuk facbook like di bawah ini lalu copas pada widget
html pada blog anda, ganti alamat facebook
https://www.facebook.com/pages/Selamatkan-Wanita-DARI-KISTA/557765757604047
menjadi alamat facebook fan page anda sesuaikan data-width="300" data-height="290" dengan lebar space widget sidebar
Kode html5 Facebook like
<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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="https://www.facebook.com/pages/Selamatkan-Wanita-DARI-KISTA/557765757604047" data-width="300" data-height="290" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true">
</div>
Kode Iframe facebook Like
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FSelamatkan-Wanita-DARI-KISTA%2F557765757604047+&width=300&height=290&colorscheme=light&show_faces=true&header=true&stream=false&show_border=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:290px;" allowTransparency="true"></iframe>
Sampai tahap ini, anda sudah berhasil membuat facebook pan fage statik
yang bisa anda tempatkan di widget html pada blog anda(biasanya di
letakan di sidebar). Selanjutnya bagaimana membuat agar facebook like
fan page tersebut muncul dengan pop up ? anda tidak perlu membuat
sendiri script tersebut, saya mendapatkanya di
www.trickstoo.com Copy script dibawah ini ke dalam widget html blogspot atau wordpress
Kode Pop Up Facebook Fan Page Like
<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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}
(document, 'script', 'facebook-jssdk'));
</script>
<style type='text/css'>
#trickstoo-box {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#FEFEFE;font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#trickstoo-box a.bsclose {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#000000;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:25px;
cursor:pointer;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
$('#trickstoo-box').animate({top:"90px"}, 1000).delay(3000).hide(0);
$('a.bsclose').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='trickstoo-box' style="z-index:1000">
<!-- Widget by www.trickstoo.com Start -->
<center>
<b><a class="Blogtariff">Like Ahli Kista</a></b>
</center>
<center>
<div class="fb-like-box" data-href="https://www.facebook.com/pages/Selamatkan-Wanita-DARI-KISTA/557765757604047" data-width="The pixel width of the plugin" data-height="The pixel height of the plugin" data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>
</center>
<!-- Widget by www.trickstoo.com End -->
<a class='bsclose' href='#'>×</a>
<!--
<center style="float:right; margin-right:10px;"><span style="font-size:xx-small; color:#000; text-decoration:none;">+Get this at</span> <a target='_blank' style="font-size:xx-small; color:#3B78CD; text-decoration:none;" href="#">trickstoo</a></center>
-->
</div>
Cari alamat facebook fan page di bawah ini ganti dengan alamat fanpage
anda, simpan dan refersh halaman blog. facbook like fan page akann
muncul dengan pop up dan menghilang dalam waktu 3 detik
https://www.facebook.com/pages/Selamatkan-Wanita-DARI-KISTA/557765757604047
untuk merubah waktu untuk menghilang secara otomatisnya cari kode berikut rubah menjadi 5000 atau lebih besar dari 3000
delay(3000)
