Memasang Share Button Addthis Pada Blog Amp

Baca Juga

Memasang Share Button AddThis Pada Blog AMP - Halo teman blogger, selamat malam. Pada malam ini saya ingin posting. Sebelumnya Saya sudah poating Membuat Sosial Share Buttons Pada Blog Hanya Menggunakan CSS. Dan pada kesempatan kali ini Saya akan coba posting Memasang Share Button AddThis Pada Blog AMP.

Share tool atau social share tool yang merupakan kumpulan alat untuk menghubungkan atau membagikan artikel ke aneka macam sosial media yang biasanya berupa tombol-tombol dengan aneka macam desain yang menarik dan keren, maka dibutuhkan para pengunjung akan lebih tertarik untuk membagikan artikel atau postingan kita, namun tentu saja faktor utama tetap pada bobot goresan pena yang mampu menciptakan pengunjung untuk membagikan artikel kita tanpa harus disuruh.

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

Namun, ketika ini share AddThis memerlukan beberapa hari untuk menampilkan angka sharenya. Makara sesudah kita memasang share ini dan ada yang share artikel kita, kita tidak pribadi melihat angka atau jumlah sharenya. Makara 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 teman ingin Memasang Share Button AddThis Pada Blog AMP sobat, mari kita ikuti langkahnya berikut ini.

1. Langkah Pertama

Silahkan masuk ke Template kemudian Edit HTML, kemudian 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 instruksi berikut di atas instruksi </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 instruksi 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 instruksi <b:includable id='shareButtons' var='post'>

Selanjutnya gunakan instruksi berikut untuk menampilkan tombol AddThis, ibarat 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.....