Cara Bikin Button social share di Blog AMP

Perlukah tombol social share di blog?

Dalam sebuah postingan blog biasanya terdapat tombol berbagi atau social share, entah berada diatas, dibawah, ataua dibuat secara melayang. Namun tujuannya adalah sama yaitu untuk memudahkan pembaca dalam membagikan artikel tersebut ke dalam komunitasnya.

Keuntungan yang bisa didapat oleh pemilik blog adalah dapat meningkatkan jumlah pengunjung. Selain itu juga ada kebanggaan tersendiri jika bisa saling berbagi memberikan informasi yang bermanfaat bagi orang lain melalui tulisan di blog.

Social share ini bermacam-macam misalnya bagikan ke Facebook, Twitter, Instagram, Linkedin, Pinterest, Email, dan lainnya.

Namun mengingat jumlah pemakai smartphone yang semakin meningkat dan mereka juga menjelajahi internet termasuk blog menggunakan smartphone. Dan hampir smartphone yang digunakan tersebut terpasang aplikasi messaging populer yaitu Whatsapp.

Aplikasi Whatsapp ini semakin hari semakin banyak penggunanya terlebih setelah meredupnya dominasi BBM yang sempat beken beberapa waktu lalu. Whatsapp tidak hanya digunakan untuk keperluan komunikasi saja, namun juga untuk kegiatan bisnis dan promosi yang efektif.

Nah kepopuleran Whatsapp ini bisa kita manfaatkan untuk menjangkau lebih luas lagi pembaca blog kita. Caranya bagaimana?

Dengan memasang tombol berbagi ke Whatsapp maka pengunjung atau pembaca artikel bisa langsung membagikan artikel tersebut kepada teman, saudara, atau WAG. Penasaran cara pasangnya?

Cara membuat social share valid AMP

Pada umumnya setiap template Blogger sudah disertakan tombol berbagi/social share, namun tidak semuanya sudah terdapat share Whatsapp. Untuk itu kamu perlu merombak sedikit template yang kamu miliki agar memilikinya.

Baiklah teman Pemula tidak perlu berlama-lama, dikutip dari laman kompiajaib-nya mas Adhi, dan jika kamu mempunyai blog valid AMP dan ingin memasang tombol berbagi termasuk Whatsapp, kamu bisa mengikuti langkah-langkah berikut ini yaitu :

• Masuk ke dashboard Blogger
• Kemudian pilih menu theme atau tema
• Carilah kode </head> untuk memudahkan kamu bisa menggunakan tombol CTRL + F
• Setelah ketemu salin dan tempelkan kode berikut tepat diatas kode </head>
• (Jika kode sudah ada, kamu bisa melewati langkah ini)

<b:if cond='data:blog.pageType == &quot;item&quot;'>

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

</b:if>

• Kemudian salin dan tempelkan kode berikut ini di bagian CSS template :

/* Social Share */

.sharethis{position:relative;margin:20px 0;padding:0;font-size:0}

.sharethis .tw,.sharethis .gp,.sharethis .pi,.sharethis .fb,.sharethis .li,.sharethis .wa,.sharethis .ta,.sharethis .sms,.sharethis .em{width:11.111111%;height:30px;line-height:30px;margin:0;text-align:center;display:inline-block;float:left}

.sharethis amp-social-share{vertical-align:middle}

.sharethis .tw{background-color: #55acee;}

.sharethis .gp{background-color: #dc4e41;}

.sharethis .fb{background-color: #3b5998;}

.sharethis .pi{background-color: #bd081c;}

.sharethis .li{background-color: #0077b5;}

.sharethis .wa{background-color: #25d366;}

.sharethis .ta{background-color: #3c5a77;}

.sharethis .sms{background-color: #ca2b63;}

.sharethis .em{background-color: #000;}

• Setelah itu carilah kode seperti berikut ini :

<b:includable id='shareButtons' var='post'>

............

............

............

</b:includable>

• Jika sudah ketemu, salin dan tempelkan kode berikut di bawah kode </b:includable>

<b:includable id='share-tool' var='post'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='sharethis'>

<div class='tw'>

<amp-social-share height='20' type='twitter' width='20'/>

  </div>

<div class='gp'>

<amp-social-share height='25' type='gplus' width='25'/>

  </div>

<div class='fb'>

<amp-social-share data-param-app_id='254325784911610' height='20' type='facebook' width='20'/>

  </div>

<div class='pi'>

<amp-social-share expr:data-param-media='data:post.firstImageUrl' height='25' type='pinterest' width='25'/>

  </div>

<div class='li'>

<amp-social-share height='25' type='linkedin' width='25'/>

  </div>

<div class='ta'>

<amp-social-share height='20' type='tumblr' width='20'/>

  </div>

<div class='wa'>

<amp-social-share data-share-endpoint='whatsapp://send' expr:data-param-text='&quot;Check out this article: &quot; + data:post.title + &quot; - &quot; + data:post.url' height='15' type='whatsapp' width='15'/>

</div>

<div class='sms'>

<amp-social-share height='15' type='sms' width='15'/>

</div>

<div class='em'>

<amp-social-share height='25' type='email' width='25'/>

</div>

<div class='clear'/>

</div>

</b:if>

</b:includable>

Tinggal selangkah lagi pemasangan tombol social share selesai. Jika langkah diatas sudah dilakukan semua maka selanjutnya adalah saatnya memasang kode untuk menampilkannya.

Untuk menampilkan tombol social share ini tergantung dari selera masing-masing ya, kalau Saya cenderung suka memasangnya dibawah artikel. Untuk kodenya adalah sebagai berikut :

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<b:include data='post' name='share-tool'/>

</b:if>

Sudah selesai?

Jika sudah jangan lupa untuk klik tombol simpan tema atau theme agar semua perubahan tadi bisa tersimpan dengan baik. Selanjutnya silahkan cek di artikel blog apakah tombol social share yang telah dibuat tadi sudah muncul atau belum. Dan tradaaaa, caranya cukup mudah kan?

Berbagi :