Cara Memasang Tombol Share di Postingan Blog (Twitter, Facebook, G+)

Tombol share atau share button adalah tombol yang bisa di gunakan pengunjung blog, baik itu untuk menilai dan membagikan artikel saudara ke situs sosial media seperti Twitter, Facebook, Google+, DLL. Namun pada artikel tentang cara memasang tombol share di postingan blog, saya hanya akan membagikan tombol share Twitter, Facebook, dan Google plus saja.

Widget share buttons ini hanya akan ada pada tampilan postingan artikel saja (Tampilan utuh artikel). Pada saat di halaman jenis lain  seperti home, search, label, dan archive, widget ini tidak akan tampil. Karena agar susunan masing-masing tombol tidak kacau, walau pun begitu sebaiknya anda jangan mengubah nilai apa pun di dalam masing-masing tombol tadi.

Sebelum memasang tombol share button, perhatikan beberapa hal berikut:

1. Jika sudah memasang tombol G+ pada blog saudara, maka tidak perlu lagi memasang plugin API G+ seperti ini :

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

1. Jika belum pernah memasang plugin API Google+ ini, maka simpan script tadi tepat di atas kode </head> pada edit HTML/ Edit Template.

Setelah hal-hal di atas telah diperhatiakn dengan baik, silahkan ikuti langkah-langkah di bawah ini :

• Login akun blogger saudara
• Pilih menu Template --> Edit Html
• Copy kode di bawah ini


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table border='0'><tbody><tr>
    <td><a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="07Riki">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></td>
<td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/></td>
<td><g:plusone expr:href='data:post.url' size='medium'/></td>
</tr></tbody></table>
    </b:if>

• Ganti 07 Riki dengan ID/Nama akun twitter saudara
• Jika ingin memasang di bawah judul postingan atau di atas artikel, cari kode  <div class='post-header-line-1'/> dan simpan kode yang sudah di copy tadi tepat di ATASnya. Kalau <div class='post-header-line-1'/> tidak ketemu maka cari kode <data:post.body/> dan simpan kodenya tepat di BAWAH <data:post.body/>.
• Jika ingin memasang di bawah artikel, cari kode <data:post.body/> lalu letakan kode tadi tepat di BAWAHnya. 
• Simpan template dan lihat hasilnya.

Jika kode <data:post.body/> lebih dari satu, Saudara bisa coba pasang salah satunya dulu. Jika tidak tampil segera pindahkan kode ini ke kode yang lainya lagi.

Jika saudara melakukan langkah-langkah di atas dengan benar, seharusnya tombol share tersebut ada pada artikel saudara.