Pasang Facebook Open Graph Untuk Blogspot

By : Posted on 08/02/2014 - 2:30 am with 5 comments

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 adibsite.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 adibsite.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.

5 comments

Click here for comments

Open graph eh benda ni. Baru tahu..

Sukses sob. Makasih ya tutornya :) Irfan Official

Terima kasih di atas tutorial berguna ini.. boleh lah kami praktiskan...

Salam... rasanya setakat ini, semuanya ok. Tiada lagi tak keluar FB Open Graph. Tq berkongsi info.

Terima kasih gan, baru saja ubah template dan menerapkan open graph :)

1. Gunakan Name/URL untuk komen jika tidak mempunyai akaun Google+.
2. Elakkan Guna Anonymous untuk mengelakkan kekeliruan.
3. Komen anda akan ditapis dahulu sebelum diterbitkan.
4. Terima kasih kepada yang memberi komen.