Home » Tip Trick Blog » Cara Memasang Share Button AddThis Dengan Counter Pada Blog AMP
7:26:00 PM
0 comments

Cara Memasang Share Button AddThis Dengan Counter Pada Blog AMP

Cara Memasang Share Button AddThis Dengan Counter Pada Blog AMP Tentu saja ini menjadi sebuah kabar gembira untuk pengguna AMP HTML dengan adanya share button AddThis. Karena dengan ini kini kita bisa menampilkan counter atau jumlah sharing sosial media dengan desain yang eye catching.

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

Nah kini 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 memiliki akun berarti anda tinggal Sign in saja untuk masuk ke dashboard AddThis Anda.

2. Langkah Kedua

Silahkan klik menu Tool, dan klik tombol Add New Tool di kanan atas lalu 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 bar browser seperti berikut. Yang saya tandai adalah kode yang diperlukan untuk langkah selanjutnya.


Setelah itu tinggal klik tombol Save & Continue.

4. Langkah Keempat

Sekarang silahkan masuk ke Edit HTML blog Anda lalu simpan kode berikut di atas kode </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 kode 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 kode <b:includable id='shareButtons' var='post'>

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

Selanjutnya gunakan kode berikut untuk menampilkan tombol AddThis, seperti 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.
Labels:
Share: