October 19, 2017

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

Romel Tea October 19, 2017

Kode Tampilan Share Posting 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 kode <head> di dalam template blog.

Kode social meta tags ini untuk mengatur tampilan posting yang dibagikan d Facebook & Twitter, agar tampil normal dan menarik.

Dengan kode Social Meta Tags di bawah ini, maka posting atau tulisan 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
share facebook posting blog

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://3.bp.blogspot.com/-j_KZpNHpLlk/WKas0eeRe9I/AAAAAAAAQQM/Cw5nxwsgp7kXBPaGup7RyCP3c4WTjFsywCLcB/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://3.bp.blogspot.com/-j_KZpNHpLlk/WKas0eeRe9I/AAAAAAAAQQM/Cw5nxwsgp7kXBPaGup7RyCP3c4WTjFsywCLcB/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 saya biasa menggunakan kode dari AddThis. Bisa juga menggunakan tombol berbagi bawaan blogger, tapi kurang menarik. (blogromeltea.blogspot.com).*

No comments:

Post a Comment

No Spam, Please!