Cara Membuat Facebook Like Button di Blogger yang Memiliki Domain Ganda

Facebook like button adalah tombol rating (count) terpopuler saat ini, selain karena banyaknya member didalamnya dan mudah digunakan, juga dapat di jadi kan strategi pengenalan posting di blog kepada orang banyak dan memperindah blog tentunya.

Untuk membuat like button harus mengikuti langkah-langkah berikut:

1. Login akun Google kamu untuk masuk ke Blogger
2. Pilih Blog
3. Menuju ke Tema > Edit HTML (edit template)
4. Memasang Meta
Meta og:*** bertujuan untuk menyesuaikan pratinjau tautan. Dibawah ini adalah kode meta secara lengkap.

 <meta expr:content='data:blog.pageName' property='og:title'/>
 <b:if cond='data:blog.postImageThumbnailUrl'>
  <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
 </b:if>
 <meta expr:content='data:blog.canonicalUrl' property='og:url'/>
 <b:if cond='data:blog.pageType == "index"'>
  <meta expr:content='data:description' property='og:description'/>
 <b:else/><b:if cond='data:blog.metaDescription'>
  <meta expr:content='data:blog.metaDescription' property='og:description'/>
 </b:if>
 </b:if>

Tempatkan kode di atas </head>.
Ingatlah! ini hanya untuk template blogger, website/blog lain tidak bisa menggunakan Google Expression.
Dengan demikian, saat url terbagikan di facebook, maka data seperti gambar, judul, dll. akan terlihat.

5. Memasang HTML5 Facebook like button
Untuk mendapatkan kode HTML5-nya bisa mengunjungi alamat https://developers.facebook.com/docs/plugins/like-button/. Kemudian akan nampak seperti ini.

Dari gambar di atas, ada beberapa kolom dan input yang harus kita ganti:
• URL to like data-href, yakni URL atau alamat web/blog tujuan (misal: http://artutorblog.blogspot.com/), jika di gunakan untuk semua pospostingan blog di blogger bisa menggunakan atribut expr:data-href="data:post.canonicalUrl"
• Width data-width, yaitu panjang kotak, dihitung dalam ukuran dalam pixel.
• Height data-height, yaitu tinggi kotak, dihitung dalam ukuran dalam pixel.
• Layout data-layout, model tampilan like button, dapat berupa standard (default), box_count (tombol dan kotak count secara vertikal), button_count (tombol dan count dalam satu kotak, button (hanya tombol tanpa count).
• Show Friends Faces data-show_faces, Menampilkan foto profil teman yang menyukai URL tujuan (yang bukan temannya tidak dapat ditampilkan). Pilih false jika ingin menonaktifkan fitur ini.
• Color Scheme data-colorscheme, warna tampilan pada skema, berupa light (default) atau dark.
• Action type data-action, tombol yang akan ditampilkan, berupa like (default) dan recommend. Semenjak yang kita bahas tentang like button, jadi pilih like saja
• Include Send Button data-send, menampilkan tombol kirim. Pilih false jika ingin menonaktifkan fitur ini.
• Size data-size, Mengatur ukuran tombol.

Ada beberapa atribut yang tidak ditampilkan di halaman konfigurasi.

• Share Button data-share, Menampilkan tombol Bagikan beserta count-nya. Semenjak meng-klik Suka akan membagikan tautan tujuan secara otomatis ke halaman kronologi facebook, jadi pilih false saja.
• Kid Directed Site data-kid-directed-site, Untuk konten web yang di tujukan untuk anak-anak di bawah 13 tahun wajib mengatifkan ini.

Semua semua input diubah, klik "Get Code", jika digunakan untuk satu web/halaman, kalian hanya menyalin Facebook SDK dan kode HTML5-nya.

Jika hanya memiliki alamat default blog (misal: http://artutorblog.blogspot.com) dan ingin menerapkan ke semua postingan blog, bisa menggunakan kode ini:

<div class="fb-like" data-action="like" expr:data-href="data:post.canonicalUrl" data-width="450" data-height="80" data-layout="standard" data-colorscheme="light" data-send="false" data-share="false" data-show-faces="true" data-size="large" data-kid-directed-site="false" expr:xid="data:post.id">
</div>

Tempatkan kode diatas di bawah <data:post.body/>.

Bagaimana jika kalian memiliki domain sendiri di blogger yang suatu saat bisa menghilang atau ingin kembali ke domain default?
Suatu masalah ketika alamat URL atau domain berganti, maka count like-nya pun juga akan berubah (atau mungkin ter-reset).
Suatu cara terbaik untuk mengatasi masalah ini adalah menggunakan domain default untuk dijadikan variabel data-href.

Untuk dapat melakukannya harus menggunakan JavaScript (menggunakan kode di bawah).

 <script type='text/javascript'>
  var myoriginalurl = document.createElement("a");
  myoriginalurl.href = "<data:post.canonicalUrl/>";
  var myfburl = &quot;http://artutorblog.blogspot.com&quot; + myoriginalurl.pathname;
  var myxuid = &quot;<data:post.id/>&quot;;
//<![CDATA[
  document.write('<div class="fb-like" data-action="like" data-href="' + myfburl + '" data-width="450" data-height="80" data-layout="standard" data-colorscheme="light" data-send="false" data-share="false" data-show-faces="true" data-size="large" data-kid-directed-site="false" xid="' + myxuid + ">
</div>');
//]]>
  </script>

Catatan: Ganti http://artutorblog.blogspot.com dengan domain blog default kamu di blogger.
Jika kamu punya website/blog selain Blogger bisa juga menggunakan kode di bawah ini.

 <script type='text/javascript'>
  var myoriginalurl = document.createElement("a");
  myoriginalurl.href = window.location;
  var myfburl = &quot;http://myexampleswebsite.com&quot; + myoriginalurl.pathname;
//<![CDATA[
  document.write('<div class="fb-like" data-action="like" data-href="' + myfburl + '" data-width="450" data-height="80" data-layout="standard" data-colorscheme="light" data-send="false" data-share="false" data-show-faces="true" data-size="large" data-kid-directed-site="false">
</div>');
//]]>
  </script>

Ingatlah! Kode diatas hanya bisa digunakan untuk postingan utama, tidak bisa digunakan untuk snippet atau daftar postingan.
Jika Anda bingung dan ingin bertanya, janganlah malu untuk menulisnya di komentar.
Semoga bermanfaat