Memang apa saja keuntungan dari memasang Facebook Open Graph ? Keuntunganya adalah kita dapat mengatur sesuai keinginan kita ketika link blog/website kita dipublikasikan ke social media Facebook, lalu apa saja yang dapat kita atur tersebut ?

  • Title atau judul
  • Thumbnail atau gambar preview ataupun logo blog kita.
  • Description atau deskripsi tentang blog kita

Perbedaan jelas terlihat antara yang memakai atau tidak memakai Facebook Open Graph

Cara memasang Facebook Open Graph di Nextwapblog
Menggunakan Facebook Open Graph
Cara memasang Facebook Open Graph di Nextwapblog
Tidak Menggunakan Facebook Open Graph

Bagaimana tertarik untuk Tutorial Cara memasang Facebook Open Graph di Nextwapblog jika ya mari kita lanjutkan ke cara membuat Facebook App ID terlebih dahulu untuk blog yang akan kita pasangi Facebook Open Graph.

Pertama kunjungi halaman Facebook Developer kemudian masuk dengan akun Facebook anda, setelah proses login selesai silahkan klik Profile Picture Facebook anda kemudian pilih tambah aplikasi baru. Lihat seperti gambar dibawah ini.

Cara memasang Facebook Open Graph di Nextwapblog

Selanjutnya isi nama aplikasi yaitu dengan nama blog anda. Lihat seperti pada gambar dibawah.

Cara memasang Facebook Open Graph di Nextwapblog

Masukkan captcha code dengan benar dan klik tombol "Kirim" dan selesai

Cara memasang Facebook Open Graph di Nextwapblog
Cara memasang Facebook Open Graph di Nextwapblog
Cara memasang Facebook Open Graph di Nextwapblog

Catat Facebook App ID nya. Lalu bagaimana cara memasangnya ? Pertama salin dan edit syntaks dibawah ini :

  1. 01.
  2. 02.
  3. 03.
  4. 04.
  5. 05.
  6. 06.
  7. 07.
  8. 08.
  9. 09.
  10. 10.
  11. 11.
  12. 12.
  13. 13.
  14. 14.
  15. 15.
  16. 16.
  17. 17.
  18. 18.
  19. 19.
  20. 20.
  21. 21.
  22. 22.
  23. 23.
  24. 24.
  25. 25.
  26. 26.
  27. 27.
  28. 28.
  29. 29.
  30. 30.
  31. 31.
  32. 32.
  33. 33.
  34. 34.
  35. 35.
  36. 36.
  37. 37.
  38. 38.
  39. 39.
  40. 40.
  41. 41.
  42. 42.
  43. 43.
  44. 44.
  45. 45.
  46. 46.
  47. 47.
  48. 48.
  49. 49.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

{% if active_page = 'home_page' %}
<meta property="fb:app_id" content="FACEBOOK-APP-ID-ANDA"/>
<meta property="og:url" content="{{ site.url }}"/>
<meta property="og:type" content="website"/>
<meta property="og:title" content="{{ page_title }}"/>
<meta property="og:description" content="{{ page_description }}"/>
<meta property="og:image" content="HTTP://LINK-LOGO-ATAU-THUMBNAIL-ANDA"/>

{% elseif active_page = 'singlepost_page' %}
<meta property="fb:app_id" content="FACEBOOK-APP-ID-ANDA"/>
<meta property="og:url" content="{{ site.url }}"/>
<meta property="og:type" content="website"/>
<meta property="og:title" content="{{ post.title }}"/>
<meta property="og:description" content="{{ post.content|striptags|slice(0,500) }}"/>
<script>
var getThumbnail = $('.post-content > img').src();
document.write('<meta property=\"og:image\" content=\"' + getThumbnail + '\"/>');
</script>
{% elseif active_page = 'view_video' %}
<meta property="fb:app_id" content="FACEBOOK-APP-ID-ANDA"/>
<meta property="og:url" content="{{ view.link }}"/>
<meta property="og:type" content="video"/>
<meta property="og:title" content="{{ view.name }}"/>
<meta property="og:description" content="{{ view.description }}"/>
<meta property="og:image" content="{{ view.thumb }}"/>
{% elseif active_page = 'view_mp3' %}
<meta property="fb:app_id" content="FACEBOOK-APP-ID-ANDA"/>
<meta property="og:url" content="{{ site.url }}"/>
<meta property="og:type" content="music"/>
<meta property="og:title" content="{{ view.name }}"/>
<meta property="og:description"content="{{ view.description }}"/>
<meta property=\"og:image\" content="{{ view.thumb }}"/>
{% elseif active_page = 'view_apk' %}
<meta property="fb:app_id" content="FACEBOOK-APP-ID-ANDA"/>
<meta property="og:url" content="{{ site.url }}"/>
<meta property="og:type" content="application"/>
<meta property="og:title" content="{{ view.name }}"/>
<meta property="og:description" content="{{ view.description }}"/>
<meta property="og:image" content="{{ view.thumb }}"/>
{% endif %}

Abaikan tulisan berwarna hijau jika anda sudah memasang library jQuery

Ganti tulisan berawarna kuning dengan semantik tag post anda sendiri cari di post.html ada diatas twig code berikut {{ post.content|raw }}. hal ini agar thumbnail yang tampil bisa sesuai dengan postingan saat artikel dibagikan ke Facebook jadi berhati-hatilah

Ganti tulisan bertanda merah diatas dengan Facebook App ID yang tadi telah berhasil anda buat, dan pastikan anda telah masuk akun nextwapblog, untuk selanjutnya

Kemudian tempel syntaks yang tadi telah disalin dan diedit ke Dasbor » Tema » Desktop » Template Editor » header.html diantara html tag "<head>" simpan.

Selalu ingat untuk menempelkanya pada kedua template mobile dan desktop, pada header.html.

Untuk mengetes apakah valid atau tidak nya anda dapat mengunjungi halaman Developer Facebook / Tools / Debug masukkan alamat blog anda dan klik tombol submit, tunggu proses selesai dan jika belum berhasil anda dapat mengklik tombol "Kurangi lagi" untuk me-refresh nya.

Cara memasang Facebook Open Graph di Nextwapblog

Demikianlah Cara memasang Facebook Open Graph di Nextwapblog. semoga dapat membantu anda yang sedang mencari tutoraial ataupun yang hobi meng-otak-atik kode snippet nextwapblog.

How-to Embed Facbook Open Graph Nextwapblog.com Coding Help Tutorial nextwapblog Cara memasang Kumpulan tutorial Nextwapblog