Cara membuat AMP Social Share di Blogspot - Ramai Beud

Blogspot memang tidak di dukung oleh AMP namun kita masih bisa menggunakannya. Ada banyak para blogger blogspot telah menggunakan template AMP pada blognya. Termasuk juga Ramai Beud yang telah berpindah ke Template AMP sepenuhnya. Kali ini ramai beud mau buat artikel tutorial tentang cara membuat AMP Social Share di Blogspot.

Apa itu AMP Social Share ? ini adalah sebuah tombol sosial media yang bisa di gunakan untuk mempermudah pengunjung membagikan artikel pada blog kita melalui akun media sosial mereka. Tentu cara penerapan tombol share di blog AMP dengan blog dengan template reguler berbeda. Karena seperti kebanyakan template reguler blogspot untuk membuat tombol share bisa di percantik dengan tambahan kode javascript.

AMP Social Share

Lalu untuk halaman blog dengan template AMP, bagaimana cara membuat AMP Social Share di Blogspot ? Baiklah, mari kita mulai.

Membuat AMP Social Share di Blogspot

Seperti pada artikel sebelumnya yang juga membahas tentang template AMP pada blogspot, bahwa untuk membuat tambahan aksesoris untuk template amp kita wajib menyertakan ekstensi javascript khusus dari AMP Page. Begitu halnya dengan cara membuat tombol share AMP ini maka kita akan menggunakan ekstensi yang mendukung hal ini.



Pertama yang harus di lakukan adalah menerapkan ekstensi khusus javascript AMP Social share di bagian atas kode </head>. Berikut kode javascript yang harus di pasang atau di letakan pada bagian atas kode </head> yang di maksud.

<script async="async" custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>

Kemudian setelah itu pada bagian kode <data:post.body/> anda bisa menambahkan script HTML seperti berikut ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='amp-social-share'>
    <amp-social-share expr:data-param-url='data:blog.canonicalUrl' height='35' type='twitter' width='45'/>
    <amp-social-share expr:data-param-url='data:blog.canonicalUrl' height='35' type='gplus' width='45'/>
    <amp-social-share expr:data-param-url='data:blog.canonicalUrl' height='35' type='linkedin' width='45'/>
    <amp-social-share expr:data-param-url='data:blog.canonicalUrl' height='35' type='pinterest' width='45'/>
    <b:if cond='data:blog.isMobileRequest'>
<amp-social-share data-share-endpoint='whatsapp://send' expr:data-param-text='&quot;Checkout - &quot; + data:blog.pageTitle +  data:blog.canonicalUrl' height='35' type='whatsapp' width='45'/>
      </b:if>

Setelah itu tambahkan kode css di bagian amp custom style seperti berikut ini.

amp-social-share[type=twitter]{background-color:#55acee;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;background-size:18px 18px;transition:all .4s ease-out}
amp-social-share[type=gplus]{background-color:#dc4e41;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;background-size:18px 18px;transition:all .4s ease-out}
amp-social-share[type=facebook],amp-social-share[type=linkedin]{border-radius:2px;background-size:18px 18px;transition:all .4s ease-out}
amp-social-share[type=facebook]{background-color:#3b5998;-moz-border-radius:2px;-webkit-border-radius:2px}
amp-social-share[type=linkedin]{background-color:#0077b5;-moz-border-radius:2px;-webkit-border-radius:2px}
amp-social-share[type=whatsapp]{border-radius:2px;background-size:18px 18px;transition:all .4s ease-out}
amp-social-share[type=whatsapp]{background-color:#009933;-moz-border-radius:2px;-webkit-border-radius:2px}
amp-social-share[type=pinterest]{background-color:#bd081c;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;background-size:18px 18px;transition:all .4s ease-out}

Nah sekarang anda bisa menyimpan hasil editan di atas, kemudian coba akses halaman blog AMP anda, apakah berhasil atau tidak. Jika anda masih belum berhasil silahkan kembali lagi ke artikel ini untuk melihat apakah anda sudah benar menerapkan script di atas pada template AMP blogspot anda.

Demikianlah artikel tentang bagaimana cara membuat tombol share di blog AMP atau AMP Social Share di blogspot. Semoga berguna dan bermanfaat buat kita semua.