Cara Membuat Share Buttons Tweet | Facebook Like | Google +1

Cara Membuat Share Buttons Tweet | Facebook Like | Google +1

Kali ini saya akan share Cara Membuat Share Buttons Tweet | Facebook Like | Google +1 dengan mudah. Sedikit mengenai apa yang dimaksud dengan Share Buttons ini.

Share buttons adalah tombol-tombol yang dapat digunakan pengunjung untuk menilai & membagikan link atau konten tertentu yang mereka sukai ke jejaring sosial, baik Facebook, Twitter, Google+, dll. 

Banyak Blogger yang memasang Share buttons ini karena bentuknya yang simple tapi bagus dan tidak memakan tempat di blog sobat.

 

Sebelum memasang Share Buttons, perhatikan beberapa hal berikut :

1. Jika anda sudah memasang widget Facebook like atau Google +1, khususnya yang saya share di blog ini, hapus atau ambil terlebih dahulu kode / scriptnya. 

2. Jika sudah pernah memasang Google+ 1 Button, tidak perlu lagi memasang script plugin API Google +1 seperti berikut :

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

3. Jika belum, pasang script plugin API Google +1 tersebut di atas </head> pada edit HTML/Edit Template. 

Setelah yang di atas sudah selesai kemudian ikuti langkah-langkah berikut :

1. Copy script / 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="tn_robby">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 "tn_robby" dengan Akun twitter anda,

2. Buka halaman edit HTML/Edit Template:

"Design/Layout > klik Edit HTML/Edit Template > Centang (check) "Expand Widget Templates" 

3. Jika ingin memasang di bawah judul posting:

Cari (Ctrl + F) <div class='post-header-line-1'/>, letakkan script/kode tepat dibawahnya. Kalau <div class='post-header-line-1'/> tidak ketemu, cari <data:post.body/> lalu letakkan script / kode tepat diatasnya.

4. Jika ingin memasang di bawah posting/artikel:

Cari (Ctrl + F) <data:post.body/> lalu letakkan script / kode tepat dibawahnya.

5. Save template dan lihat hasilnya.

Semoga Bermanfaat