Menambahkan Facebook Like dan Facebook Comments Tanpa Plugin

Kalau kamu pengen menambahkan fitur Facebook Like dan Facebook Comments di situs kamu, tapi bingung mau pake plugin apa, mungkin kamu bisa mempertimbangkan untuk melakukannya tanpa plugin. Caranya gampang kok, cukup kamu ikutin aja petunjuk dibawah ini

1. Facebook Connect

Agar fungsi Facebook Like dan Facebook Comments dapat berjalan, kita harus terlebih dahulu menambahkan kode Facebook Connect ke situs kita.

1. Pergi ke halaman Facebook Developer dan buat sebuah aplikasi baru. Gunakan alamat blog yg hendak menggunakan fitur FB Like dan FB Comments sebagai URL aplikasi. Setelah selesai, dibagian deskripsi aplikasi tsb akan kita temukan kode Application ID/ID Aplikasi-nya.

2. Buka file header.php dari theme yg digunakan, dan tambahkan kode berikut ini tepat setelah kode <body>. Jangan lupa untuk mengganti kata APPID-DISINI dg ID Aplikasi yg kita dapatkan di Facebook Developer tadi:


<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&appId=APPID-DISINI";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

2. Menambahkan Facebook Like

1. Buka file single.php theme yg sedang digunakan dan cari kode untuk menampilkan post content/isi artikel berikut ini:


<?php the_content(); ?>

2. Tambahkan kode Facebook Like berikut ini tepat sebelum dan/atau sesudah (sesuai keinginan) kode post content tadi:


<?php global $post; ?>
<div class="fb-like" data-href="<?php echo get_permalink( $post->ID ); ?>" data-send="false" data-width="700" data-show-faces="true"></div>	

<?php the_content(); ?>

Untuk contoh diatas, karena kode Facebook Like diletakkan tepat sebelum post content, maka nanti hasilnya tombol Facebook Like akan muncul tepat diatas post content.

Beberapa parameter yg ada di kode Facebook Like itu juga bisa diubah sesuai keinginan kita.

# data-send=”false”: Ganti false menjadi true untuk menampilkan tombol Send setelah tombol Like.
# data-width=”700″ : Ganti 700 dg lebar Facebook Like. Sesuaikan lebarnya dg theme yg kamu pakai.
# data-show-faces=”true” : Ganti true menjadi false untuk menyembunyikan foto teman yg memberikan Like.

3. Menambahkan Facebook Comments

1. Buka file single.php dan cari kode untuk menampilkan form komentar dibawah ini:


<?php comments_template( '', true ); ?>

2. Tambahkan kode untuk menampilkan Facebook Comments dibawah ini tepat sebelum kode untuk menampilkan komentar tadi:


<?php global $post; ?>
<div class="fb-comments" data-href="<?php echo get_permalink( $post->ID ); ?>" data-num-posts="10" data-width="700"></div>

<?php comments_template( '', true ); ?>

Beberapa parameter di kode Facebook Comments yg bisa dirubah adalah:

# data-num-posts=”10″ : Jumlah maksimum Facebook Comments yg hendak ditampilkan. Jika komentar lebih dari nilai maksimal, maka akan disembunyikan dan akan diganti link untuk melihat lebih banyak seperti di Facebook.

# data-width=”700″ : Lebar form Facebook Comments yg bisa disesuaikan dg lebar theme kamu.

Dengan cara ini, Facebook Comments akan muncul tepat diatas form komentar bawaan WordPress. Pengunjung akan memiliki dua pilihan, berkomentar langsung seperti layaknya Facebook atau tetap menggunakan form komentar WordPress.

Tentunya kita jg bisa membuang kode untuk menampilkan form komentar bawaan WordPress tadi jika diinginkan

Untuk blog eXclusive WordPress ini, tepat diatas form Facebook Comments aku tambahkan judul dalam format <h3> dan jumlah Facebook komentar untuk artikel tersebut menggunakan iFrame. Kode yg aku pakai adalah seperti ini:


<h3>Facebook Comments</h3>

<?php global $post; ?>
<iframe src="http://www.facebook.com/plugins/comments.php?href=<?php echo get_permalink( $post->ID ); ?>&permalink=1" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:130px; height:16px;" allowTransparency="true"></iframe> 

<div class="fb-comments" data-href="<?php echo get_permalink( $post->ID ); ?>" data-num-posts="10" data-width="700"></div>

Sampai disini, semua pengunjung yg mampir ke situs kita sudah bisa memberikan Like dan berkomentar lewat Facebook .

Jika masih ada tampilan yg kurang pas, cobalah untuk bermain dg parameter2-nya atau bisa juga menambahkan CSS style untuk mengatur dan mendapatkan tampilan yg lebih bagus.

Salam
[POER]

Purwedi Kurniawan
Blogger and WordPress plugin developer.