Archive for November 2013

Cara Membuat Pop Up Facebook Like di Blogspot dan Wordpress

By : Unknown

Assalamu'alaikum,

Hallo apa kabar semuanya?
Maaf nih saya sudah lama tidak update di blog, karena sibuk di urusan dunia nyata,
oke deh tanpa basa basi lagi, mari kita langsung ke tkp, Cara Membuat Pop Up Facebook Like di Blogspot dan Wordpress

Sebenarnya kalau buat Wordpress hosting sendiri ada plugin untuk keperluan tersebut yaitu Facebook Page Promotor Lightbox

Tapi, di blog saya kelola plugin tidak berjalan dengan baik, alhasil saya harus mencari referensi lain. Akan lebih mudah jika Anda sudah familiar dengan 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

Lihat Scriptnya di sini

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

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

Code iFrame Facebook Like

<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FSelamatkan-Wanita-DARI-KISTA%2F557765757604047+&amp;width=300&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=false&amp;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.

Code 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='#'>&times;</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. facebook like fan page akan 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)

Demikian postingan Cara Membuat Pop Up Facebook Lie di Blogspot dan Wordpress
Semoga Bermanfaat :)

Wassalamu'alaikum

0 Comments

Tag : Trik,

Gushnul Anjas

Popular Post

Archive for November 2013

Cara Membuat Pop Up Facebook Like di Blogspot dan Wordpress

Blogger templates

Blogger news

About Me

Blog Archive

Blogroll

Labels

About