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.
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.
11. Pertama, copy-paste kode HTML berikut sebelum kode </head>.
<script src='//platform-api.sharethis.com/js/sharethis.js#property=5b20281670570d001b5d2448&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.
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 == "item"'>
<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 == "item"'>
<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 != "true"'>
</b:if>
<script expr:src=""/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"" type="text/javascript"></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</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.