Jumat, 27 April 2012

Cara Buat/Pasang Share Buttons di Posting Blogger (Like, Tweet, +1)


Facebook like, tweet, Google +1 buttons
Share buttons adalah tombol-tombol yg dapat digunakan pengunjung untuk menilai & membagikan link atau konten tertentu yg mereka sukai ke social media, baik Facebook, Twitter, Google+, dll. Banyak sobat Buka Rahasia Blogspot yg menanyakan tentang share buttons yg saya gunakan di bawah judul posting. Saya menggunakan 3 buttons milik 3 social media yg disusun sedemikian rupa menjadi satu bagian widget. Dulu saya pernah share cara pemasangan Facebook Like Button & Google +1 Button, namun Tweet Button belum. Tetapi karena banyak sobat yg meminta 3 button (tombol) share itu sekaligus menjadi satu widget, oke deh Tweet Button saya lompati dan akan langsung share cara membuat & memasang ketiganya.
buka rahasia blogspot
Masih seperti dua cara sebelumnya, widget ini hanya akan ditampilkan di bagian posting ketika halaman posting dibuka secara utuh serta tidak tampil pada jenis halaman lain (homepage, label, search, archive). Agar susunan, jarak serta tampilan tidak kacau, saya membuat ukuran-ukuran tersendiri pada masing-masing button lalu menyusunnya dengan tabel. So, jangan mengubah nilai apapun di dalam masing-masing button.

Sebelum memasang share buttons, perhatikan beberapa hal berikut:
a.  Jika sudah memasang widget Facebook like atau Google +1, khususnya yg saya share di blog ini, hapus atau ambil terlebih dahulu kodenya. Lihat 2 posting terdahulu untuk mengetahui mana yg harus dihapus.
b. 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>
c. Jika belum, pasang script plugin API Google +1 tersebut di atas </head> pada edit HTML/Edit Template.

Cara Memasang Share Buttons (Facebook Like, Tweet, & Google +1)
Setelah memastikan beberapa hal di atas, pasang widget share buttons dengan langkah-langkah berikut:
1. Copy script/kode berikut:
<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="bukarahasiablog">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 bukarahasiablog buka rahasia blogspotdengan nama akun twittermu.
2. Buka halaman edit HTML/Edit Template:
Design/Layout > klik Edit HTML/Edit Template > Centang (check) "Expand Widget Templates" 
2. Jika ingin memasang di bawah judul posting:
Cari (Ctrl + F) <div class='post-header-line-1'/>, letakkan script/kode tepat di BAWAHnya. Kalau <div class='post-header-line-1'/> tidak ketemu, cari <data:post.body/> buka rahasia blogspot lalu letakkan script/kode tepat di ATASnya.
3. Jika ingin memasang di bawah posting/artikel:
Cari (Ctrl + F) <data:post.body/> lalu letakkan script/kode tepat di BAWAHnya.
4. Save template 'n lihat hasilnya.
5. Done.
NB: Tips tersebut di atas sudah saya coba/terapkan dan berhasil

Sumber: Buka(n) Rahasia Lagi

5 komentar:

  1. Bermanfaat sekali sobat. Bahasa lebih singkat dan lebih mudah dicerna. Terima kasih.

    BalasHapus
  2. Lanjutkan, sukses menanti kita semua.

    BalasHapus
    Balasan
    1. Apalagi kalau lebih cepat, lebih baik kan. He..he...

      Hapus
  3. Mengapa kami baru menemukan di blog ini, sungguh sayang sekali karena selalu ada artikel yang menarik dan berkualis seperti ini? salam sukses

    BalasHapus