Pasang Addthiss Share Di Blog Valid Amp

Tutorial Pasang Inline Share AddThis Valid AMP Pada Blogger

-AddThis sebagai salah satu tool pihak ketiga yang menawarkan layanan Share Button, sekarang sudah support halaman Google AMP. Dengan memakai komponen amp-addthis, anda sanggup memasang Share Button pada AMP Blogger Template.

Sebenarnya, AMP sendiri sudah menyediakan komponen amp-social-share, namun masih ada beberapa bug. Selain itu, amp-addthis mempunyai beberapa kelebihan dibandingkan dengan amp-social-share. Salah satunya AddThis mempunyai counter untuk menghitung berapa jumlah share yang dilakukan pengguna.

Namun untuk ketika ini, amp-addthis hanya support Inline Share Button saja. Berikut panduan untuk memasang AddThis Share Button pada AMP Blogger.

Mendaftar dan Membuat Share Button Addthis

Pergi ke https://addthis.com, daftar dengan memakai akun google anda. Ikuti langkah pendaftaran, lalu klik Share Button.

Akan muncul area kerja AddThis, pilih Inline dan klik Continue. Pilih social media mana saja yang ingin anda tampilkan pada widget share button. 

Untuk menampilkan total shares, klik ikon 3K pada tab Inline. Kemudian pilih Jumbo pada Share counter type. Lihat gambar di bawah ini:

Selanjutnya pilih tab Behavior (posisi paling ujung), lalu ceklist 'Hide on Homepage'. 

Proses registrasi dan pembuatan widget share button selesai. Klik Active Tool, lalu pada 'my site is' pilih AMP. Maka anda akan mendapat kode penerapan Share Button AddThis untuk halaman AMP anda. 

Kode yang didapatkan anatara lain komponen amp-addthis, dan juga kode HTML untuk widget anda, pola menyerupai di bawah ini:

 <amp-addthis width="320" height="92" data-pub-id="ra-5b75277ba2f63548" data-widget-id="4bg0"></amp-addthis>

Keterangan:

• ra-5b75277ba2f6354

  yakni data pubsliher AddThis anda

• 4bg0

adalah data Widget anda. 

Silahkan simpan kode tersebut untuk pemasangan pada Blogger.

Memasang Inline Share Button AddThis

Untuk memasang Inline Share Button, pergi ke dashboard Blogger.com dan klik Themes - Edit HTML.
Copy dan paste komponen amp-addthis ini sebelum </head> :

 <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"></script></b:if>

Saya akan contohkan cara inject Share Button AddThis diakhir konten artikel. Cari kode <div class="post-footer-line post-footer-line-1"> .

Silahkan copy kode widget AddThis berikut ini, dan paste di bawahnya:

 <div class='clear'/> <b:if cond='data:blog.pageType == &quot;item&quot;'>     <div class='shareAddThis'>     <amp-addthis width="320" height="92" data-pub-id="ra-5b75277ba2f63548"      data-widget-id="4bg0"></amp-addthis> </div> </b:if> 

Ganti ra-5b75277ba2f6354 dengan data pubsliher AddThis anda, dan 4bg0 kode widget anda.
Copy CSS ini, simpan sehabis <style amp-custom='amp-custom'>

   .shareAddThis{margin:0;height:70px;overflow:hidden}.shareAddThis amp-addthis iframe{margin-top:0;margin-left:-8px}  @media screen and (max-width:640px){.shareAddThis{height:98px}} /* full width amp-ad */ .post-body amp-ad {    margin-top: 10px;     margin-bottom: 10px;     margin-left: -10px;     margin-right: -10px;     max-width: 713px;}   @media screen (min-width:768px){.post-body amp-ad {margin-bottom: 10px;     margin-left: -20px;     margin-right: -20px;     max-width: 713px;}}

Setelah selesai, silahkan SAVE perubahan pada template anda.
Untuk mengubah style pada widget anda, silahkan rubah pada Dashboard AddThis. Jika ada pertanyaan, silahkan ejekan di kolom komentar.

Sumber https://www.merpatih.com/

Share this post