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 memberikan layanan Share Button, kini sudah support halaman Google AMP. Dengan menggunakan komponen amp-addthis, anda bisa 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 memiliki beberapa kelebihan dibandingkan dengan amp-social-share. Salah satunya AddThis mempunyai counter untuk menghitung berapa jumlah share yang dilakukan pengguna.

Namun untuk saat 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 menggunakan akun google anda. Ikuti langkah pendaftaran, kemudian 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), kemudian ceklist 'Hide on Homepage'.

Proses pendaftaran dan pembuatan widget share button selesai. Klik Active Tool, kemudian pada 'my site is' pilih AMP. Maka anda akan mendapatkan instruksi penerapan Share Button AddThis untuk halaman AMP anda.

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


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

Keterangan:

ra-5b75277ba2f6354 adalah 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 setelah <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 ajukan di kolom komentar.