Cara mudah memasang tombol share whatsapp di bawah postingan blog

Whatsapp adalah sebuah aplikasi chat yang semakin hari kian berkembang fasilitasnya. Selain dapat mengirim nomor handphone, chat, video mapun audio, ternyata whatsapp (WA) juga dapat mengirimkan dokumen dan lokasi penggunanya. 

Di Indonesia, pengguna WA sudah sangat banyak, bahkan BBM pun mulai bergeser digantikan dengan WA. Bagi blogger, memasang tombol share di blogspot merupakan ladang untuk mencari visitor. Cara membagikan blog ke wa caranya cukup mudah, anda hanya perlu menambahkan tombol share whatsapp dibawah postingan blog.

Mengapa harus dipasang di bawah postingan blog? Tujuannya adalah agar setelah pembaca selesai membaca, mereka dapat dengan mudah langsung membagikan artikel yang  telah dibacanya.

Bagi yang bergulat di dalam dunia website, membuat tombol share whatsapp sangatlah perlu adanya, terutama untuk blog atau web yang membuat artikel terkini yang sedang viral/populer, artikel tutorial, artikel fashion, artikel politik dan artikel kesehatan.

Lalu, bagaimana cara memasang tombol share whatsapp di blog? Berikut penjelasan caranya.

Cara memasang tombol share whatsapp di bawah postingan blog

Cara memasang tombol share whatsapp di blog

Cara untuk menambahkan icon whatsapp di blog cukup mudah, anda hanya perlu mengikuti langkah-langkah berikut ini.

Cara memasang tombol share whatsapp ala bung frangki.

Letakkan kode CSS dibawah ini sebelum atau diatas kode  ]]></b:skin> atau jika tidak ada maka cari kode </style>

wa-button{color:#fff;margin:0 auto;padding:0;font-size:14px;font-weight:700}
.wa-button a{color:#fff;margin:0 auto;padding:10px 8px;background:# 4dc247}
.wa-button i{font-weight:400;margin:0 10px 0 0}

Jika sudah, langkah selanjutnya adalah letakan kode HTML dibawah ini berbarengan dengan tombol share sosial media lainnya yang terdapat didalam template masing-masing.

<li class='wa-button'><a data-action='share/whatsapp/share' expr:href='&quot;whatsapp://send?text=&quot; + data:post.title + &quot;%20%2D%20&quot; + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'/> WhatsApp</a></li>

Selanjutnya klik save.

(Baca juga: Cara mudah membuat dan memasang tombol share media sosial di bawah postingan blog)

Cara memasang tombol share ala kompiajaib

Cari kode berikut ini yang terdapat di dalam template, jika tidak ada cari yang mirip-mirip dengannya.

  <data:post.body/>
</b:if>
      <div class='clear'/> <!-- clear for photos floats -->
    </div>

Kemudian, letakkan kode dibawah ini tepat dibawah atau setelah kode yang dicari tadi.

<b:if cond='data:blog.isMobileRequest == &quot;true&quot; and data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
var whatsurl = window.location.href;
document.write('<span style="display:block;font-size: 18px;font-weight: 500;margin-bottom:5px">Share On Whatsapp:</span>\
<a href="whatsapp://send" data-text="Take a look at this awesome website:" data-href="' + whatsurl + '" class="wa_btn wa_btn_l" style="display:none" title="Share On Whatsapp">\
Share</a>\
');
if(typeof wabtn4fg==="undefined"){wabtn4fg=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript";s.src="http://yourjavascript.com/0015517398/whatsapp-button.js";h.appendChild(s);}
//]]>
</script>
</b:if>

Kemudian klik save.

Tombol share Whatsapp (WA) ala blogrolmeta

Masuk kedalam edit HTML, kemudian cari kode sosial media share yang sudah ada didalam template masing-masing, biasanya dibawah kode  <data:post.body/>. Setelah ketemu, masukkan kode dibawah berbarengan dengan sosial media share lainnya.

<!-- Whatsapp Share Buttons Start -->
<script type='text/javascript'>if(typeof wabtn4fg===&quot;undefined&quot;){wabtn4fg=1;h=document.head||document.getElementsByTagName(&quot;head&quot;)[0],s=document.createElement(&quot;script&quot;);s.type=&quot;text/javascript&quot;;s.src=&quot;//yourjavascript.com/09010225501/whatsappblogger.js&quot;;h.appendChild(s);}</script> 
<a class='wa_btn wa_btn_s' expr:data-href='data:post.url' expr:data-text='data:post.title' href='whatsapp://send' style='display:none'>Share</a>
<!-- Whatsapp Share Buttons End -->

(Baca juga: Cara mudah membuat formulir kontak di halaman statis blog)

Share button whatsap ala dzulcyber

Masuk kedalam menu edit HTML, kemudian cari kode  </body>. Setelah ketemu, kemudian masukkan kode berikut ini tepat dibawah kode yang telah dicari tadi.

<script type='text/javascript'>if(typeof wabtn4fg===&quot;undefined&quot;){wabtn4fg=1;h=document.head||document.getElementsByTagName(&quot;head&quot;)[0],s=document.createElement(&quot;script&quot;);s.type=&quot;text/javascript&quot;;s.src=&quot;https://cdn.jsdelivr.net/whatsapp-sharing/1.3.4/whatsapp-button.js&quot;;h.appendChild(s);}</script>

Selanjutnya adalah cari kode <data:post.body/> dan letakan kode share button dibawah ini yang memiliki beberapa ukuran. Tinggal pilih saja.

Share button wa dengan ukuran yang lebar

<a class="wa_btn wa_btn_l" expr:data-href="data:post.url" expr:data-text="data:post.title" href="whatsapp://send" style="display: none;">Share</a>

Share button wa ukuran sedang

<a class="wa_btn wa_btn_m" expr:data-href="data:post.url" expr:data-text="data:post.title" href="whatsapp://send" style="display: none;">Share</a>

Share button wa dengan ukuran kecil

<a class="wa_btn wa_btn_s" expr:data-href="data:post.url" expr:data-text="data:post.title" href="whatsapp://send" style="display: none;">Share</a>

Jika sudah, tinggal klik save saja.

Source:
http://www.bungfrangki.com/2017/06/whatsapp-share-button-for-blogger.html
http://blogromeltea.blogspot.co.id/2016/06/memasang-tombol-share-whatsapp-di-blog.html
http://www.kompiajaib.com/2015/09/memasang-whatsapp-sharing-button-di-blog.html
http://www.dzulcyber.com/2016/04/cara-mudah-pasang-tombol-share-whatsapp.html