Cara Memasang Share Button Addthis Dengan Counter Pada Blog Amp

Tentu saja ini menjadi sebuah kabar bangga untuk pengguna AMP HTML dengan adanya share button AddThis. Karena dengan ini sekarang kita sanggup menampilkan counter atau jumlah sharing sosial media dengan desain yang eye catching.

Share button AddThis pun menawarkan akomodasi untuk kustomisasi tombol-tombol share sosmed apa saja yang ingin ditampilkan, termasuk dengan warna, bentuk, dan lainnya.

Nah sekarang saya akan membgikan cara memasang share button AddThis dengan counter pada blog AMP.

1. Langkah Pertama

Silahkan buat akun AddThis DI SINI, bagi yang sudah mempunyai akun berarti anda tinggal Sign in saja untuk masuk ke dashboard AddThis Anda.

2. Langkah Kedua

Silahkan klik sajian Tool, dan klik tombol Add New Tool di kanan atas kemudian pilih Share Buttons dan pilih yang jenis Inline (berderet ke samping). Jika Anda sudah pernah membuatnya berarti Anda tinggal klik pada tool tersebut.

3. Langkah Ketiga

• Pastikan pilihan Jumbo untuk Share Counters
• Label Font Size pakai 26px dan Share Count Font Size pakai 14px
• Untuk Style pilih Modern Fixed-Width
• Button Size pilih Large (32x32)
• Dan centang pada Hide Network Names

Dan perlu diperhatikan: Setelah kustomisasi tampilan selesai, jangan dulu klik tombol Save & Countinue. Tetapi silahkan copy dulu URL halaman tersebut yang tertera pada address kafe browser menyerupai berikut. Yang saya tandai ialah isyarat yang dibutuhkan untuk langkah selanjutnya.

Setelah itu tinggal klik tombol Save & Continue.

4. Langkah Keempat

Sekarang silahkan masuk ke Edit HTML blog Anda kemudian simpan isyarat berikut di atas isyarat </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <script async='async' custom-element='amp-addthis' src='https://cdn.ampproject.org/v0/amp-addthis-0.1.js'/>
 </b:if>

Kemudian silahkan copy isyarat di bawah ini

             <b:includable id='shareAddThis' var='post'>
 <div class='shareAddThis'>
 <amp-addthis data-pub-id='ra-50f568026cf55185' data-widget-id='5c81' expr:data-share-media='data:post.firstImageUrl' expr:data-share-title='&quot;Check out this article: &quot; + data:post.title + &quot; - &quot; + data:post.url' height='63' layout='flex-item'>
 </amp-addthis>
   </div>
 </b:includable>

Dan simpan di atas isyarat <b:includable id='shareButtons' var='post'>

Kode ra-50f568026cf55185 (pub) dan isyarat 5c81 (widgetId) silahkan ganti dengan isyarat yang menyerupai mirip itu pada URL yang didapat pada Langkah Ketiga tadi.

Selanjutnya gunakan isyarat berikut untuk menampilkan tombol AddThis, menyerupai atas judul postingan atau di bawah postingan.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <b:include data='post' name='shareAddThis'/>
 </b:if>

Agar terlihat rapih, silahkan tambahkan CSS berikut pada style amp-custom blog Anda.

 .shareAddThis{margin:0;height:53px;overflow:hidden;}
 .shareAddThis amp-addthis iframe{margin-top:0;margin-left:-8px;}
 @media screen and (max-width:640px){.shareAddThis{height:98px;}}

Selesai.... selamat mencoba.

Share this post