March 27, 2016

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

March 27, 2016

Tombol Share Facebook, Twitter, Google Plus, dan WhatsApp
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).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

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

  1. Ini yang aku dan beberapa kali praktekkan selalu gagal. Thank's untuk ilmunya.

    ReplyDelete
    Replies
    1. sekarang berhasilkah pasang share fb twitter wa-nya?

      Delete
  2. saya coba gak bisa, malah widget yg lain jadi ikutan hancur, mungkin gak cocok sama template saya

    ReplyDelete
  3. thank min, bisa juga, bermanfaat buat blog saya...

    ReplyDelete
  4. Makasih banyak min sangat membantu

    ReplyDelete
  5. ijin paraktek ilmu nya gan

    ReplyDelete

Contact Form

Name

Email *

Message *