Pages

Kamis, 10 April 2014

Pasang Facebook Open Graph Untuk Blogspot

0 komentar


Meta Tag Facebook
 
Pasang Facebook  Open Graph Untuk Blogspot ok? Sebelum hurai lebih lanjut mengenai pemasangan open graph ini mungkin ada satu persoalan yang akan timbul, iaitu Apa itu Facebook Open Graph .

Umum mengetahui Facebook merupakan  media sosial yang paling terbesar di dunia ini. Tidak menghairankan jika budak yang berumur lingkungan 10 tahun  sudah memiliki akaun Facebook.

Pihak Facebook telah menetapkan meta tag -nya yang tersendiri. Untuk Apa Facebook berbuat demikian ? Ini bagi memastikan setiap entri yang anda ping di Facebook akan menjadi lebih efektif kerana mengikut penetapan yang disediakan oleh pihak Facebook.

Masalah Gambar Tak Muncul
Pernahkah anda mengalami masalah seperti ini iaitu apabila ping entri di Facebook ia hanya memaparkan url sahaja. Manakala imej dan description tidak muncul. Contohnya seperti ini :

Ping adibsite

Punca ? Hal ini berlaku disebabkan tiada kod Facebook Open Graph dalam template blogspot. Jadi apabila ping, Facebook tidak dapat menerima maklumat sepnuhnya dari blog anda justeru masalah ini akan muncul. Oleh itu, perlunya memasang Facebook  Open Graph di template masing-masing.

Secara jujurnya cara ini cukup mudah, anda hanya perlu copy dan paste serta isi beberapa maklumat sahaja. Jom ikuti langkah di bawah ini.

Teknik Memasang Open Graph Facebook


Langkah 1 :
Log in dashboard > design > HTML  (Jangan Lupa Backup Dulu Template)

Langkah 2 :
Cari kod ini -

<b:include data=blog name=all-head-content/>

Langkah 3 :
Salin kod di bawah ini -


             <!-- facebook opengraph area by blogspot.com -->

<b:if cond=data:blog.pageType != &quot;index&quot;>
<meta expr:content=data:blog.title property=og:site_name/>
<meta expr:content=data:blog.pageName property=og:title/>
<meta content=article property=og:type/>
<b:else/>
<meta expr:content=data:blog.title property=og:title/>
<meta content=blog property=og:type/>
</b:if>
<meta expr:content=data:blog.metaDescription property=og:description/>
<meta expr:content=data:blog.canonicalUrl property=og:url/>
<b:if cond=data:blog.postImageThumbnailUrl>
<b:else/>
<meta content=YOUR-IMAGE-URL property=og:image/>
</b:if>
<meta content=Masukkan ID FB Anda property=fb:admins/>
<meta content=en_US property=og:locale/>
<meta content=en_GB property=og:locale:alternate/>
<meta content=id_ID property=og:locale:alternate/>

<!-- end facebook opengraph area by blogspot.com -->

Paste-kan kod tersebut di bawah kod langkah 2.

Langkah 4 :
Save dan selesai.

Maaf belum selesai lagi, anda lupa nak isi ruangan yang disediakan. dalam kod di atas anda perlu isi untuk memastikan open graph ini berkesan.

Di  YOUR-IMAGE-URL  gantikan dengan url gambar homepage yang bersesuaian dengan blog anda.

Manakala untuk ID FB anda isilah dengan nombor ID Facebook anda.

Siap. Selesai.

Hmmm, Macam mana  nak cari ID Facebook. Ini mungkin satu lagi persoalan yang akan muncul. Kalau anda search di google mungkin ada 1001 cara bagi mencari kod ID Facebook. Mungkin ada cara yang senang dan ada juga cara yang susah.

Oleh yang demikian aku buatkan satu tool untuk cari ID Facebook anda dengan mudah.

  • Pertama buka halaman profil facebook anda dan salin alamat profil FB.
Contoh : facebook[dot]com/adibsite 
  • Kemudian salin perkataan selepas tanda ( / )  bold kan itu contoh adibsite.
  • Buka halaman INI . Masukkan nama tesebut di ruang yang disediakan iaitu di bahagian atas dan klik get details.
  • Kemudian salin kod ID tersebut dan tampalkan di ruangan app id dalam open graph di atas.

Selepas anda selesai melakukan semua langkah di atas. Cuba ping entri anda di Facebook. Jika anda ikut langkah di atas ini dengan betul insyaAllah akan menjadi. Hasilnya seperti ini :

open graph


Sekian tutorial ini. [Jangan lupa untuk subscribe pula, hehehehe ]

Serius, lama betul tak kemaskini blog ini.

Leave a Reply