Tutorial Sharethis-Cara pasang emoji reaksi pengunjung pada postingan di Blog

Untuk menambah keterlibatan pengunjung terhadap postingan di blog, kamu dapat menambahkan emoji sebagai tombol reaksi perasaan atau pendapat pengunjung terhadap isi postingan blog. Apakah pengunjung/pembaca kamu suka atau kurang suka dengan materi postingan kamu. Jenis Emoji ini beragam ada emoji senang, sedih, kesal, histeris, bahkan marah.

pasang reaction button pada postingan Blog

Emoji hanya dipasang di halaman postingan saja. Untuk memasang emoji reaksi pengunjung terhadap postingan blog, kamu bisa berkunjung ke halaman Sharethis.

Mulai dari postingan ini, saya akan mulai menulis beberapa materi tutorial Sharethis. Pada Sharethis terdapat beberapa tools yang berguna untuk blog kamu. Alat penayang (Publisher Tools) yang ada di Sharethis sebagai berikut.

  • ShareButtons
  • ShareButtons for Wordpress
  • FollowButtons
  • FollowButtons for Wordpress
  • ReactionButtons
  • ReactionButtons for Wordpress
  • Social A/B
  • Viral Notifications
  • Email List Builder
  • GDPR Compliance Tool


Tutorial Sharethis-Cara pasang emoji reaksi pengunjung pada postingan di Blog

Sekarang kamu akan menyimak materi cara pasang widget reaction buttons di blog. Berikut langkah-langkahnya.

1. Buka halaman Sharethis.
2. Klik Menu Publisher Tools.
3. Klik Opsi ReactionsButtons.

4. Klik tombol "Get Reaction Buttons".
5. Pada jendela pop-up "We value your privacy" klik opsi "I Accept".
6. Konfigurasi tampilan reactions buttons yang kamu ingin tampilkan.

Tutorial Sharethis-Cara pasang tombol reaksi pengunjung pada postingan di Blog


7. Setelah konfigurasi selesai, klik menu "Register & Get Code".
8. Untuk pemakaian pertama kali, kamu perlu melakukan pendaftaran di Sharethis.


9. Setelah isi semua form yang diperlukan, klik opsi "Get The Code".
10. Baca petunjuk pemasangan widget dengan benar.

petunjuk instalasi pasang widget reaction buttons sharethis di blog

11. Pertama, copy-paste kode HTML berikut sebelum kode </head>.


<script src='//platform-api.sharethis.com/js/sharethis.js#property=5b20281670570d001b5d2448&amp;product=inline-reaction-buttons'/>

Gantilah kode 5b20281670570d001b5d2448 dengan kode penayang Sharethis kamu.



Kesalahan yang biasa terjadi
Jika kamu copy-paste dari kode HTML yang diberikan di halaman Sharethis, setelah kamu simpan tema biasanya kamu akan dapat pesan kesalahan. Pada kode HTML Sharethis itu kamu perlu tambahkan kode amp; seperti contoh kode HTML di atas. Selain itu, kamu tidak perlu Parse kode HTML sharethis yang diberikan.


12. Kedua, Copy-paste kode HTML berikut ke baris HTML dimanapun kamu mau tempatkan widget reaction buttons tersebut.


<div class='sharethis-inline-reaction-buttons'/>

Untuk kode HTML Sharethis yang dimodifikasi, kamu bisa coba kode HTML berikut.


<div class='share-message'>
<p class='share-text'>Apa Reaksimu?</p>
</div>
<div class='sharethis-inline-reaction-buttons'/>

Tambahkan pula kode CSS berikut sebelum kode HTML ]]></b:skin>.


.share-message{text-align:center;margin:0;position:relative}.share-message:before{z-index:1;content:"";width:100%;height:1px;background:#ccc;position:absolute;left:0;margin-top:10px}.share-text{display:inline-block;margin:0;font-family:"Roboto Slab","Times New Roman",Times,serif;font-weight:700;color:#afafaf;text-transform:uppercase;font-size:14px;background:#fff;z-index:1;position:relative;padding:0 10px
}

Kamu bisa ganti tulisan "Apa Reaksimu?" dengan kata-katamu sendiri yang menarik.

Hasil penerapan kode widget reaction buttons yang saya gunakan seperti ini.

Tutorial Sharethis Cara pasang widget reaksi pengunjung pada postingan Blog

Nah, kalau setelah pemasangan kode, ternyata widget reaction buttons juga muncul di homepage (beranda) maka kamu perlu tambahkan kode HTML kondisional. Sehingga widget reaction buttons hanya tampil pada halaman postingan/artikel blog saja. Jadi kode widget reaction buttons akan jadi seperti ini.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-message'>
<p class='share-text'>Apa Reaksimu?</p>
</div>
<div class='sharethis-inline-reaction-buttons'/>
</b:if>

Sementara itu, ini contoh kode HTML kalau kamu gabungkan kode widget reactions buttons dengan widget related posts.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-message'>
<p class='share-text'>Apa Reaksimu?</p>
</div>
<div class='sharethis-inline-reaction-buttons'/>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src="&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;" type="text/javascript"></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div>
</b:if>

Seperti yang sudah dibahas di atas, selain widget reaction buttons masih banyak alat penayang Sharethis yang bisa kamu terapkan. Silahkan eksplore sendiri ya sebelum tutorial Sharethis berikutnya saya terbitkan.

Nah itulah Tutorial Sharethis-Cara pasang emoji reaksi pengunjung pada postingan di Blog. Semoga bermanfaat.
Saria Bakti

Seorang Blogger sejak 2015. Senang berbagi informasi yang dapat meningkatkan Imunitas Tubuh.

Posting Komentar

Lebih baru Lebih lama