Cara membuat facebook like dan facebook coment tanpa plugin di blog wordpress

Cara membuat facebook like dan facebook coment tanpa plugin di blog wordpress

 

Blog wordpress memberikan fasilitas yang sangat lengkap dengan tersedianya berbagai macam plugin, salah satunya plugin facebook like atau facebook coment. Tapi Anda juga bisa menggunakan fitur ini tanpa plugin, alasannya untuk mengirit bandwith dan menjaga agar koneksi tetap ringan.

A.    Facebook Connect

Mengambil kode Facebook Connect ke situs anda supaya fungsi Facebook Like dan Facebook Comments dapat berjalan.

1. Klik link Facebook Developer kemudian buat aplikasi baru. Isi nama aflikasi misalnya menggunakan alamat blog yang akan menggunakan fitur Facebook Like dan Facebook Comments sebagai URL aplikasi.

facebook coment

2. Kemudian copy kode Application App ID/API Key-nya.

facebook coment

3. Masuk ke dashboard wordpress klik menu Appearance dan sub menu Editor, kemudian buka file header.php. Tambahkan kode di bawah tepat setelah kode <body>. Ganti kata AppID/APIKey dengan ID Aplikasi yang telah Anda copy (yang dicoret kuning).

<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/APIKey“;

fjs.parentNode.insertBefore(js, fjs);

}(document, ‘script’, ‘facebook-jssdk’));</script>

 

B. Facebook Like

facebook coment

1. Buka file single.php kemudian cari kode <?php the_content(); ?>

2. Tambahkan kode Facebook Like sebelum atau sesudah kode <?php the_content(); ?> (tergantung selera).

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

Anda juga bisa merubah parameter yang ada pada kode Facebook Like:

# data-send=”false”: Ganti false menjadi true untuk menampilkan tombol Send setelah tombol Like.

# data-width=”700? : Ganti 700 untuk lebar Facebook Like, sesuaikan dengan lebar theme.

# data-show-faces=”true” : Ganti true menjadi false untuk menyembunyikan foto teman yg memberikan Like.

Catatan: apabila di theme tidak tersedia file single.php, Anda bisa bisa menyimpan kode Facebook Like tersebut di coments.php di bagian paling atas.

 

C. Menambahkan Facebook Comments

facebook coment

Buka file single.php dan cari kode <?php comments_template( ”, true ); ?> untuk menampilkan form komentar.

Tambahkan kode di bawah tepat di atas atau di bawah kode <?php comments_template( ”, true ); ?> untuk menampilkan Facebook Comments.

<?php global $post; ?>

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

Berikut parameter kode Facebook Comments yang bisa dirubah:

# data-num-posts=”10? : Jumlah maksimal Facebook Comments yang akan ditampilkan.

# data-width=”700? : Lebar form Facebook Comments yang disesuaikan dengan lebar theme.

Catatan: apabila di theme tidak tersedia file single.php, seperti Facebook Like Anda bisa menyimpan kode Facebook Like tersebut di coments.php di bagian paling atas.

Hasilnya Facebook Comments akan muncul tepat diatas form komentar. Anda juga bisa membuang kode untuk menampilkan form komentar bawaan WordPress jika diinginkan.

Atau Anda bisa menggunakan kode yang digunakan oleh blognya mas Pur. Kodenya seperti di bawah 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>

 

Sumber: exclusivewp.com

Semoga materi cara membuat facebook like dan facebook coment tanpa plugin di blog wordpress ini bermanfaat.

One Comment

  1. bagus nih buat anti spam / anti do follow

Leave a Reply

Your email address will not be published. Required fields are marked *

*

question razz sad evil exclaim smile redface biggrin surprised eek confused cool lol mad twisted rolleyes wink idea arrow neutral cry mrgreen

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>