Adi Sumaryadi - Bicara IT dan Internet

Memasang Gambar, Judul dan Deskripsi pada Facebook Share

pada Rabu, 22 Juni 2011 06:11 WIB

Facebook memang menjadi daya tarik tersendiri untuk urusan memperbanyak kunjungan, bagaimana tidak, dengan hadirnya facebook share membuat kita semakin mudah saja untuk memasang link di website kesayangan kita di facebook sehingga memungkinkan teman-teman kita untuk mengunjungi web kita, namun terkadang facebook mengambil judul, gambar dan deskripsi website kita dengan benar, yaa namanya juga mesin. Oleh karena itu facebook ternyata sudah membuat dokumentasi supaya website ataupun URL yang dishare secara otomatis memberikan informasi kepada facebook.

Dalam istilahnya Facebook memberikan dokumen seperti ini adalah Open Graph, Untuk mengubah halaman web Anda menjadi Open Graph, Anda harus menambahkan tag Buka Grafik <meta> protokol dan tombol Seperti untuk halaman Web Anda.

Tag memungkinkan Anda untuk menentukan informasi terstruktur tentang halaman web Anda. Semakin banyak informasi yang Anda berikan, semakin banyak peluang halaman web Anda dapat muncul dalam Facebook saat ini dan di masa depan. Berikut ini adalah contoh untuk halaman film yang akan dishare ke facebook :


<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="fb:admins" content="USER_ID"/>
<meta property="og:description"
content="A group of U.S. Marines, under command of
a renegade general, take over Alcatraz and
threaten San Francisco Bay with biological
weapons."/>
...
</head>
...
</html>

Jika beberapa meta diatas sudah kita lengkapi, maka ketika kita share difacebook otomatis akan memberikan informasi kepada facebook dengan benar maka akan menghasilkan gambar seperti dibawah ini:

 


Untuk beberapa object, masuk akal untuk menentukan meta data tambahan, seperti lokasi restoran. Kita dapat menambahkan sebanyak banyak og:-diawali properti seperti yang kita inginkan untuk menyediakan konteks tambahan tentang halaman web kita.