Kode Tampilan Share Posting Blog Di Facebook Dan Twitter - Social Meta Tags
Blogging Media Sosial
KODE berikut ini dipasang di bawah isyarat <head> di dalam template blog.
Kode social meta tags ini untuk mengatur tampilan posting yang dibagikan d Facebook & Twitter, biar tampil normal dan menarik.
Dengan isyarat Social Meta Tags di bawah ini, maka posting atau goresan pena di blog yang dishare di Facebook dan Twitter akan terdiri dari Judul, Gambar Thumbnail, Summary atau Deskripsi Posting, dan Link Blog.
Tampilan Share Twitter
Tampilan Share Facebook
KODENYA:
Ganti warna merah dengan versi Anda.
<!-- Twitter Card Start -->
<meta expr:content='data:blog.title' name='twitter:site'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.title' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' name='twitter:image:src'/>
<b:else/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicD78WAreP49WZXe0PfzOuk8JCAjiWSbEegE33wAzmWV-qpoqxwck-Lhl27olNFB_QUKBE-j9D8IeFKkiMqy5gYa4Aqaf62Efm8Zd7_V6w5P-7ikDEP1a5DAAQDv51Hrc8df4P1-q0d0VW/s1600/blogpreneur-buku-cover.JPG' name='twitter:image:src'/>
</b:if>
</b:if>
<b:if cond='data:post.firstImageUrl'>
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:post.firstImageUrl' name='twitter:image'/>
<b:else/>
<meta content='summary' name='twitter:card'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
</b:if>
</b:if>
<meta content='@romel_tea' name='twitter:site'/>
<meta content='@romel_tea' name='twitter:creator'/>
<meta expr:content='data:blog.homepageUrl' name='twitter:domain'/>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<!-- Twitter Card End -->
<!-- Facebook OG Meta Tag Start -->
<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: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></b:if></b:if></b:if>
<meta content='blog' property='og:type'/>
<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 content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicD78WAreP49WZXe0PfzOuk8JCAjiWSbEegE33wAzmWV-qpoqxwck-Lhl27olNFB_QUKBE-j9D8IeFKkiMqy5gYa4Aqaf62Efm8Zd7_V6w5P-7ikDEP1a5DAAQDv51Hrc8df4P1-q0d0VW/s1600/blogpreneur-buku-cover.JPG' property='og:image'/>
</b:if></b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet' property='og:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='ID FB Anda' property='fb:admins'/>
<meta content='ID Apps FB Anda' property='fb:app_id'/>
<!-- Facebook OG Meta Tag End -->
Tombol Share Social
Untuk memasang Social Share Button aku biasa memakai isyarat dari AddThis. Bisa juga memakai tombol mengembangkan bawaan blogger, tapi kurang menarik. (blogromeltea.blogspot.com).*
