Plugin Facebook Like

Facebook Like Button di WordPress

Tombol/button Facebook Like memungkinkan pengguna berbagi konten Anda dengan teman-teman di Facebook. Ketika pengguna mengklik button Facebook Like seperti di situs Jevuska ini, artikel akan muncul dalam feed news akun Facebook Anda dengan memberikan link kembali ke website Anda.

Ada dua metode untuk mengimplementasikan Facebook Like Button ini yaitu XFBML dan Iframe. Versi XFBML (juga tersedia dalam markup HTML5) yang lebih fleksibel, tetapi memerlukan penggunaan JavaScript SDK Facebook.

Untuk pengguna cms WordPress, berikut step-by-step cara pasang Facebook Like Button tanpa plugin:

Implementasi kode Iframe

  • Tempatkan kode berikut di index.php, single.php atau di archive.php
    <iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo get_permalink() ?>&amp;send=false&amp;layout=box_count&amp;width=100&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=90" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:90px;" allowTransparency="true"></iframe>

Implementasi kode HTML5

  • Tempatkan kode JavaScript SDK Facebook setelah <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/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
  • Kemudian tempatkan kode Facebook Like Button button ini di dalam loop konten, entah itu di index.php, single.php atau di archive.php
    <div class="fb-like" data-href="<?php echo get_permalink() ?>" data-send="true" data-layout="box_count" data-width="100" data-show-faces="false"></div>

Implementasi kode XFBML

  • Tempatkan kode JavaScript SDK seperti pada implementasi kode HTML5, kemudian pada bagian header, Anda harus memasang tipe dokumen XML pada tag <html>. Tampilannya seperti ini:
    <html xmlns:fb="http://ogp.me/ns/fb#">
  • Kemudian tempatkan kode berikut di dalam loop kontent, entah itu di index.php, single.php atau di archive.php
    <fb:like href="<?php echo get_permalink() ?>" send="true" layout="box_count" width="100" show_faces="false"></fb:like>

Atribut Kode Facebook Like Button

  • href : url permalink postingan Anda, dalam tutorial ini, kode <?php echo get_permalink() ?> untuk menunjukkan url postingan/artikel
  • send : menentukan apakah akan menyertakan tombol send/kirim. Ini hanya bekerja dengan versi XFBML. Opsinya adalah “true” atau “false”
  • layout : ada tiga pilihan.
    • standar : menampilkan teks sosial di kanan tombol dan profil foto teman-teman Anda. Lebar minimum: 225 pixel. Minimal 40px untuk action ‘recommend’ oleh dan 60 piksel jika data ‘send’ adalah ‘true’. Standar lebar: 450 pixel. Tinggi: 35 pixel (tanpa foto) atau 80 piksel (dengan foto).
    • button_count : menampilkan jumlah like/suka di kanan tombol. Lebar minimum: 90 pixel. Standar lebar: 90 pixel. Tinggi: 20 pixel.
    • box_count : menampilkan jumlah like/suka di atas tombol. Lebar minimum: 55 pixel. Standar lebar: 55 pixel. Tinggi: 65 pixel.
  • show_faces : menentukan apakah akan menampilkan foto profil di bawah tombol. Opsinya adalah “true” atau “false”
  • width : lebar button like.
  • action : kata untuk ditampilkan di tombol. Pilihannya adalah “like/suka” , “recommend/rekomendasi”
  • font : untuk menampilkan jenis font yang dipakai. Pilihannya adalah ‘arial’, ‘lucida grande’, ‘segoe ui’, ‘tahoma’, ‘trebuchet ms’, ‘verdana’
  • colorscheme : skema warna untuk tombol seperti. Pilihannya adalah “light” dan “dark”
  • ref : label untuk melacak arahan; harus kurang dari 50 karakter dan dapat berisi karakter alfanumerik dan beberapa tanda baca (/ =-.: _). Atribut ref menyebabkan dua parameter yang ditambahkan ke URL referrer/perujuk ketika pengguna mengklik link Like dari permalink artikel/postingan:
    • fb_ref : ref parameter
    • fb_source : tipenya (‘home’, ‘profile’, ‘search’, ‘ticker’, ‘tickerdialog’ atau ‘other’)

Core konsep social plugin Facebook Like button ini, Anda bisa temukan di sini:
http://developers.facebook.com/docs/reference/plugins/like/

Baca juga tutorial Facebook lainnya seperti cara memasang Login Button Facebook.

Tinggalkan Komentar