Membuat Sharing Link Blogspot di Facebook dan Twitter menggunakan Open Graph Meta Tags

Ceritanya 2 minggu lalu diajakin sama Hana untuk ngerombak tampilan Blogspot. Katanya udah mulai bosan dan biar menambah semangat ngeblog, hehe. Template nya kita masih pakai yang gratisan. Ya namanya juga gratisan pasti ada aja bug nya. Dan yang paling sering terjadi adalah meta tag untuk sharing di Facebook dan Twitter yang sering ngaco.

I've been there to, ngutak-ngatik sampai tengah malam. Meskipun udah coba untuk nyimpen backup dari template sebelumnya, ternyata aku masih menemukan bug nya. Jadi biar nggak bolak-balik benerin aku coba tulis di blog. Jadi biar nggak nulis tentang per-traveling-an melulu, sekali-kali nulis tentang per-coding-an ^_^

Let's start!

Facebook Meta Tag

• Buka halaman Blogger > Theme > Edit HTML 
• Di setiap template biasanya ada comments tag <!-- [ Social Media Meta Tag ] --> tambahkan code berikut tepat di bawah comments tag tersebut
  

• Klik Save Theme
• Untuk melakukan tes buka halaman Facebook Sharing Debugger lalu masukkan salah satu link artikel yang mau dites. Kemudian klik Debug
  
  
  

• Jika masih terdapat error di bagian Link Preview coba cek ulang code nya kembali ke langkah pertama, lalu di halaman Facebook Sharing Debugger klik Scrape Again
• Kita bisa langsung cek melalui halaman utama Facebook > Create Post lalu masukan link yang mau kita share. Sayangnya kalau melalui post Facebook, Meta tag yang kita tambahkan tidak akan langsung aktif alias masih nge-cache. Jadi lebih baik melalui halaman Facebook Sharing Debugger
  
  

Twitter Meta Tag

• Buka halaman Blogger > Theme > Edit HTML 
• Di setiap template biasanya ada comments tag <!-- [ Social Media Meta Tag ] --> tambahkan code berikut tepat di bawah code Facebook metatag
  
  
• Klik Save Theme
• Untuk melakukan tes buka halaman Twitter Card Validator lalu masukkan salah satu link artikel yang mau dites. Kemudian klik Preview Card
  
  
  
• Jika ingin link yang muncul menggunakan thumbnail gambar yang berukuran kecil, ganti code pada baris pertama summary_large_image menjadi summary. Kemudian tes lagi menggunakan Twitter Card Validator
  
  
  

Anyway, setelah menulis ini ternyata saya baru ingat kalau saya sudah pernah bikin tutorial ini 3 tahun yang lalu! Ini link nya. Kalau lihat dari hasilnya masih ada yang nge-bug terutama di bagian yang ada tanggal postingannya, keliatan kurang rapi gitu. Jadi anggap aja ini versi termutakhir. Hahaha. Kampanye #dirumahaja membuatku terlalu produktif (tapi kurang berfaedah).