Memasang Share Button AddThis Pada Blog AMP

Memasang Share Button AddThis Pada Blog AMP - Share tool atau social share tool yang merupakan kumpulan alat untuk menghubungkan atau membagikan artikel ke berbagai sosial media yang biasanya berupa tombol-tombol dengan berbagai desain yang menarik dan keren, maka diharapkan para pengunjung akan lebih tertarik untuk membagikan artikel atau postingan kita, namun tentu saja faktor utama tetap pada bobot tulisan yang sanggup membuat pengunjung untuk membagikan artikel kita tanpa harus disuruh.

Kini untuk AMP HTML sudah ditambahkan share button dari AddThis yang bisa kita gunakan dengan menampilkan counter atau jumlah share yang telah dilakukan. Jadi kita akan tau jumlahnya seberapa banyak orang yang membagikan artikel kita ke sosial media.

Namun, saat ini share AddThis memerlukan beberapa hari untuk menampilkan angka sharenya. Jadi setelah kita memasang share ini dan ada yang share artikel kita, kita tidak langsung melihat angka atau jumlah sharenya. Jadi tidak usah bingung, nanti juga akan muncul jumlah sharenya.

Baca juga: Membuat Social Share Fixed Untuk Blog AMP HTML Dengan Show Hide And Animation

Jika sobat ingin Memasang Share Button AddThis Pada Blog AMP sobat, mari kita ikuti langkahnya berikut ini.

Memasang Share Button AddThis Pada Blog AMP

---

1. Langkah Pertama

Silahkan masuk ke Template kemudian Edit HTML, lalu tambahkan CSS berikut pada style amp-custom blog sobat.

.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;}}

2. Langkah Kedua

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>

3. Langkah Ketiga

Kemudian copy kode di bawah ini

<b:includable id='shareAddThis' var='post'>
<div class='shareAddThis'>
<b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;false&quot;'>
<amp-addthis data-pub-id='ra-50f568026cf55185' data-widget-id='npp1' 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>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;true&quot;'>
<amp-addthis data-pub-id='ra-50f568026cf55185' data-widget-id='nzrd' 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='110' layout='flex-item'>
</amp-addthis>
</b:if>
  </div>
</b:includable>

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

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>

Selesai.....