Kang Rian
4
Kang Rian
7/25/2013 09:15:00 AM
Meta Tag Open Graph Facebook Kumplit untuk Blogger
Meta Tag Open Graph Facebook Kumplit untuk Blogger
Meta Tag Open Graph Facebook untuk Blogger - Fungsi Meta Tag Open Graph Facebook ini adalah untuk menampilkan Content2 yang bersangkutan dengan Blog kita , ketika Blog kita di Share/Bagikan ke Facebook! mulai dari Deskripsi , Gambar , Judul , Link , dll ..
Demo :
Cara Mengoptimal-kan nya cukup mudah!
1. Cari kode <head> pada Edit HTML , lalu ganti dengan kode di bawah ini :
<head prefix='og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#'>2. Ganti dan Simpan kode di bawah ini , tepat di atas kode </head> :
<b:if cond='data:blog.pageType != "index"'>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='blog' property='og:type'/>
</b:if>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' itemprop='image'/>
<b:else/>
<meta content='http://alamat-gambar-logo-blog-anda.jpg' property='og:image'/>
</b:if>
<meta content='1020412247' property='fb:admins'/>
<meta content='348446671899960' property='fb:app_id'/>
<meta content='id_ID' property='og:locale'/>
Yang harus dirubah dari kode di atas :
- Ganti http://alamat-gambar-logo-blog-anda.jpg dengan Alamat Gambar Logo Blog anda!
- Ganti Nomor 1020412247 yang berwarna biru di atas dengan ID Profil Facebook anda! cari di (http://graph.facebook.com/username_facebook_anda)
- Ganti Nomor 348446671899960 yang berwarna hijau di atas dengan ID Aplikasi Facebook anda!
3. Untuk membuat Link Popup Share Facebook nya , anda tinggal menyimpan Link di bawah ini :
<a href='#' onclick=' window.open( 'https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href), 'facebook-share-dialog', 'width=626,height=436'); return false;'>Bagikan di Facebook!</a>Jadi-nya akan seperti ini : Bagikan di Facebook!
Sekian tentang penjelasan "Meta Tag Open Graph Facebook Kumplit untuk Blogger" yang saya bahas kali ini , semoga bermanfaat .. Happy Blogging sob! #enjoy
Kang Rian Ikuti
Web & Graphic Designer - Berpengalaman sejak 2010, fokus membantu Perusahaan / UMKM agar dikenal secara Global melalui Website Profesional & Desain yg Menjual.
Cek. Jasa-Design.web.id
Cara Cepat Belajar Pure CSS3 Animation.
Hello world, Pada kesempatan kali ini Kang Rian ingin berbagi ilmu secara instan di dalam 1 halaman membahas seputar CSS Animasi ( Support ...
Merubah Blog NoFollow menjadi DoFollow
Oke sebelumnya terima kasih udah Mampir di Blog kecil ku ini, pada Kesempatan ini Saya akan menjelaskan bagaimana Cara Merubah Blog NoFollow...
Cara Membuat Sitemap atau Daftar Isi Otomatis di Blog
Sitemap / Daftar isi adalah Tempat dimana sebuah halaman menyimpan beberapa Link / Tautan yang mentaut ke Halaman-halaman / Postingan-postin...
tapi tergantung karakteristik template juga, cara sudah benar kadang² ada template yg terbca oleh web jejaring berbeda :2thumbup
BalasHapusiya betul , tapi untuk blogger sendiri insya allah akan bekerja , jika open graph setiap jejaring yang berbeda terinput meta tag nya ..
Hapusterima kasih telah berkunjung kang beben :shakehand
mesti yah pake meta content alamat gambar???
BalasHapusoh ya mas, sebenarnya sy lagi cari yg deskripsinya muncul pas share diFB ituh. punyaku ga muncul" nih
pasang dulu meta tag open graph facebook nya ! ..
Hapusterus cari di Edit HTML
jika sudah ketemu tambahkan tag <p> awal dan akhir ..
tepat nya seperti ini :
[code]<p><data:post.body/></p>[/code]
rubah semua yang ada code <data:post.body/> nya dengan :
[code]<p><data:post.body/></p>[/code]
semoga bermanfaat sob :)
ya memang data:post.body/ ku begituh semuaaa ada tag p nya
Hapus:bingung wadduhh !! ..
Hapusudah coba belum simpen kode dibawah ini tepat sebelum tag <p><data:post.body/></p>
[code]<b:if cond='data:post.snippet'><meta expr:content='data:post.snippet' name='description'/></b:if>[/code]
ane work pake meta tag snippet ituu !! :) selamat mencoba sob ..
yang ini kudu di coba nih.....
BalasHapuskemaren pernah pasang bginian.. mungkin kurang komplit jadi ane remove lagi dh....
monggo kang abdul.. :) , semoga bermanfaat!
Hapusane gugling juga lagian :D hhi , dari pada gak jadi berkah yah mendingan ane share aja ..
betul itu kang.. seep dah...
Hapuskang maaf oot, mau nanya, gimana cara membuat loading pada image seperti blog Anda..?? :request
BalasHapuscek TKP sob ! :D
Hapus[code]https://rian-nurherdian.blogspot.com/2013/06/Membuat-Effect-Loading-Halaman-dengan-sedikit-Bumbu-CSS-Javascript.html[/code]
iya betul tuh kata kang ternak web .. :D
HapusMakasi
Hapus:thumbup mantap nih blognya mas.., klo mau open graph story di app development fungsinya apa ya kang?ane masih bingung dengan development FB
BalasHapuswaduh , belum nyampe sono sob :bingung .. hehehe
HapusKang.. di blog sy pake meta tag dari akang ini.. anehnya pas udah dicustom domain, kita copas link homepage (http://www.surrealdivine.com/) ke facebook ..yang muncul malah ERROR 404 NOT FOUND!
BalasHapusKenapa bisa gitu ya, Kang? Ada saran untuk perbaikannya, Kang?
*kl dicopas ke google+ sih normal2 aja hasilnya.
ditunggu saranna, Kang. Nuhun.