Cara Memasang Facebook Opened Upward Graph Di Blogspot
Facebook Open Graph sebenarnya adalah kode khusus berupa meta tag HTML yang menggunakan aturan yang disesuaikan dengan standar facebook, kode ini dapat diletakan di template weblog anda baik itu weblog berflatform blogspot, wordpress dan weblog lainnya, kode ini digunakan untuk menyimpan informasi khusus yang dapat dibaca dan dikenali oleh plugin facebook.
Jika anda memasang facebook sosial media sharing pada halaman weblog anda, maka kode facebook opened upwards graph setidaknya harus anda letakan juga di template weblog anda, tujuannya adalah agar facebook dapat membaca dan mengenali setiap informasi yang terdapat di dalam halaman weblog tersebut untuk dishare.
Ketika pengunjung weblog anda melakukan portion halaman artikel postingan tersebut melalui tombol portion facebook yang tersedia, maka facebook akan membaca struktur halaman tersebut untuk mendapatkan informasi konten yang dibutuhkan untuk konten sosial media share. informasi tersebut akan diperoleh melalui meta opened upwards graph yang anda pasang pada kode template weblog anda.
Kurang lebih akan terlihat seperti gambar dibawah ini:
Konten portion akan menyesuaikan dengan halaman weblog atau website yang akan dishare, beberapa bagian penting yang disajikan konten portion adalah:
Namun Jika weblog tersebut tidak memasang tag opengraph pada template blognya maka tampilan konten portion tidak akan mampu menampilkan gambar, terlihat seperti gambar dibawah ini:
Menurut anda mana yang terlihat paling menarik, tentu saja yang dilengkapi gambar, dan memang benar, portion weblog di facebook menggunakan judul disertai gambar yang menarik akan mampu meningkatkan pengunjung untuk mengunjungi weblog anda, oleh karena itu untuk mendapatkan konten portion weblog di facebook lebih menarik disertai gambar maka anda harus memasang facebook opened upwards graph di kode template weblog anda.
beberapa kode opened upwards grap untuk mendukung sosial media portion halaman weblog anda:
1. og:title
kode ini berfungi untuk menyimpan informasi judul artikel weblog yang bersangkutan. jika facebook menemukan dan membaca kode ini, maka akan digunakan sebagai judul konten portion facebook.
Contoh Penggunaan:
Kode ini digunakan untuk menyimpan informasi jenis artikel yang akan anda share, ada banyak sekali go:type yang bisa anda gunakan, secara lengkap anda bisa baca disini.
Contoh Penggunaan:
3. og:description
Kode ini digunakan untuk meletakan informasi descripsi yang akan disertakan di konten portion facebook. untuk weblog berfaltform blogspot anda bisa mengisi meta og:description dengan meta description untuk halaman artikel yang akan dishare.
Contoh Penggunaan:
4.og:image
Kode opened upwards graph ini dapat dapat anda gunakan untuk menyimpan informasi mengenai gambar yang akan digunakan dikonten portion facebook, jika artikel yang dishare mencantumkan gambar maka gambar tersebut harus bisa disertakan dikonten portion facebook secara otomatis. facebook secara otomatis akan menggenerate konten portion dengan gambar yang diambil dari kode opened upwards graph og:image ini.
Contoh Penggunaan:
5. og:url
Tag opened upwards graph ini bisa anda gunakan untuk menyimpan informasi url dari artikel weblog yang akan di portion ke facebook.
Contoh Penggunaan:
7. og:site_name
Kode opened upwards graph ini dapat digunakan untuk meletakan nama situs dari artikel weblog yang akan dishare. kode ini akan dibaca oleh facebook untuk mendapatkan nama situs atau weblog yang melakukan share.
Contoh Penggunaan:
kode ini bisa anda gunakan untuk mengaitkan halaman facebook anda dengan blog, agar setiap interaksi fans page weblog anda terhadap weblog yang anda portion statisticnya dapat diktahui secara detail.
Contoh Penggunaan:
Jika anda ingin menghasilkan konten portion yang menarik dilengkapi gambar maka, selain tombol portion facebook, kode opened upwards graph facebook diatas wajib anda pasang juga pada template blogspot anda.
1. Pasanglah kode opened upwards graph dibawah ini jika didalam halaman artikel anda anda memasang tombol facebook share.
1. Pastikan bahwa di template weblog anda belum terpasang facebook opened upwards graph.
2. Masuk ke akun blogspot anda, dibilah carte du jour sisi kiri pilih carte du jour Template kemudian tekan tombol Edit HTML untuk masuk ke editor template weblog anda.
3. Klik editor template weblog anda, tekan CTRL + F, untuk mengaktifkan fasilitas pencarian, silahkan cari kode :
Jangan lupa Silahkan anda ganti id_facebook dengan id facebook anda, jika kebetulan anda belum memiliki akan facebook, silahkan anda buat dulu akun facebook:
Anda bisa baca: cara membuat akun facebook terbaru
Jika anda sudah memiliki salah satu akun facebook, untuk mendapatkan id facebook anda langkah-langkahnya adalah sebagai berikut:
a. Masuk ke akun facebook anda.
b. pada carte du jour nama anda, kemudian klik kanan, kemudian pilih sub carte du jour "Salin Lokasi Tautan, misal facebook punya saya:
https://www.facebook.com/ajidin
Sebagai contoh facebook punya saya diatas, anda tinggal hapus tulisan https://www.facebook.com/ sehingga hanya menghasilkan idnya saja contoh diatas ajidin, setelah itu silahkan anda ganti id_facebook_anda dengan id anda sebagai contoh id punya saya yaitu ajidin. menjadi kurang lebih seperti ini:
Jika sudah silahkan anda simpan template weblog anda.
5. Untuk mengetes kinerja facebook opened upwards graph yang anda buat, silahkan anda pilih pilih artikel yang anda sertakan gambar didalamnya, tekan tombol facebook portion pada halaman weblog anda tersebut, jika konten facebook portion menampilkan gambar, judul dan deskripsi seperti gambar diatas berarti kode facebook opened upwards graph yang anda pasang sudah benar.
atau anda bisa menggunakan cara lainnya, yaitu dengan mengunjungi halaman object debug facebook.
kemudian silahkan anda masukan url halaman artikel weblog yang ingin anda lihat konten portion facebook untuk halaman tersebut, kemudian tekan tombol debug:
Jika tidak menhasilkan alert fault berarti kode opengrap yang anda pasang sudah benar.
Demikian artikel tentang Cara Mudah Memasang Facebook Open graph di blogspot, semoga bermanfaat.
Jika anda memasang facebook sosial media sharing pada halaman weblog anda, maka kode facebook opened upwards graph setidaknya harus anda letakan juga di template weblog anda, tujuannya adalah agar facebook dapat membaca dan mengenali setiap informasi yang terdapat di dalam halaman weblog tersebut untuk dishare.
Ketika pengunjung weblog anda melakukan portion halaman artikel postingan tersebut melalui tombol portion facebook yang tersedia, maka facebook akan membaca struktur halaman tersebut untuk mendapatkan informasi konten yang dibutuhkan untuk konten sosial media share. informasi tersebut akan diperoleh melalui meta opened upwards graph yang anda pasang pada kode template weblog anda.
Mengenal Kode Facebook Open Graph
Ketika anda mengeujungi dan membaca sebuah halaman situs kemudian anda anggap halaman tersebut patut untuk di portion dan anda mencoba melakukan portion menggunakan tombol facebook sosial media portion yang tersedia di halaman weblog tersebut maka apa yang akan anda lihat selanjutnya?Kurang lebih akan terlihat seperti gambar dibawah ini:
Konten Share Facebook dengan Open Graph
Konten portion akan menyesuaikan dengan halaman weblog atau website yang akan dishare, beberapa bagian penting yang disajikan konten portion adalah:
- Gambar: menyesuaikan dengan gambar yang digunakan pada artikel yang akan dishare
- Judul Artikel: sesuai dengan judul artikel yang akan dishare
- Deskripsi: deskripsi singkat yang mewakili isi artikel
- Url Blog: URL atau alamat weblog yang bersangkutan
Namun Jika weblog tersebut tidak memasang tag opengraph pada template blognya maka tampilan konten portion tidak akan mampu menampilkan gambar, terlihat seperti gambar dibawah ini:
Konten portion facebook tanpa gambar karena weblog tidak memasang opened upwards graph
Menurut anda mana yang terlihat paling menarik, tentu saja yang dilengkapi gambar, dan memang benar, portion weblog di facebook menggunakan judul disertai gambar yang menarik akan mampu meningkatkan pengunjung untuk mengunjungi weblog anda, oleh karena itu untuk mendapatkan konten portion weblog di facebook lebih menarik disertai gambar maka anda harus memasang facebook opened upwards graph di kode template weblog anda.
Berikut Daftar Kode facebook Open graph yang bisa anda gunakan
Apapun blognya baik itu wordpress maupun blogspot, jika anda menyertakan tombol facebook sosial media portion pada halaman weblog anda maka silahkan anda pasang kode opened upwards graph pada template weblog anda.beberapa kode opened upwards grap untuk mendukung sosial media portion halaman weblog anda:
1. og:title
kode ini berfungi untuk menyimpan informasi judul artikel weblog yang bersangkutan. jika facebook menemukan dan membaca kode ini, maka akan digunakan sebagai judul konten portion facebook.
Contoh Penggunaan:
<meta property=”og:title” content=”Tips Memilih Web Hosting yang cocok untuk situs Anda?”/>2. og:type
Kode ini digunakan untuk menyimpan informasi jenis artikel yang akan anda share, ada banyak sekali go:type yang bisa anda gunakan, secara lengkap anda bisa baca disini.
Contoh Penggunaan:
<meta property=”og:type” content=”article”/>
3. og:description
Kode ini digunakan untuk meletakan informasi descripsi yang akan disertakan di konten portion facebook. untuk weblog berfaltform blogspot anda bisa mengisi meta og:description dengan meta description untuk halaman artikel yang akan dishare.
Contoh Penggunaan:
<meta property=”og:description” content=”disini dijelaskan cara memilih spider web hosting yang tepat untuk weblog anda agar anda tidak menyesal!“/>
4.og:image
Kode opened upwards graph ini dapat dapat anda gunakan untuk menyimpan informasi mengenai gambar yang akan digunakan dikonten portion facebook, jika artikel yang dishare mencantumkan gambar maka gambar tersebut harus bisa disertakan dikonten portion facebook secara otomatis. facebook secara otomatis akan menggenerate konten portion dengan gambar yang diambil dari kode opened upwards graph og:image ini.
Contoh Penggunaan:
<meta property=”og:url” content=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0CDRhEnFF9FBugfTz0-A15c3jq5ecFnBWi7dTtVgwsMnmEvtp88pM3qV_qjrEi25wHpPknnnsDFcNrYIc_Pw5gyBxvg06_PhYfHtrzLfRPCqBzWQCBhgS9OqOnTFUxBxGUqZHKdfJJ5nF/s1600/facebook-share-tanpa-open-graph.png”/>
5. og:url
Tag opened upwards graph ini bisa anda gunakan untuk menyimpan informasi url dari artikel weblog yang akan di portion ke facebook.
Contoh Penggunaan:
<meta property=”og:url” content=”http://syafiqgupiel.blogspot.com/2015/11/memasang-facebook-opengrap-di-blogspot.html"/>
7. og:site_name
Kode opened upwards graph ini dapat digunakan untuk meletakan nama situs dari artikel weblog yang akan dishare. kode ini akan dibaca oleh facebook untuk mendapatkan nama situs atau weblog yang melakukan share.
Contoh Penggunaan:
<meta property=”og:site_name” content=”Struktur Kode”/>8. fb:admins
kode ini bisa anda gunakan untuk mengaitkan halaman facebook anda dengan blog, agar setiap interaksi fans page weblog anda terhadap weblog yang anda portion statisticnya dapat diktahui secara detail.
Contoh Penggunaan:
<meta property=”fb:admins” content=”facebook_id_anda″/>
Jika anda ingin menghasilkan konten portion yang menarik dilengkapi gambar maka, selain tombol portion facebook, kode opened upwards graph facebook diatas wajib anda pasang juga pada template blogspot anda.
Cara Memasang Facebook Open Graph pada blogspot anda?
Berikut langkah-langkah memasang kode facebook openg raph yang benar di template blogspot anda:1. Pasanglah kode opened upwards graph dibawah ini jika didalam halaman artikel anda anda memasang tombol facebook share.
1. Pastikan bahwa di template weblog anda belum terpasang facebook opened upwards graph.
2. Masuk ke akun blogspot anda, dibilah carte du jour sisi kiri pilih carte du jour Template kemudian tekan tombol Edit HTML untuk masuk ke editor template weblog anda.
3. Klik editor template weblog anda, tekan CTRL + F, untuk mengaktifkan fasilitas pencarian, silahkan cari kode :
</head4. Letakan kode dibawah ini diatas kode </head
<b:if cond='data:blog.pageType == "item"'>Kode diatas akan menggenerate konten portion facebook secara otomatis menggunakan gambar, judul dan deskripsi (diambil dari meta deskripsi artikel yang akan dishare), gambar yang akan digunakan adalah gambar yang anda portion pada artikel tersebut.
<meta content='id_facebook' 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>
Jangan lupa Silahkan anda ganti id_facebook dengan id facebook anda, jika kebetulan anda belum memiliki akan facebook, silahkan anda buat dulu akun facebook:
Anda bisa baca: cara membuat akun facebook terbaru
Jika anda sudah memiliki salah satu akun facebook, untuk mendapatkan id facebook anda langkah-langkahnya adalah sebagai berikut:
a. Masuk ke akun facebook anda.
b. pada carte du jour nama anda, kemudian klik kanan, kemudian pilih sub carte du jour "Salin Lokasi Tautan, misal facebook punya saya:
https://www.facebook.com/ajidin
Sebagai contoh facebook punya saya diatas, anda tinggal hapus tulisan https://www.facebook.com/ sehingga hanya menghasilkan idnya saja contoh diatas ajidin, setelah itu silahkan anda ganti id_facebook_anda dengan id anda sebagai contoh id punya saya yaitu ajidin. menjadi kurang lebih seperti ini:
<meta content='ajidin' property='fb:admins'/>
Jika sudah silahkan anda simpan template weblog anda.
5. Untuk mengetes kinerja facebook opened upwards graph yang anda buat, silahkan anda pilih pilih artikel yang anda sertakan gambar didalamnya, tekan tombol facebook portion pada halaman weblog anda tersebut, jika konten facebook portion menampilkan gambar, judul dan deskripsi seperti gambar diatas berarti kode facebook opened upwards graph yang anda pasang sudah benar.
atau anda bisa menggunakan cara lainnya, yaitu dengan mengunjungi halaman object debug facebook.
kemudian silahkan anda masukan url halaman artikel weblog yang ingin anda lihat konten portion facebook untuk halaman tersebut, kemudian tekan tombol debug:
Jika tidak menhasilkan alert fault berarti kode opengrap yang anda pasang sudah benar.
Demikian artikel tentang Cara Mudah Memasang Facebook Open graph di blogspot, semoga bermanfaat.
Komentar
Posting Komentar