Blogger Facebook Like Button

Pasang tombol Like Facebook di Blogger/Blogspot

Cara pasang tombol Like Facebook di Blogger/Blogspot berbeda dengan cara pasang button Like Facebook di WordPress. Bedanya pada penempatan kodenya dan atribut href plugin Facebook Like.

Berikut langkah-langkah cara pasang tombol Like Facebook di Blogspot:

Untuk implementasi kode Iframe

  1. Masuk di template editor blog Anda Template > Edit HTML
  2. Centang Expand Widget Templates dan tempatkan kode berikut sebelum atau sesudah setelah kode <data:post.body/>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=box_count&amp;show_faces=false&amp;width=55&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=62&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:62px;'/>
    </b:if>
  3. Save template Anda

Untuk implementasi kode XFBML

  1. Pada bagian header, Anda harus memasang tipe dokumen XML pada tag <html> (kodenya ada di bagian atas kode template Anda). Tampilannya seperti ini:
    <html xmlns:fb="http://ogp.me/ns/fb#">
  2. Kemudian tempatkan kode JavaScript SDK Facebook setelah kode <body> atau <body expr:class=’"loading" + data:blog.mobileClass’>
    <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>
  3. Kemudian tempatkan kode berikut di dalam loop konten, sebelum dan/atau sesudah <data:post.body/>:
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
         <fb:like expr:href='data:post.canonicalUrl' layout='box_count' send='false' show_faces='false'/>
    </b:if>
  4. Save template Anda

Jika hanya ingin menampilkan Facebook Like button pada halaman tertentu saja, misalnya halaman di single post/item, Anda cukup mengganti pagetype dalam kode tersebut. Misalnya seperti kode berikut ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <fb:like expr:href='data:post.canonicalUrl' layout='box_count' send='false' show_faces='false'/>
</b:if>

Contoh kode tombol Like Facebook di atas akan menampilkan button dalam bentuk vertikal, Anda bisa memodifikasinya dengan mengganti atribut dalam kode tersebut untuk membuat tampilan yang lain.

Atribut Kode Facebook Like Button

  • href : url permalink postingan Anda, dalam tutorial ini, kode data:post.canonicalUrl 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 ini, Anda bisa temukan di sini:
http://developers.facebook.com/docs/reference/plugins/like/

Tinggalkan Komentar