Fungsi Facebook Open Graph dan Cara Memasangnya
Selamat berjumpa lagi sobat blogger tutorial kali ini adalah Fungsi Facebook Open Graph dan Cara Memasangnya.
Facebook open graph merupakan salah satu kode dari meta tag html yang dapat kita pergunakan disesuaikan dengan standar yang diberikan oleh facebook. Kode yang diberikan oleh facebook ini merupakan sebuah kode yang diberikan oleh facebook yang menyimpan informasi khusus yang dapat dibaca atau dikenali oleh plugin facebook. Kode ini merupakan kode yang harus kita pergunakan untuk mengatasi situs atau blog yang tidak dapat tampil pada media sosial facebook, maka dengan mempergunakan kode meta tag html facebook graph ini maka blog kita dapat dikenali dan dapat tampil pada media sosial facebook.
Apa gunanya menyisipkan meta tag Facebook Open Graph?
Penulisan standar diperlukan apabila halaman di-render oleh fasilitas social plugin Facebook seperti ketika ada yang me-like, share, dll. Facebok akan membaca informasi judul, jenis artikel, deskripsi tulisan, url dll, untuk kemudian ditampilkan ringkasannya dalam wall pemakai Facebook yang, misalnya, melakukan share artikel.
Contoh hasil rendering dihalaman Facebook:
Contoh hasil rendering halaman web di Facebook yang menggunakan Facebook Open Graph
Berdasarkan pengalaman, tanpa pemformatan khusus, Facebook bisa merender judul, foto, deskripsi dari meta tag html sebuah halaman website, tapi sering kalau di halaman ada beberapa gambar, maka gambar yang tampil bisa bukan gambar dari artikel yang dimaksud, inilah salah satu kegunaan penulisan Open Graph yang benar.
Dengan meta tag Open Graph yang benar, gambar yang tampil merupakan gambar dari artikel bersangkutan. Bisa disetting untuk gambar default, bagi tulisan yang tidak mempunyai gambar.
Jika blog yang kita kelola memiliki tombol sharing ke media sosial khususnya facebook maka kode facebook graph akan sangat berguna bagi blog kita, kenapa saya bilang seperti itu?, hal ini dikarenakan kode dari facebook graph tersebut akan membaca dan mengenali setiap informasi yang ada pada blog atau situs miliki kita pada saat pengunjung atau kita melakukan sharing artikel pada blog kita ke media sosial facebook.
Beberapa template yang ada dan dapat kita pergunakan pada blog khususnya blogger atau situs kita kemungkinan sudah memiliki kode facebook open graph tersebut. Namun jika template yang kita pergunakan pada blog kita belum memiliki kode meta html facebook open graph maka kita harus menambahkan nya secara manual pada template yang kita pergunakan.
Fungsi Facebook Open Graph dan Cara Memasangnya
Alasan kita harus memasang kode facebook open graph?
Pada saat pengunjung datang ke blog milik kita dan membaca artikel yang kita buat dan pengunjung kita merasa bahwa artikel yang sedang kita buat tersebut bagus lalu pengunjung kita tersebut ingin melakukan sharing artikel yang kita buat ke media sosial facebook, maka pengunjung tersebut akan melakukan sharing ke media sosial facebook dengan tombol sharing yang ada pada blog kita.
Nah pada saat pengunjung kita melakukan sharing artikel kita, maka facebook graph akan menyesuaikan artikel yang di sharing pengunjung kita dengan konten yang kita buat seperti judul artikel, gambar, deskripsi dan url blog kita.
Cara memasang kode facebook open graph
Jika kita memasang tombol facebook sharing pada setiap artikel yang kita buat maka kita harus juga memasang kode facebook open graph ini dan untuk memasang kode facebook open graph ini sangat lah mudah dan tidak ribet loooo. Kita hanya cukup untuk mengikuti langkah-langkah yang saya berikan dibawah ini.
1. Silahkah masuk ke template blog anda dengan cara masuk ke template>edit html
2. Cari kode html </head> dengan cara menekan CTRL+F lalu cari kode yang ada tersebut.
3. Masukkan kode dibawah ini diatas kode </head>
<!--facebook open graph-->
<b:if cond='data:blog.pageType == "item"'>
<meta content='Yonopambungsu' property='fb:admins'/>
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
</b:if>
Kode yang saya berikan ini akan secara otomatis akan melakukan generate gambar, judul dan juga deskripsi artikel yang kita buat pada saat pengunjung blog kita melakukan sharing artikel yang kita miliki. dan jangan lupa ganti kata Yonopambungsu yang diberikan warna merah dengan nama url id facebook anda. untuk mendapatkan alamat ini anda dapat masuk ke profil dari facebook anda dan melihat pada alamat url yang ada.
contoh:
https://www.facebook.com/Yonopambungsu
Untuk melakukan pengetesan apakah kode yang kita tadi sudah terpasang dengan benar maka kita dapat melakukan pengetesan dengan mempergunakan tools yang ada pada alamat berikut ini :
https://developers.facebook.com/tools/debug/
Cukup sekian dulu artikel saya kali ini yang membahas mengenai Fungsi Facebook Open Graph dan Cara Memasangnya. Semoga artikel yang saya berikan ini dapat berguna dan dapat membantu rekan-rekan para blogger yang pernah mengalami masalah yang sama dengan saya yaitu artikel tidak tampil pada saat kita melakukan sharing artikel pada media sosial facebook tersebut.
Selamat berjumpa lagi sobat blogger tutorial kali ini adalah Fungsi Facebook Open Graph dan Cara Memasangnya.
Facebook open graph merupakan salah satu kode dari meta tag html yang dapat kita pergunakan disesuaikan dengan standar yang diberikan oleh facebook. Kode yang diberikan oleh facebook ini merupakan sebuah kode yang diberikan oleh facebook yang menyimpan informasi khusus yang dapat dibaca atau dikenali oleh plugin facebook. Kode ini merupakan kode yang harus kita pergunakan untuk mengatasi situs atau blog yang tidak dapat tampil pada media sosial facebook, maka dengan mempergunakan kode meta tag html facebook graph ini maka blog kita dapat dikenali dan dapat tampil pada media sosial facebook.
Apa gunanya menyisipkan meta tag Facebook Open Graph?
Penulisan standar diperlukan apabila halaman di-render oleh fasilitas social plugin Facebook seperti ketika ada yang me-like, share, dll. Facebok akan membaca informasi judul, jenis artikel, deskripsi tulisan, url dll, untuk kemudian ditampilkan ringkasannya dalam wall pemakai Facebook yang, misalnya, melakukan share artikel.
Contoh hasil rendering dihalaman Facebook:
Berdasarkan pengalaman, tanpa pemformatan khusus, Facebook bisa merender judul, foto, deskripsi dari meta tag html sebuah halaman website, tapi sering kalau di halaman ada beberapa gambar, maka gambar yang tampil bisa bukan gambar dari artikel yang dimaksud, inilah salah satu kegunaan penulisan Open Graph yang benar.
Dengan meta tag Open Graph yang benar, gambar yang tampil merupakan gambar dari artikel bersangkutan. Bisa disetting untuk gambar default, bagi tulisan yang tidak mempunyai gambar.
Jika blog yang kita kelola memiliki tombol sharing ke media sosial khususnya facebook maka kode facebook graph akan sangat berguna bagi blog kita, kenapa saya bilang seperti itu?, hal ini dikarenakan kode dari facebook graph tersebut akan membaca dan mengenali setiap informasi yang ada pada blog atau situs miliki kita pada saat pengunjung atau kita melakukan sharing artikel pada blog kita ke media sosial facebook.
Beberapa template yang ada dan dapat kita pergunakan pada blog khususnya blogger atau situs kita kemungkinan sudah memiliki kode facebook open graph tersebut. Namun jika template yang kita pergunakan pada blog kita belum memiliki kode meta html facebook open graph maka kita harus menambahkan nya secara manual pada template yang kita pergunakan.
Fungsi Facebook Open Graph dan Cara Memasangnya
Alasan kita harus memasang kode facebook open graph?
Pada saat pengunjung datang ke blog milik kita dan membaca artikel yang kita buat dan pengunjung kita merasa bahwa artikel yang sedang kita buat tersebut bagus lalu pengunjung kita tersebut ingin melakukan sharing artikel yang kita buat ke media sosial facebook, maka pengunjung tersebut akan melakukan sharing ke media sosial facebook dengan tombol sharing yang ada pada blog kita.
Nah pada saat pengunjung kita melakukan sharing artikel kita, maka facebook graph akan menyesuaikan artikel yang di sharing pengunjung kita dengan konten yang kita buat seperti judul artikel, gambar, deskripsi dan url blog kita.
Cara memasang kode facebook open graph
Jika kita memasang tombol facebook sharing pada setiap artikel yang kita buat maka kita harus juga memasang kode facebook open graph ini dan untuk memasang kode facebook open graph ini sangat lah mudah dan tidak ribet loooo. Kita hanya cukup untuk mengikuti langkah-langkah yang saya berikan dibawah ini.
1. Silahkah masuk ke template blog anda dengan cara masuk ke template>edit html
2. Cari kode html </head> dengan cara menekan CTRL+F lalu cari kode yang ada tersebut.
3. Masukkan kode dibawah ini diatas kode </head>
<!--facebook open graph-->
<b:if cond='data:blog.pageType == "item"'>
<meta content='Yonopambungsu' property='fb:admins'/>
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
</b:if>
Kode yang saya berikan ini akan secara otomatis akan melakukan generate gambar, judul dan juga deskripsi artikel yang kita buat pada saat pengunjung blog kita melakukan sharing artikel yang kita miliki. dan jangan lupa ganti kata Yonopambungsu yang diberikan warna merah dengan nama url id facebook anda. untuk mendapatkan alamat ini anda dapat masuk ke profil dari facebook anda dan melihat pada alamat url yang ada.
contoh:
https://www.facebook.com/Yonopambungsu
Untuk melakukan pengetesan apakah kode yang kita tadi sudah terpasang dengan benar maka kita dapat melakukan pengetesan dengan mempergunakan tools yang ada pada alamat berikut ini :
https://developers.facebook.com/tools/debug/
Cukup sekian dulu artikel saya kali ini yang membahas mengenai Fungsi Facebook Open Graph dan Cara Memasangnya. Semoga artikel yang saya berikan ini dapat berguna dan dapat membantu rekan-rekan para blogger yang pernah mengalami masalah yang sama dengan saya yaitu artikel tidak tampil pada saat kita melakukan sharing artikel pada media sosial facebook tersebut.
Belum ada tanggapan untuk "Fungsi Facebook Open Graph dan Cara Memasangnya"
Post a Comment