Tutorial Lengkap Menambahkan Tombol Share pada AMP Blogspot
Tutorial Menambahkan Tombol Share pada AMP Blogspot
Sosial Media Button sebagai Promosi
Social Share Button merupakan element penting dalam sebuah halaman website. Dengan menambahkan Sahre Button, memungkinkan visitor website kita membagikan artikel atau konten web ke social media yang mereka miliki.Dengan mereka membagikannya ke akun sosial media, sama dengan mereka melakukan sebuah promosi. Ini tentu sangat menguntungkan untuk bisnis kita.
Untuk menambahkan Share Button, kita perlu menambahkan beberapa script khusus ke dalam tag <body>. Ada beberapa tool pihak ketiga yang bisa dimanfaatkan dengan mudah, seperti AddThis, ShareThis, AddtoAny, dan lain-lain.
Tapi, tidak semua bisa diimplementasikan pada sebuah halaman web berbasis AMP HTML, kecuali AddThis. Pasalnya, untuk menggunakan tool tersebut, harus menanam sebuah JavaScript di dalam template web kita. Ini akan membuat halaman AMP menjadi tidak valid.
Tapi, sebenarnya AMP Project sendiri sudah menyiapkan sebuah script bernama <amp-social-share> yang bisa kita gunakan untuk menambahkan Social Share Button pada halaman AMP, termasuk Blogger.
Tutorial AMP Social Share
Untuk menambahkan Share Button pada web berbasis AMP sangatlah mudah. Cukup menambahkan script <amp-social-share> pada tag <head>, dan memanggilnya di <body>.
Kali ini saya akan menjelaskan tutorial untuk penempatan pada AMP Blogger.
Buka dashboard Blogger, lalu pilih Themes - Edit HTML. Kemudian paste script di bawah ini sebelum </head>
<b:if cond='data:blog.pageType == "item"'>
<script async='async' custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'/>
</b:if>
Selanjutnya, kita akan meletakan kode <amp-social-share> pada bagian akhir artikel. Cari <b:includable id='share-tool' var='post'> (Jika belum ada, aktifkan terlebih dahulu widgetnya), lalu paste kode ini tepat dibawahnya:
<div>
<amp-social-share data-param-app_id='1234567890' expr:data-param-quote='data:post.title' height='36' type='facebook' width='36'/>
<amp-social-share expr:data-param-text='data:post.title + " via @username"' height='36' type='twitter' width='36'/>
<amp-social-share expr:data-param-media='data:blog.postThumbnailUrl' height='36' type='pinterest' width='36'/>
<amp-social-share height='36' media='(max-width: 640px)' type='whatsapp' width='36'/>
<amp-social-share expr:data-param-text='data:post.title + " - Read Me"' height='36' media='(max-width: 640px)' type='line' width='36'/>
</div>Note:
- Ubah 1234567890 dengan app_id akun facebook anda.
- dan @username dengan username Twitter yang anda miliki.
- Kode di atas hanya akan menampilkan button Facebook, Twitter, Pinterest, WhatsApp dan Line Messenger saja. Komentar di bawah untuk mendapatkan Social Share lainnya.
Setelah itu, tempatkan kode di bawah ini sebelum </article> atau DIV terakhir sebelum artikel. (Setiap template akan berbeda)
<b:if cond='data:blog.pageType == "item"'>
<b:include name='amp-social-button'/>
</b:if>Untuk proses terakhir, klik Save.
Mengubah Tampilan Icon
Untuk mengubah tampilan semua icon dibawah menjadi bulat, tambahkan CSS ini pada <amp-custom>
amp-social-share.rounded {border-radius: 50%;background-size: 60%;}Lalu tambahkan attribut
class="rounded" pada setiap tag <amp-social-share. . ., sehingga akan menjadi:
<amp-social-share class="rounded" data-param-app_id='1234567890' expr:data-param-quote='data:post.title' height='36' type='facebook' width='36'/>Untuk mengubah warna semua icon, copy CSS berikut.
amp-social-share.colored {background: blue}
Sehingga apabila anda menginginkan icon menjadi bulat dan berwarna biru, tulis kode menjadi seperti di bawah ini:
<amp-social-share class="rounded colored" data-param-app_id='1234567890' expr:data-param-quote='data:post.title' height='36' type='facebook' width='36'/>
Native Share Dialog
Jenis system ini akan menampilkan UI berbagi jika pengguna melihat dokumen AMP menggunakan Chrome di Android. Lihat gambar.
Tambahkan kode berikut ini:
<amp-social-share type="system"></amp-social-share>Sekian artikel mengenai Tutorial Lengkap Menambahkan Tombol Share pada AMP Blogspot. Menambahkan amp social share sangat penting dilakukan lho!
Semoga bermanfaat :)