Skip to main content

Cara Memasang Share Button AddThis Dengan Counter Pada Blog AMP

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
Dan perlu diperhatikan: Setelah kustomisasi tampilan selesai, jangan dulu klik tombol Save & Countinue. Tetapi silahkan copy dulu URL halaman tersebut yang tertera pada address bar browser seperti berikut. Yang saya tandai adalah kode yang diperlukan untuk langkah selanjutnya.


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 &lt;/head&gt;&lt;!--<head/>--&gt;


<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'/>
</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='&quot;Check out this article: &quot; + data:post.title + &quot; - &quot; + 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 == &quot;item&quot;'>
<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.

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:


PrivacySitemap
©2021 KOMPI AJAIB