Februari 04, 2012

Memasang Button Count Sosial Media Pada Post

share button count facebook twitter google plus stumbleupon

Situseo Blog : Button count berfungsi untuk menghitung jumlah post yang di share oleh pengunjung blog kepada jejaring sosial akun mereka, seperti facebook, google plus, twitter dan StumbleUpon, button count yang akan kita pasang sekarang ini adalah gabungan dari kesemuanya.

Untuk tampilan button count seperti screen shot diatas atau live-nya seperti yang saya pergunakan pada bagian bawah post (kalau belum saya rubah). Script yang akan kita pasang ini merupakan script yang saya ambil dari tiap developer masing-masing sosial media, baik itu button share count facebook like, button share count twitter, button share count google plus dan button share count stumbleupon.

Dibawah ini adalah script yang akan menampilkan button atau tombol-tombol share count sosial media, Untuk pemasangan pada bagian posting, berikut ini adalah caranya :
  1. Masuk Design - Edit HTML
  2. Ceklist Expand Widget Templates
  3. Jika perlu lakukan backup template, dengan cara mendownload full template untuk menghindari kesalahan yang dilakukan.
  4. Copy kode sibawah ini dan letakan dibawah <div class='post-header-line-1'/> atau diatas kode <data:post.body/> jika ingin ditampilkan dibawah judul post atau diatas bagian posting, untuk menempatkan dibawah bagian post, letakan kode tersebut dibawah kode <data:post.body/>
  5. Untuk penempatan posisi kanan atau kiri, kalian ganti kode yang berwarna hijau dengan left atau right

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div style='float:right;padding:5px;'>
<table border='0'><tbody><tr>
<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=110&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:110px; height:21px;'/></td>
<td><g:plusone expr:href='data:post.url' size='medium'/></td>
<td><a class='twitter-share-button' href='https://twitter.com/share'>Tweet</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script></td>
<td><su:badge layout='1'/><script type='text/javascript'> 
(function() { 
var li = document.createElement(&#39;script&#39;); li.type = &#39;text/javascript&#39;; li.async = true; 
li.src = &#39;https://platform.stumbleupon.com/1/widgets.js&#39;; 
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(li, s); 
})(); 
</script>
</td>
</tr></tbody></table></div></b:if>

Spesial untuk menampilkan button share count google plus, kalian harus menambahkan kode dibawah ini diatas kode </head>

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

Save template kalian dan lihat hasilnya.

Jika sebelumnya pernah memasang tombol google plus 1 pada template blog kalian, sebaiknya dihapus dulu, untuk mengetahui posisi button plus 1 yang dipasang terdahulu, kalian bisa membaca post Memasang Tombol Plus 1 Pada Post dengan cara meng-klik link tersebut.

Semoga bermanfaat,

13 Diskusi untuk Memasang Button Count Sosial Media Pada Post

9 Februari 2012 01.21  

terima kasih tutorialnya mas ,
salam kenal ,
sudi kiranya berkunjung ke blog saya .
jangan lupa follback yah

10 Februari 2012 15.09  

sudah saya coba berkali2 Mas, tp gak bisa juga.

10 Februari 2012 23.53  

@julak : hanya akan tampil pada halaman post, jika ingin tampil pada semua hlaman hapus kode ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>

=====

</b:if>

apa itu yang dimaksud tidak berfungsi scriptnya? jika bukan coba script tersebut letakan dibawah kode sebelumnya ceklist expand template

<div class='post-footer-line post-footer-line-1'>

sebagai patokan untuk mencarinya yang bergaris tebal, bagian post footer biasanya ada beberapa keterangan, perhatikan angka 1 dan biasanya ada beberapa line 1, 2, 3, dan lihat kode bagian bawahnya, letakan script tersebut dibawah line 1, 2 atau 3

semoga bisa membantu

13 April 2012 06.58  

kang, ane tanya lagi :D
kok ane dah pasang tu script tapi gak mau muncul yah?
sudah saya pasang di header-line-1, di pot.body. tetep gak mau muncul.. masalahknya kenapa yah? apa template ane?

14 April 2012 00.46  

@Andika Zulfa S <div class='post-footer-line post-footer-line-...'>

biasanya ada 2 atau 3, coba kamu tempatkan pada yang terakhir

14 April 2012 17.32  

@Mas Dalang


trimakasih kang, sudah bisa..
tapi kok gak masuk ke facebook yah kalo udah nge like?
biasanya kan ada tulisan " namasaya menyukai tautan..
--linkygsayasukai " di profil kita kalo like gitu kang
itu kenapa yah?

15 April 2012 03.26  

@Andika Zulfa S script masih berjalan baik, untuk like pada fb jika tombol sudah di klik akan langsung masuk ke fb, pada tombol langsung bertambah angkanya

13 Juni 2012 14.12  

makasih buat sharenya sob.. salam kenal. Ryan Mika

14 Juni 2012 00.51  

@Ryan Mika salam kenal juga...terima kasih

16 Juni 2012 21.30  

makasih ya sob,, ane terapin ini

16 Juni 2012 21.31  

makasih sob..

17 Maret 2013 12.55  

Ok kang.. sdah diperaktekin.. Alhamdulillah berhasil..

kodenya sy letakkan dibawah
div class='post-footer-line post-footer-line-1'

21 April 2014 23.42  

Makasih Mas, Udah ta pasang tutorial ini on my Blog

Posting Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

rate this post
beri nilai posting ini
Terima kasih,

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top