Working with HTML editor
- Lakukan backup template terlebih dahulu. Buka halaman blogger, Theme > Backup / Restore > Download Theme
- Buka editor HTML. Theme > Edit HTML.
- Kalau udah di sini, we can do any magical thing! Kalau kata Hana, kalau udah mulai ngoding, aku kayak penyihir katanya hahaha.
Twitter Card
Cari sintaks <b:includable id='post' var='post'>Untuk pembuatan twitter card berbentuk thumbnail, tambahkan sintaks berikut dibawahnya:
<meta content='summary' name='twitter:card'/>
Atau jika ingin twitter card nya berbentuk large image, maka sintaks nya seperti berikut (pilih salah satu):
<meta content='summary_large_image' name='twitter:card'/>
Lalu tambahkan lagi sintaks berikut:
<meta content='@yourname' name='twitter:site'/>
<meta content='@yourname' name='twitter:creator'/>
<meta content='www.yoursite.com' name='twitter:domain'/>
<meta expr:content='data:post.firstImageUrl' name='twitter:image:src'/>
<meta expr:content='data:post.title' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<meta expr:content='data:post.sharePostUrl' name='twitter:url'/>

Untuk melakukan debugging, buka halaman https://cards-dev.twitter.com/validator. Copy and paste url link yang akan dites.
Untuk melakukan debugging, buka halaman https://developers.facebook.com/tools/debug/sharing, copy and paste url link yang akan dites. Lakukan Debug, dan klik scrape again jika perubahannya belum terlihat.

Untuk melakukan debugging, buka halaman https://cards-dev.twitter.com/validator. Copy and paste url link yang akan dites.
Setelah itu coba post lewat timeline, muncul ga yah. Muncul doong... kan udah di validasi tadi. Sayangnya kalo lewat Twitter itu ngga ada previewnya, ngga seperti di Facebook.
![]() |
Aloha bisa! |
Facebook Open Graph
Facebook Open Graph
Nah Facebook ini agak tricky, karena dari pengalaman pribadi, saya belum pernah implementasi sendiri meta tag nya Facebook. Jadi saya coba utak-atik dari si template nya. Code berikut udah saya sedikit utak-atik dan berhasil, tapi masih ada kendala di bagian post body nya yang bikin dobel di bagian judul postingan dan tanggal publish. Masih PR, nanti kalau udah bisa akan saya update. Nanti juga mau sekalian saya tambahin data Author nya.
Cari sintaks <!-- [ Social Media Meta Tag ] --> dibawahnya bisa di cek source code nya
Cari sintaks <!-- [ Social Media Meta Tag ] --> dibawahnya bisa di cek source code nya
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:blog.url'>
<meta expr:content='data:post.snippet' property='og:url'/>
</b:if>
<meta content='data:post.body' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:post.body' property='og:title'/>
</b:if>
</b:if>
</b:if>
</b:if>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<b:else/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta expr:content='data:blog.blogspotFaviconUrl' property='og:image'/>
</b:if></b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:post.body' property='og:description'/>
<b:else/>
<meta expr:content='data:post.body' property='og:description'/>
</b:if>
<meta content='test' property='og:site_name'/>
<meta content='andrianiken' property='fb:app_id'/>
<meta content='Niken Andriani' property='fb:admins'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>
Untuk melakukan debugging, buka halaman https://developers.facebook.com/tools/debug/sharing, copy and paste url link yang akan dites. Lakukan Debug, dan klik scrape again jika perubahannya belum terlihat.
No comments
Post a Comment