Memasang Tombol Share Facebook, Twitter, Google Plus, dan WhatsApp (WA)

Baca Juga

CARA memasang widget social share Facebook, Twitter, Google Plus, dan WhatsApp (WA) di bawah posting blog.

Yang unik dari kode social share berikut ini adalah tambahan tombol share ke WhatsApp. Selain cara berikut ini, kita juga bisa gunakan AddThis yang sangat lengkap, termasuk untuk berbagi ke WA.

Khusus tombol share WA hanya muncul saat blog dibuka di HP. Di desktop tidak muncul.

Demonya, silakan buka halaman ini di HP Anda. Lihat bagian bawah, ada tombol share Like, Share, Twitter, Google Plus, dan WhatsApp.

Cara Pasang Tombol Social Share di Bawah Posting Blog

1. Template > Edit HTML
2. Copy & Paste kode berikut ini di bawah kode <data:post.body/> yang kedua atau ketiga.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='margin:10px 0'>
<div style='float:left;margin:5px 20px 5px 5px;'>
<div class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' data-width='90' expr:data-href='data:post.url'/>
     </div>
<div style='float:left;margin:7px; 0 0 0'>
<div class='facebook-share'>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
  </div>
<div style='float:left;margin:7px; 0 0 0'>
<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
</div>
<div style='float:left;margin:7px; 0 0 0'>
<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'/>
</div>
<div style='float:left;margin:7px; 0 0 0'>
<!-- 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;https://googledrive.com/host/0BwMMDqbfGy7Od3UtLTRJcncwQ1U&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 -->
     </div>
  <div class='clear'/>
</div>
</b:if>

3. Save Template!

Jika Anda hanya membutuhkan tombol share to WhatsApp doang, maka kodenya yang harus ditambahkan hanya ini:

<!-- 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;https://googledrive.com/host/0BwMMDqbfGy7Od3UtLTRJcncwQ1U&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 -->

Demikian cara Memasang Tombol Share Facebook, Twitter, Google Plus, dan WhatsApp (WA). Good Luck! (http://www.contohblog.com).*