Showing posts sorted by date for query tampilan-share-posting-blog-facebook. Sort by relevance Show all posts

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 arahan <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 arahan 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 

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

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/AVvXsEgRsQRVmAvjTuGDf9xowoad8wRLF2gGL1eZOJ5XCmhVP-O1dCxM-46feChx8LiEKcA0eK22hXLLSMNbI3p-itDQ9nK7VA2RtFWh4Kyk54rezxFkFF-CLGAaF6Eimpyvhuhcvr8XLN9LKnj6/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/AVvXsEgRsQRVmAvjTuGDf9xowoad8wRLF2gGL1eZOJ5XCmhVP-O1dCxM-46feChx8LiEKcA0eK22hXLLSMNbI3p-itDQ9nK7VA2RtFWh4Kyk54rezxFkFF-CLGAaF6Eimpyvhuhcvr8XLN9LKnj6/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 arahan dari AddThis. Bisa juga memakai tombol mengembangkan bawaan blogger, tapi kurang menarik. (blogromeltea.blogspot.com).*

Cara Pasang Meta Tags Open Graph Facebook Di Blog Untuk Share Posting

Cara memasang Meta Tags Open Graph Facebook di Blog untuk Share Posting

SAAT kita share posting atau goresan pena ke Facebook, maka tampilan normalnya di Facebook akan terdiri dari judul, gambar, url, dan deskripsi atau ringkasan goresan pena bab awal, menyerupai ini:

Cara memasang Meta Tags Open Graph Facebook di Blog untuk Share Posting Cara Pasang Meta Tags Open Graph Facebook di Blog untuk Share Posting

Jika tidak tampil normal menyerupai itu, maka tambahkan Open Graph Meta Tags yang akan "generate Open Graph meta tags for title, description, url, and image (if one exists in the post)" kata AddThis mah.

Cara Pasang Meta Tags Open Graph Facebook di Blog

1. Template > Edit HTML

Cara memasang Meta Tags Open Graph Facebook di Blog untuk Share Posting Cara Pasang Meta Tags Open Graph Facebook di Blog untuk Share Posting


2. Copas salah satu isyarat berikut ini di bawah <head> atau di atas isyarat <b:skin> template blog Anda.

KODE #1
 
<!-- Open Graph Meta Tags BEGIN -->
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
  <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.metaDescription'>
  <meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<!-- Open Graph Meta Tags END -->

KODE #2

 <!-- Open Graph Meta Tags BEGIN -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
      <meta content='ID FB ANDA' property='fb:admins'/>
      <meta content='ID APP FB ANDA' property='fb:app_id'/>   
<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>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
</b:if>
<!-- Open Graph Meta Tags END -->


KODE #3

 <!-- Open Graph Meta Tags BEGIN -->
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta property='og:image:width' content='1200'/>
<meta property='og:image:height' content='630'/>
<b:else/>
<meta content='URL LOGO BLOG ANDA' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='og:description'/>
</b:if>
<meta content='app_id' property='fb:app_id'/>
<meta content='fb_admins' property='fb:admins'/>
<!-- Open Graph Meta Tags END -->

3. Save!

Kode pertama dari AddThis. Kode kedua dan ketiga hasil "ngintip" isyarat Open Graph template blog yang tampilan share posting Facebooknya normal.

Cara lain, khususnya mengatasi problem gambar dan deskripsi posting dikala share Facebook, sudah aku share di Cara Mengatasi Tampilan Posting Blog Saat Share Facebook. Wasalam. (http://blogromeltea.blogspot.com/).*

Subscribe to: Posts (Atom)