Thursday, January 11, 2018

Kode Tampilan Share Posting Blog Di Facebook Dan Twitter - Social Meta Tags

Kode Tampilan Share Posting di Facebook dan Twitter  Kode Tampilan Share Posting Blog di Facebook dan Twitter - Social Meta Tags
Kode Tampilan Share Posting Blog di Facebook dan Twitter - Social Meta Tags.

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
Kode Tampilan Share Posting di Facebook dan Twitter  Kode Tampilan Share Posting Blog di Facebook dan Twitter - Social Meta Tags

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 == &quot;item&quot;'>
    <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 == &quot;item&quot;'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'> 
<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).*

Artikel Terkait

Kode Tampilan Share Posting Blog Di Facebook Dan Twitter - Social Meta Tags
4/ 5
Oleh

Berlangganan

Suka dengan artikel di atas? Silakan berlangganan gratis via email