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

bsulistio said...

thank's mas..buat saya news

Ardhian Eka Praditya said...

top dah

Husni ovia wulandari said...

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

juanx criex said...

makasih gan tak cobanya dulu

goyang pattah-pattah 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

Ahmad Khoirul Azmi 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.

Ahmad Khoirul Azmi said...

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

klikwebsaya said...

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

ihsan 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....:)

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

Fikri Mumtaz 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 :)

Ahmad Khoirul Azmi 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.

angkatigabelas 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 :)

Iefa El Fathia 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....

Moh Saifullah said...

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

bagus said...

MAKASIH kk berhasil

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

Ahmad Khoirul Azmi said...

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

Asep Rohman 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/

Bro Fahroe said...

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

Ajat Sudrajat said...

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

Abangjo said...

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

Muhammad Hafid Masruri said...
This comment has been removed by the author.
Muhammad Hafid Masruri said...

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

Ahmad Khoirul Azmi 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

tik tok 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

K2 Ichsan 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...

Ahmad Khoirul Azmi 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...

K2 Ichsan 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.
ﺸﻜﺮﺍﻜﺜﻴﺮﺍﺠﺰﺍﻜﻢﺍﷲﺒﺨﻴﺮﺍﻠﺠﺰﺍ

Pangestu Panji Pratama said...

Tips yg bagus Gan, thanks atas infonya

khairul arifin 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!

Muhammad Nasirudin 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

Fadli Sahrudin 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

Gopar said...

sukses terpasang sob..

Mancing said...

Info mantab! Keep update!

Ahmad Habibullah, S.Pd. 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)

ari hermana 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 Croot said...

thanks :)
ngebantu banget hehe :D

Handa Gustiawan said...

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

BAB said...

ijin pake tutorial mantapnya ya om... mampir yaak

Meitri Setiyo said...

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

Unknown said...

trima kasih for share teman..
tempat saya berhasil

Cadis Hangoluan 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

sskyblog 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??

Ahmad Khoirul Azmi 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?

May Wijayanto said...

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

Bintang Samudra said...

ko punya saya ga keluar ya bung ??

Marwan Setiawan said...

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

Putra Holic said...

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

niasya esa putri 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/

syahdan hidayatekzx 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

ruddinnoer 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

Ahmad Khoirul Azmi said...

@Warna: Silahkan saja :)

Abraham Muhammad said...

ane coba bang

Coretan said...

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

Angga Zulika Ramadhani said...

ane coba ya gan :D

mampir sob sikonyols(dot)blogspot(dot)com

Solvy inde said...

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

sadha yeasa said...

horeeeeeeeeeee

tipssehatku.com said...

Kalau ditambahin tombol digg, pinteres dll gimana pak Azmi?

yerie haryadi said...

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

Aldi Rahman said...

Keren infonya, sangat menarik dan bermanfaat :)

abdulrouf said...

Terimakasih mas..

heryana rizman said...

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

Agus Budianto said...

makasih buat infonya gan, sngat bermanfaaat untuk sya

Sugijanto Kasbin 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