4 CARA MEMBUAT FACEBOOK LIKE DI BLOG DAN MODEL PENEMPATANNYA



Membuat facebook like di blog (blogspot), pada umumnya ada beberapa jenis dan cara penempatan. Jenis-jenis ini antara lain facebook like box dan facebook like button. Untuk penempatannya bisa dilakukan di dalam posting / artikel ataupun di diluar artikel, pada menu gadget misalnya.

Facebook like box biasanya ditempatkan diluar posting, bisa diatas, dibawah, samping kanan atau samping kiri, tergantung ke inginan. Namun untuk facebook like button disarankan penempatannya dilakukan didalam posting blog/ artikel. Keuntungan memasang facebook like ini pada blog / web salah satunya, jika nantinya ada pengunjung blog yang membaca artikel kita dan mereka suka atau menganggap tulisan kita bermanfaat, maka mereka bisa merekomendasikan artikel kita ke facebook melalui like button. Apalagi saat ini facebook merupakan situs yang paling sering dikunjungi di Internet, bukan tidak mungkin pula nantinya pengunjung situs kita datang dari facebook.

Berikut ada 3 tips penempatan facebook like di dalam maupun diluar posting :

Membuat facebook like di luar posting blog

Untuk menerapkan cara ini, terlebih dahulu kita harus membuat facebook like box, silahkan baca artikel cara pasang like box facebook di blog untuk membuatnya. Apabila anda masih belum punya fanspage untuk blog Anda, silahkan juga baca cara membuat fanspage facebook. Setelah like box selesai di buat maka cukup copy paste kode HTML yang didapatkan pada saat membuat like box kedalam GADGET blog.

Membuat facebook like di bawah judul posting

Untuk membuat facebook like dibawah judul blog, kita tidak akan menggunakan like box lagi, melainkan menggunakan LIKE BUTTON yang telah disediakan oleh Facebook Developers. Langkah langkahnya sebagai berikut :

1. Buka tab baru, copy dan kunjungi url berikut https://developers.facebook.com/docs/reference/plugins/like/

2. Masukkan URL Halaman Facebook anda ke dalam kolom URL TO LIKE. Silahkan ubah sesuaikan penampilan sesuai kreasi Anda sendiri. Biasanya saya tidak memakai SHOW FACES dalam cara ini, agar like button terlihat menyatu dengan Artikel. Gambar tampilanya akan seperti dibawah ini :
3. Jika sudah selesai selanjutnya klik GET CODE. Pilih HTML5 pada kode plugin yang ditampilkan. Pada HTML5 terdapat dua kode yang berbeda kode #1 dan kode #2, nantinya dua kode ini akan dipasang kedalam template blog.


4. Pada tab lain, buka DASBOR BLOGGER - TEMPLATE - EDIT HTML - beri tanda Checklist pada EXPAND TEMPLATE WIDGET. (Sebelum memulai edit template mungkin lebih baik download dulu template lengkap, ini untuk mengantisipasi jika terjadi kesalahan saat edit template agar bisa dikembalikan seperti semula).

5. Cari kode  <body> , gunakan CTRL+F untuk mempermudah pencarian. Lalu Copy kan kode # 1 TEPAT DIBAWAH kode <body>

6. Selanjutnya cari kode <data:post.body/>. Jika ada dua kode data:post.body, maka pilih kode yang kedua, jaraknya tidak jauh dengan kode yang pertama. (Kadang kadang setiap template memang berbeda data:post.body nya jika sudah diberi readmore). Selanjutnya Copy kan kode # 2 TEPAT DIATAS <data:post.body/>.

7. Gunakan PRATINJAU dulu untuk mengetahui adanya kesalahan atau tidak. Klik SIMPAN TEMPLATE untuk mengakhiri. Hasilnya akan seperti pada gambar dibawah ini :


Membuat facebook like di bawah artikel

Membuat facebook like bisa juga diletakkan di akhir sebuah artikel atau posting. Cara penempatannya pun cukup mudah. Kita hanya cukup melakukan cara yang sama seperti diatas. Bedanya hanya ada pada penempatan kode ke #2.

1. Seperti cara sebelumnya, tempatkan kode #1 TEPAT DIBAWAH kode  <body>

2. Sekarang perbedaannya ada disini, tempatkan kode #2 TEPAT DIBAWAH <data:post.body/>

3. SIMPAN TEMPLATE untuk mengakhiri. Selesai.

Membuat facebook like untuk artikel / bukan fanspage

Cara terakhir ini kita hanya menambahkan like button saja, tanpa menggunakan fanspage. Like button ini berfungsi untuk "ngelike" dan mengirimkan artikel saja kepada teman facebook kita.
Langkah untuk memasangnya sebagai berikut :

1. Buka DASBOR BLOGGER - TEMPLATE - EDIT HTML - beri tanda Checklist  pada EXPAND TEMPLATE.

2. Cari kode  <data:post.body/> , jika ada 2 maka pilih data:post.body yang kedua.

3. Copy kode ini : 

<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='button_count' send='true' show_faces='false' width='450'/> 

dan letakkan TEPAT DI BAWAH kode <data:post.body/> maka facebook like akan berada di akhir artikel / posting.

Jika ingin meletakkannya di bawah judul posting, cukup letakkan kode tersebut TEPAT DIATAS  kode <data:post.body/>

4. SIMPAN TEMPLATE, dan hasilnya akan seperti pada facebook like yang ada pada akhir artikel ini.

Demikianlah tips singkat tentang cara membuat facebook like di blog, cara ini sudah terbukti berhasil. Buktinya bisa dilihat pada semua artikel blog ini. Semoga bermanfaat.

UPDATE 


Pada bulan April 2013, pihak blogger telah merubah bentuk tampilan pada menu EDIT HTML pada DASHBOARD. Perubahan interface ini sedikit menyulitkan bagi blogger pemula yang baru memulai belajar edit kode-kode HTML untuk memperbaharui template blog. Perubahan yang terlihat adalah tidak adanya tanda checklist pada EXPAND TEMPLATE WIDGET. Tentunya kode-kode seperti   ]]></b:skin> dan <data:post.body/> akan sedikit sulit ditemukan.

Dalam panduan membuat facebook like di blog diatas kita harus memasukkan kode-kode script dari facebook kedalam template blog melalui menu EDIT HTML. Untuk mengetahui letak-letak kode seperti ]]></b:skin> dan <data:post.body/> silahkan baca artikel EDIT HTML PADA TAMPILAN BLOGGER BARU. Artikel tersebut membahas letak letak kode pada tampilan baru blogger. Semoga membantu.



data-matched-content-ui-type="image_sidebyside" data-matched-content-rows-num="4" data-matched-content-columns-num="1"
Bagikan ke FB
Tags :

Artikel Terkait : 4 CARA MEMBUAT FACEBOOK LIKE DI BLOG DAN MODEL PENEMPATANNYA

4 comments:

  1. gan tolong dong gimana cara nya membuat daftar isi seperti yg agan punya? terus gimana caranya bikin read more ditiap laman/label seperti yang agan punya? Kunjungi blog sy y (woks13.blogspot.com)

    BalasHapus
  2. Iwa Hernawan : Untuk membuat Daftar Isi menggunakan Script Sitemap, saya belum membuat tutorial tentang sitemap, Anda bisa cari di Google dengan kata kunci "Cara membuat sitemap / daftar isi di blog.
    Read More di blog ini bawaan template, jika yang manual bisa dibaca pada artikel Cara Membuat Read More Pada Posting Blog

    BalasHapus
  3. thx gan, like box di blog ane udah sukses

    BalasHapus
  4. gan kode < body > kok gk ketemu2 ya? mohon bantuanya

    BalasHapus

Panduan berkomentar :
- Gunakan akun Google / Gmail untuk berkomentar.
- Komentar yang bersifat SPAM (Promosi / Link aktif) dan sejenisnya tidak akan diterbitkan.
Harap maklum.