✔ Tutorial Pasang Addthiss Share Button Valid Amp Blogger

Panduan Memasang Inline Share Button AddThis Valid AMP pada Blogger

AddThis sebagai salah satu tool pihak ketiga yang memperlihatkan 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 dikala 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, referensi menyerupai di bawah ini:

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

Keterangan:

• ra-5b75277ba2f6354  ialah data pubsliher AddThis anda
• 4bg0 ialah 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 sesudah <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 olok-olokan di kolom komentar.

Sumber http://ampidn.blogspot.com

Share this post

Berlangganan update artikel terbaru via email: