Ditulis oleh: Ditulis pada: 5/03/2018
Banyak cara untuk membagikan ide, tulisan, atau opini ke umum, di antaranya dengan memanfaatkan jejaring sosial media atau lainnya. Begitu pun dengan blog, postingan yang dishare ke sosial media merupakan sumber lalu lintas. Dan untuk menjaring visitor dari sosial media, maka diperlukan sebuah tool atau widget yang bisa mempermudah para pengunjung membagikan tulisan kita jika mereka anggap tulisan kita bisa bermanfaat untuk orang lain.Disebutlah share tool atau social share tool yang merupakan kumpulan alat untuk menghubungkan atau membagikan postingan ke berbagai sosial media yang biasanya berupa tombol-tombol dengan berbagai desain yang menarik. Dengan tampilan yang menarik, maka diharapkan para pengunjung akan lebih tertarik untuk membagikan tulisan kita, namun tentu saja faktor utama tetap pada bobot tulisan yang sanggup membuat pengunjung untuk membagikan tulisan tanpa harus disuruh.
Pada AMP sendiri sebenarnya sebelumnya sudah disediakan tombol untuk berbagi yaitu amp-social-share yang cukup membantu mempermudah dalam membagikan tulisan. Dan kini untuk AMP HTML sudah ditambahkan share button dari AddThis yang bisa kita gunakan dengan menampilkan counter atau jumlah share yang telah dilakukan.
Tentu saja ini menjadi sebuah kabar gembira untuk pengguna AMP HTML dengan adanya share button AddThis. Karena dengan ini kini kita bisa menampilkan counter atau jumlah sharing sosial media dengan desain yang eye catching.
Share button AddThis pun memberikan kemudahan untuk kustomisasi tombol-tombol share sosmed apa saja yang ingin ditampilkan, termasuk dengan warna, bentuk, dan lainnya.
Nah kini saya akan membgikan cara memasang share button AddThis dengan counter pada blog AMP.
1. Langkah Pertama
Silahkan buat akun AddThis DI SINI, bagi yang sudah memiliki akun berarti anda tinggal Sign in saja untuk masuk ke dashboard AddThis Anda.2. Langkah Kedua
Silahkan klik menu Tool, dan klik tombol Add New Tool di kanan atas lalu pilih Share Buttons dan pilih yang jenis Inline (berderet ke samping). Jika Anda sudah pernah membuatnya berarti Anda tinggal klik pada tool tersebut.3. Langkah Ketiga
- Pastikan pilihan Jumbo untuk Share Counters
- Label Font Size pakai 26px dan Share Count Font Size pakai 14px
- Untuk Style pilih Modern Fixed-Width
- Button Size pilih Large (32x32)
- Dan centang pada Hide Network Names
Setelah itu tinggal klik tombol Save & Continue.
4. Langkah Keempat
Sekarang silahkan masuk ke Edit HTML blog Anda lalu simpan kode berikut di atas kode</head> atau </head><!--<head/>-->
<b:if cond='data:blog.pageType == "item"'>
<script async='async' custom-element='amp-addthis' src='https://cdn.ampproject.org/v0/amp-addthis-0.1.js'/>
</b:if>
Kemudian silahkan copy kode di bawah ini
<b:includable id='shareAddThis' var='post'>
<div class='shareAddThis'>
<amp-addthis data-pub-id='ra-50f568026cf55185' data-widget-id='5c81' expr:data-share-media='data:post.firstImageUrl' expr:data-share-title='"Check out this article: " + data:post.title + " - " + data:post.url' height='63' layout='flex-item'>
</amp-addthis>
</div>
</b:includable>
Dan simpan di atas kode
<b:includable id='shareButtons' var='post'>Kode
ra-50f568026cf55185 (pub) dan kode 5c81 (widgetId) silahkan ganti dengan kode yang mirip seperti itu pada URL yang didapat pada Langkah Ketiga tadi.Selanjutnya gunakan kode berikut untuk menampilkan tombol AddThis, seperti atas judul postingan atau di bawah postingan.
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='shareAddThis'/>
</b:if>
Agar terlihat rapih, silahkan tambahkan CSS berikut pada
style amp-custom blog Anda.
.shareAddThis{margin:0;height:53px;overflow:hidden;}
.shareAddThis amp-addthis iframe{margin-top:0;margin-left:-8px;}
@media screen and (max-width:640px){.shareAddThis{height:98px;}}
Selesai.... selamat mencoba.