Membuat Tombol Share Artikel Ke Whatsapp di Halaman Blog

Membuat Tombol Share Whatsapp di Halaman Blog - Tombol share artikel selama ini memang banyak digunakan oleh para blogger  untuk mendukung dan mengoptimalkan Mesin Pencari (SEO) guna memudahkan pengunjung blog untuk menyebarkan informasi dari isi kontent atau artikel. Umumnya tombol share banyak di tempatkan dibawah postingan artikel, tetapi tidak menutup kemungkinan tombol share di tempatkan paling atas postingan artikel ini tergantung selera pemilik blog. Untuk tombol share yang saya bahas kali ini adalah tombol share Whatsapp, kenapa harus tombol share whatsapp. Pengguna Whatsapp Mobile menurut berita dari bbc setiap bulannya satu miliar pengguna whatsapp, dan setiap harinya terdapat 42 miliar pesan dan 250 juta video. Dari data tersebut artinya tombol share whatsapp perlu dipasang di setiap postingan artikel, Jika pengunjung blog mengeklik tombol share whatsapp maka akan semakin meningkatkannya popularitas dan peringkat blog di halaman hasil pencarian (SERP).

Cara Memasang Tombol Share Whatsapp

Cara Memasang tombol share wahtsapp sebenarnya cukup mudah, caranya hanya dengan memasukkan kode script  ke dalam template dengan tambahan Cascading Style Sheet (CSS). Tombol share whatsapp dan css yang saya pakai ini menyesuaikan dengan tampilan tombol share yang lain seperti Facebook, Google Plus, Twitter dan Linkedin. Untuk melihat tombol share whatsapp ini hanya bisa bisa terlihat di versi mobile karena saya menambahkan script tambahan hanya bisa dilihat di versi mobilenya.

Berikut ini cara memasang WhatsApp Share Button di blog seperti saya lakukan di blog ini:

1. Buka Template ->> Edit HTML
2. Cari (Ctrl+F) kode social share yang sudah dipasang, biasanya di bawah kode <data:post.body/>
3. Copy Paste kode HTML dibawah ini, Pastekan kode di bawah kode <data:post.body/>
   

   <div class='spinner'>     
   <li><a class='fb-ico' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url  + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook'/> <span class='sit'>Facebook</span></a></li>
   <li><a class='twi-ico' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url  + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank' title='Tweet Tweet'><i class='fa fa-twitter'/> <span class='sit'>Twitter</span></a></li>
   <li><a class='go-ico' data-title='Google+' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' target='_blank' title='Share on google+'><i class='fa fa-google'/> <span class='sit'>Google</span></a></li>
   <li><a class='linkedin-ico' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank' title='linkedin Share'><i class='fa fa-linkedin'/><span class='sit'>Share</span></a></li>
   <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
   <li><a class='bitz' expr:data-href='data:post.url' expr:data-text='data:post.title' href='javascript:window.location=waCurrentPage();' rel='nofollow' title='Share on whatsapp'><i class='fa fa-whatsapp'/> <span class='sit'>Whatsapp</span></a></li>
   </b:if>
   </div>

4. Copy Paste kode CSS dibawah ini, Pastekan di bawah kode  <style type='text/css'> kode css.... </style> 

   .spinner{margin:80px auto auto;}
   .spinner li{list-style:none; display:inline;}
   .spinner li a{color: #fff; border-radius:6%; font-size: 14px; font-weight: 600; line-height:42px; padding: 10px 12px;}
   .spinner li a{margin-right:4px;}
   a.fb-ico{background:#3B5998;}
   a.linkedin-ico{background:#0976b4;}
   a.twi-ico{background:#19BFE5;}
   a.go-ico{background:#D64136;}
   a.bitz{background:#23A215;}
   .sit{margin-left:3px;}
   .spinner li a i{font-size:15px;}
   a:hover.fb-ico, a:hover.twi-ico, a:hover.go-ico{opacity:8;}
   .post-snippet:before{content:attr(data-snippet)margin:0 0 10px;padding:4px 0;}
   .fa-google-plus:before{content:"\f0d5"}
   .fa-google-plus-square:before{content:"\f0d4"}
   .fa-facebook:before{content:"\f09a"}
   .fa-twitter:before{content:"\f099"}
   .fa-plus:before{content:"\f067"}
   .fa-linkedin-square:before{content:"\f08c"}
   

5. Simpan perubahan template anda, Sekarang Tombol Share WhatsApp sudah terpasang di Bawah Postingan Blog. Silakan cek dengan membuka blog Anda di HP. Untuk contoh script tombol share diatas anda bisa lihat tampilan blog ini versi mobilenya.