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 dengan 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.

Good luck n enjoy your blog's share buttons (Facebook Like, Tweet Button, & Google +1 Button).

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Cara Buat/Pasang Share Buttons di Posting Blogger (Like, Tweet, +1)
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 129 Comment(s):

Anonymous said...

klo di letakan di samping post dgn posisi vertikal.. gmna caranya ?

Rick said...

nice bro...mau dicoba dulu

Free Software, PC Game, etc. Mediafire said...

wah, sudah di post rupanya...
tenkyu gan, tak coba dulu

Paul Boy said...

thanks gan info na,,,, nice blog

Unknown said...

thank's mas..buat saya news

Unknown said...

top dah

Husni ovia wulandari said...

bingung... kok yg keluar cuma yg tweet doang?

Unknown said...

makasih gan tak cobanya dulu

Unknown said...

wah berhasil sob, thanks duat solusi n ilmunya sob, sangat bermanfaat, sukses buat sobat

Zainal Abidin said...

kalau kodenya udah dicari tapi nggak ada bagaimana?

kumpulan artikel menarik said...

button ini sangat bermanfaat buat anak blogger dalam memperkenalkan blognya ... hehhehe kutunggu kunjungan baliknya ya ?

KASMANcahgadon said...

ma kasih mas... nice info...

jual jam tangan said...

info yang menarik..
:D
wajib di coba..
terima kasih mas..
:D

Wisata Bali said...

Terimakasih tutorialnya gan, cukup membantu....

edwinprayoga said...

wah sangat membantu dan panduannya sangat mudah di pahami gAn,

Review dan artikel said...

ini dia yang ane cari-cari,, makasih ganbos,,,

ceritaku tulisanku said...

makasih..langsung aku praktikkin, bermanfaat sekali

Hnd324 said...

NIce info gan,, mampir" gan ke tempat ane...

FLanzka Technology said...

manGtab Bro.. Lanjut///

sipocong said...

Hanya ada 3 kata untuk artikel ini!!!
Mantap. Berhasil. Tengkyu!

hehehe

Najibblog2010 said...

Nice post sob..sippp...sangat membantu.. Thanks ya. .:D

Putra Sragen Indonesia said...

makasih infonya bos....
aq baru belajar blog
kepingin pnya aja,,,kalo gak dpt rank g kecewa
semangat pagi....

sari1099 said...

wah widget like dari facebook belum saya pasang mas, padahal ini peluangnya bagus untuk meningkatkan trafik, terima kasih sudah berbagi ilmu :)

Juel said...

nice artikeL gan..tengkyu inpo nyA....

mr.linkie said...

trims infonya... udah tak praktekin!

zufar AR said...

Kak, mau nanya kalau udah pasang Tombol Like Facebook Otomatis. kaya mana?
di hapus dulu atau bagaimana?

Terima kasih..

Wikarso said...

Terima kasih atas infonya. Sangat membantu...

klikwebsaya said...

mas bro...like fb nya kok hrus di konfirmasi dulu ??

klo.nya ga usah ad konfirm nya gmana?????

kyak di atas ga ada konfirmasi

Unknown said...

@klik: itu kebijakan FB utk meminta konfirmasi berdasarkan link yg hendak di share/like, jadi tidak bisa disetting. beberapa posting saya dulu juga gitu.

Unknown said...

@ZUfar: iya, musti dilepas dulu, kalo tidak nanti dobel & bertabrakan.

klikwebsaya said...

ow,, gitu ya..
makasih pnjelasannya..
maklum msih newbie .. ^_^
slam knal

ihsan saidi said...

kalo mau nambahin send box gmn yya.,,??

tp google plus aku jg ga kliatan., padahal sbelum'a belum kepasang google plus.,

thanks,..

ABP said...

Thnx bgt gan,,skrg di http://limitededition88.blogspot.com/ udah ada.,

Pain Akuto said...

tks gan buat tipsnya @http://www.klikanan.com

Lirik lagu Baru said...

Thanks Gan infonya...
Dah di coba di blog saya,dan hasilnya.Mantabz....:)

Anonymous said...

ijin copas tuk blod ane gan just-thole.blogspot.com
trims triknya maknyus heheh

Alva Nandhika said...

gan ko ga keluar...???...*help

page number said...

wah boleh juga ni.
sekalian gan kalau ada yang mau belajar bikin page number pakai css silihkan kunjungi blog ane.
makasi gan.

Unknown said...

Thanks Sob,..

Vebriyan said...

wah keren ni, sy msh pake bwaan blogger,

habib ismail said...

masa kenapa saya pas nyoba ngelike sendiri postingan saya malah yang muncul di facebook gambarnya banner sitemeter yang notabene ada juga di dalam blog...terus ane coba nge like lagi dengan postingan saya yg lain via tombol dari mas ini juga hasilnya sama gan tapi yg keluar di facebookicon back di blog ane...kalo link dan nama judul udah bener mas..cuma gambar postingan nya yg nylenneh...makasih :)

habib ismail said...

mohon penjelasan dan solusinya mas kira2 solusinya bagaimana gitu,.kalo trik / cara dari mas ini udah sukses dan ga ada kesalahan kok...cuma yang jadi masalah kenapa tiap di klik tombol suka facebooknya yang tampil di halaman facebook itu bukan gambar yang ada di postingan yang di like itu mas,...munculnya malah aneh2...kadang icon back pada blog saya, kadang banner pagerank, kadang banner sitemeter,,pokoknya bukan gambar/foto yang ada di postingan nya mas yang tampil di halaman facebook. terimakasih, hehe maaf mas saya bener2 bingung nih soalnya jadi nanya terus :)

Unknown said...

halo.
itu karena meta snippet yang ditarik oleh Facebook tidak bisa sama dengan deskripsi dan gambar yang diinginkan. Facebok tidak bisa memilih gambar mana dan deskripsi mana yg harus ditampilkan. ini kelemahan Blogger, semua blog blogger juga begitu. Sebenarnya ada solusinya yaitu dengan menambahkan meta dengan format baru ke dalam template blogger. Nanti kalo sudah senggang akan saya tuliskan.

ariKHG said...

makasih brother... berharga banget ni ilmu.. keep posting ya bro :D

habib ismail said...

iya mas ahmad, makasih ane tunggu solusinya hehehe :)

Fazri said...

sip brother.. infonya sngat membantu

waloetz said...

sumpaahh ane berhasil gan...
hehe..
makasih banyakk mas. cuman G+ nya kok ga muncul ya..??

Jennifer aniston said...

Thanks :)

iefathiable said...

Saya mau pasang yang dibawah postingan tapi kok nya ada tiga ya waktu saya cari di HTMLnya. Nah sama paste setelah yang pertama kok nggak ngefek. Saya ganti paste setelah yang ke 2 kok juga nggak ngefek, gitu juga sama yang ke-3. Gimana nih?
Bisanya cuma script plugin API Google +1. Help please....

Unknown said...

mksih gan ilmunya
http://catatan-google.blogspot.com/

Unknown said...

MAKASIH kk berhasil

Halalika said...

permisi, kalau ingin mengetahui siapa saja yang meng-share sebuah postingan di blog, bagaimana??

Auto Submit said...

Blog Buka Rahasianya mantap, padat dan bermanfaat. Salut!
Salam Submit

cerita anak kost said...

masih bingung, ane CTRL D dulu gan, di coba nanti sambil di pahami penletakannya. ok gan, tenkyu

cerita anak kost said...

kalo make scip bukanya tambah berat sob? ane ud berat ni blognya, ada cara lain ga ya?

Peduli AlamKu said...

ane langsung coba gan.

Unknown said...

@cerita: tidak ada, karena script masing2 button penting untuk melakukan share lengkap dengan pop up window dan fitur counter.

Unknown said...

Thanks infonya, simple dan mudah dimengerti, saya pasang widget ini mengikuti petunjuk dari sini, yang lain agak-agak memusingkan. Saran saya buat satu lagi widget bookmark and share button.

Samudera Ilmu : Lautan Ilmu said...

Mas, setelah saya coba malah kolom komentar tidak tampil.
tolong saya mas, gimana solusinya?

Prediksi pemenang Panasonic Gobel Awards 2012 said...

keren sob, ane k tekape buat masang ni widget berguna submit k sosmed :D

andri said...

thanks infonya
sangat terbantu saia

Nurul Mahmud said...

thnks infonya langsung praktek
http://sarjomb.blogspot.com/

BroFahroe said...

Terimaksih,... sudah di-implementasikan di blog saya http://blog.fahroe.web.id/

Cijolang Mania said...

elegant mas ... sangat membantu ... saya share ya ...

Abang Jo said...

terma kasih gan ... hal itu berkerja di blog http://makalahkitasemua.blogspot.com/ ane

Unknown said...

This comment has been removed by the author.

Unknown said...

---->data:post.body/
ada dua, make yg mana?
.thanks

Unknown said...

pake auto readmore ya? coba yang kedua aja. kalo ga jalan baru ke satu. sebenarnya itu cuma masalah dimana dia mau ditampilkan.

sadeyan vcc said...

nice infonya ampuh bgt mastah...

lowongan kerja terbaru hari ini said...

kok ga ada semua tuch kode yang agan sebut..piye dong solusinya..?

eddy said...

Wah infonya maknyus neh, makasih bro

Unknown said...

postingan akang top markotop semua..ijin share ya kang ?

deni said...

Kok Ada Bordernya ya gan ?

Rizky Yoga Abimanyu Triara Wimfield said...

terima kasih

Unknown said...

Sob saya pakai yang ini juga, FB-nya tetap error. Setelah klik, muncul Konfirmasi & setelah klik konfirmasi > window konfirmasi > Klik Suka > Muncul
"Halaman yang Anda minta tidak ditemukan"
"Anda mungkin mengklik tautan yang kedaluwarsa atau salah menuliskan alamat. Sebagian alamat membedakan kapitalisasi."

Bagaimana nih sob? Mohon pencerahannya...

Unknown said...

@Mas Ichsan: maaf mas saya juga ga tau penyebab pastinya. tapi seharusnya kalo pengunjung sudah login facebook, tidak akan muncul window baru seperti itu. Tapi tadi saya cek punya mas Ichsan baik2 aja tuh...

Unknown said...

Yth. Sob Azmi,
Kemarin saya coba sih sepeti itu, dan saya coba klik punya sobat langsung angka like-nya bertambah, bahkan tanpa ada tulisan konfirmasi. Sedangkan punya saya berbeda. Dan anehnya sekarang tidak ada masalah, hanya tetap ada tulisan konfirmasi tidak seperti punya sobat.
Ohya sob, mohon ijin untuk menayangkan artikel yang bermanfaat ini di blog saya. Dan kalau sempat tolong dicek apakah sudah sesuai dengan kaidah atau belum.
Sekian, atas kesediaan serta pencerahannya saya haturkan terima kasih.
ﺸﻜﺮﺍﻜﺜﻴﺮﺍﺠﺰﺍﻜﻢﺍﷲﺒﺨﻴﺮﺍﻠﺠﺰﺍ

Anonymous said...

Tips yg bagus Gan, thanks atas infonya

Unknown said...

tipsnya sangat membantu.. sudah saya pasang.. tapi kok google plusnya gak muncul ya gan??

Zamrud Hijau said...

Info yang baguz sekali untuk disimak.....
Bermanfaat sekali untuk saya....

Mohon kunjungan baliknya yaa....
Dan saya juga sangat berterima kasih sekali kalau anda berkenan FOLLOW dan Backlink Blog sederhana saya.... :-)

( http://zamrudhijau.blogspot.com/ )

Blog Dofollow said...

wahhh... blognya rame amat... BTW good post!

Unknown said...

makasih ilmunya,,,

Alfin Fathurrahman said...
This comment has been removed by the author.
Alfin Fathurrahman said...

Terima Kasih
jangan lupa kunjungi juga :
http://alfinfathurrahman.blogspot.com

Agus F.A said...

Infonya bagus banget.. http://afa-belajar.blogspot.com

Fad said...

Makasih Banyak, Bung

Sāτū Hāτī Sāτū Cīŋτā said...

Siang gan..

Ane udah coba pasang scriptnya, tp ad keterangan

Pesan error XML: Attribute name "data-" associated with an element type "a" must be
followed by the ' = ' character

ksalahannya dmn gan?
Tlng pencerahannya gan, ane newbie

sallam...
Sāτū Hāτī Sāτū Cīŋτā

KALKULATOR RAMALAN CINTA said...

Makasih mas, udah jadi nih bagus banget tombol share buttonnya punya saya, BTW ada ga script share button ke situs sosial yg lain seperti pinterest, plurk, tumblr, digg, reditt, delicious, stumbleupon dll. Biar dapat banyak backlink dan trafik dari situ maksudnya hehe... maaf ya requestnya kebanyakan maklum newbie

Unknown said...

sukses terpasang sob..

Mancing said...

Info mantab! Keep update!

Ahmad Habibullah said...

Assalamualaikum..
Thks gan..
artikelnya bermanfaat..
http://mtktik.blogspot.com/

marsyofie said...

nice artikel sb :)

Zerra Raygatsu said...

Hihihi, ketemu juga pengganti tombol share melayang....
(entah knp tombol share melayang skarang jadi berat loadingnya d blog aq)

Unknown said...

sob.. gimana caranya bikin link back dibawah kotak Admin seperti punya kamu ?

Rizaldi Maulidia said...

Om kenapa yah kalo di blog saya(www.cyber-nets.blogspot.com) border tablenya kelihatan, padahalkan diblog Om ga? kenapa Om? udah saya cek skripnya. padahal bener table bordernya = '0'. kenapa yah om tolong bantu.

dOi lucky said...

Waw,,
bermanfaat gan....
langsung saya coba...

Ferry Maulana said...

thanks :)
ngebantu banget hehe :D

Unknown said...

saya dah coba mas kok gk muncul yah????

BAB said...

ijin pake tutorial mantapnya ya om... mampir yaak

Met R Eyo said...

Assalaamu'alaikum,,
terimakasih kk, berhasil saya pasang di www.dunia-perairan.blogspot.com

Unknown said...

trima kasih for share teman..
tempat saya berhasil

Anonymous said...

Makasih tutorialnya mas...

ptikunm said...

mantapp ijin coba

Adang iskandar said...

Good tipsnya senpurna banget mas....

game keren said...

saya coba dulu sob ,, thanks

Anonymous said...

makasih infonya gan.... :)
sangat membantu

blogodolar said...

kaya nya artikel ini mirip sekali dengan artikel lain di blog infonet loe, dan jgn2 ini copy ya mas??

Unknown said...

@blogodolar: saya anticopas. Tapi jika anda bisa membuktikan bahwa saya mengcopas artikel ini, saya akan langsung turunkan artikel ini. Silahkan anda bandingkan saja gaya bahasa dan penulisannya, selain itu tanyakan pada penulis blog tersebut bagaimana cara menyusun kode dan tablenya, jika dia bisa menjawab, saya bersedia turunkan artikel ini. Oke?

Unknown said...

Mantaaaab! akhirnya berhasil juga.. makasi kakaaak.. :D

Unknown said...

ko punya saya ga keluar ya bung ??

Unknown said...

Makasij atas infonya sob, sangat membantu ne...
ditunggu kunjungannya sob....

Unknown said...

Info yang keren dan bagus gan, akhirnya sedit paham juga soal share Button n cara pasangnya. Thanks you

Unknown said...

makasih sangat bermanfaat :) walaupun saya pemula belum cukup ngerti :)
follow balik saya ya dan jangan lupa komentar dan kritikanya terhadap blog saya :)
http://dhasyashop.blogspot.com/

Adandio said...

THANKS YEA INFO NYA,,

NICH FOLLOW BLOG SAYA PASTI DI FOLLOW BACK DEHH,,
YANG MAU FOLLOW FOLLOW BLOG ANE DLU = http://ilmubloggersyahdan.blogspot.com

Anonymous said...

tipsnya bagus dan menarik, dah saya praktekkan di blog saya mas

Warna said...

mas boleh izin share artikel kamu mas ?? share menyertai sumber nya.... thanks : warna.news.blogspot.com

Unknown said...

@Warna: Silahkan saja :)

Anonymous said...

ane coba bang

afivwae said...

Terima kasih mas bro, atas share ilmu nya......
berikan like and saran jg pada blog ane ya

Juju Onyols - Sikonyols said...

ane coba ya gan :D

mampir sob sikonyols(dot)blogspot(dot)com

Unknown said...

Ijin Copas ya, Om. Sangat membantu sekali buat nyelipin sosmed.
Cuma rada bingung ngilangin sharebutton di homepagenya. ada referensi gak, Om.
Terima kasih

Unknown said...

horeeeeeeeeeee

Anonymous said...

Kalau ditambahin tombol digg, pinteres dll gimana pak Azmi?

Yerie H said...

kode yg dicari ctrl f,gak ada yg ketemu gan,gimana..?"

Aldi Rahman said...

Keren infonya, sangat menarik dan bermanfaat :)

Anonymous said...

Terimakasih mas..

Unknown said...

makasih gan atas infony bermangpaat banget.
mampir juga ke blog ane gan http://www.kotakmusic.com/

Unknown said...

makasih buat infonya gan, sngat bermanfaaat untuk sya

Anonymous said...

Semakin memperkaya wawasan ...sangat bermanfaat dan terima kasih

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap