Valid Twitter, Google +1 and Facebook 'Like' buttons for HTML5 - Peran jejaring sosial dalam meraih visitor lumayan signifikan. Oleh karena itu jangan lupa untuk memasang Facebook 'Like' button, Google Plus dan Twitter, atau bisa ditambah dengan jejaring sosial lainnya.valid html5 button share

Masih melanjutkan artikel sebelumnya tentang bagaimana membuat template blog valid HTML5, pemasangan kode Facebook 'Like' button, Google Plus dan Twitter, yang sudah banyak beredar pada tutorial Blogger, akan mengakibatkan banyaknya error pada validasi HTML5 terutama pada bagian postingan yang biasanya kita pasang.

valid html5 button share

Berikut ini adalah tombol (button) yang valid HTML5 :

Twitter


<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>

Google Plus


<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'/>
<script type='text/javascript'>
  window.___gcfg = {lang: &#39;id&#39;};
 
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Facebook Like


<iframe expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;amp;send=false&amp;amp;layout=button_count&amp;amp;show_faces=false&amp;amp;width=90&amp;amp;action=like&amp;amp;font=arial&amp;amp;colorscheme=light&amp;amp;height=21&quot;' style='border:none; overflow:hidden; width:90px; height:21px;'/>

Update


Karena ada masukan dari Kang Kompi Ajaib, bahwa iframe kurang bagus untuk SEO dan disarankan untuk menggunakan kode dari Facebook Developer. Namun bagi sahabat yang ga mau buka developer fb, silahkan ikuti langkah pemasangan Facebook Like Button SEO friendly dan valid HTML5 :

1. Simpan kode ini di abawah <body>
<div id='fb-root'/>
<script>//<![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1&appId=352634211479923";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
Kode di atas cukup satu saja untuk memasang beberapa plugin Facebook, selanjutnya silahkan tambahkan kode Facebook Like Button.

2. Untuk menambah kode Facebook Like Button, simpan kode ini di tempat mana kode akan dimunculkan :
<div class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' data-width='90' expr:data-href='data:post.url'/>

Semoga bermanfaat...

120 komentar

Pertamaxx,,,,bensin solar.....

Balas

icalan ki? wkwkwkkwkkw :)

Balas

Ya seperti itu kang...
Tapi untuk FB like (seperti pengalaman saya) itu dapat mengurangi skor seo blog yang cukup banyak (sekitar 22% oleh hanya satu plugin tersebut), iframe FB terbaca BAD di Chkme. Sebaiknya gunakan saja kode yang HTML5 dari depelover FB, kalau hanya seperti itu hanya valid HTML5 saja...hehehee
Maaf bukan menggurui hanya sharing pengalaman saja ya kang....

Balas

BTW masih menunggu validasi jump-link nya kang hehehe....

Balas

gitu ya? dari develover FB saya belom acak2 soalnya biasanya untuk 'Like' homepage aja, bukan postingan.. ada referensi kode? btw.. jumplink masih lieur :)

Balas

Saya sudah tulis di sini http://www.kompiajaib.com/2013/05/cara-pasang-plugin-facebook-di-blog.html (maaf nyimpan link)

Balas

begitu ya, pantasan blog saya banyak error, wuii... kalo soal valid2 saya gak mampu menguras, bisa strees liat kodi2 itu. @@,

Balas

dan satu lagi buat kang ismet, dulu sering membahas tutorial2 komentar, eh malah sekarang main valid2an hehehhe... dari komentar loncat ke SEO, benar2 dasyat deh. ^_^

Balas

Yang template sempat tak beresin, ada yang baru lagi ini..
Harus dalam minggu ini saya benerin...target yang harus dilaksanakan ini

Balas

Hadddehh..!! tutor valid html 5 yang lalu aja udah bikin deg2an atuh, kang!
tambah lagi yang ini.....kabuuuuuur :D

Balas

Tutor valid html 5 yang lalu aja Belum, Tambah lagi Yang Ini .


Oya Kang Mau Tanya... !! :D

Kenapa Ya Alexa Blog Ku Kok Naek Terus Ga Turun Dari 300 An Sekarang malah 360 An.

Apakah Akang Juga Begitu .. ??

Balas

gak apa2 mas .. asal jangan hidup aja hehe

Balas

si akang kana valid valid'an ayena mah ... Ke ah masih fokus kana tampilan hela

Balas

Sekarang jadi serba HTML5 ya kang? xixixixixi..

Balas

hehehe... btul kata kang rully,itu kan bermanfaat. maksud saya bukan cara pemasangannya kang.. tpi awalnya bingung kan kode htmlnya kurang lebih kaya ini :
[pre]<div class="fb-like" data-href="http://blog.kangismet.net" data-width="90" data-layout="button_count" data-show-faces="false" data-send="false"></div>[/pre]
saya bingung edit [code]data-href="http://blog.kangismet.net"[/code] kan ke homepage aja... tapi udah ketemu.. nanti saya update artikelnya

Balas

wkwkkw.. saya orangnya kalo udah males ga bisa diganggu :) tapi kalau udah mulai harus bisa

Balas

masih urusan template ko sob, biasanya kan bagian postingan ini

Balas

wkwkwk... cuman sedikit aja ko :)

Balas

naek turun sih.. Insya Allah postingan selanjutnya membahas statistik blog

Balas

sok atuh ngiringan valid moal? kade valid ka susukan :)

Balas

Saya Malah Naik. :(

Ok Saya Tunggu :D

Balas

aih .. keur usum html5 mang :D, jarang o`el abi :D kangen blog kang ismet ..

bookmark heula ah , pameng nuju nuang seblak ladaa .. hehe

Balas

Dan sekedar laporan kang...seharian ini kebetulan listrik di daerah saya mati...jadi terpaksa saya blogging pake HP (BB). Saya coba akses postingan blog kang Ismet ini dan betul kemarin ada yang bilang kalau di Opera Mini (kebetulan saya gunakan Opmin di BB, kalau pakai browser BB berat kang hehehe) komentar editor blog ini tidak muncul kang, padahal blog saya yang pakai treaded comment hack yang sama dengan kang Ismet muncul komentar editornya. Tapi kemarin saya coba pakai Opera mini desktop mah normal kang, komentar editornya muncul. Berarti bukan dari Opera Mini masalahnya, mungkin dari responsive-nya kang...

Balas

Siiippp update fb like buttonnya lebih keren kang...bisa digunakan semua orang...

Balas

panitia agustusan teh kaclep... :)

Balas

berarti sama ya.. tadi sempet nyala jam 3, jam 4 mati lagi.
btw, makasih infonya saya coba cari solusinya kang.. saya jarang browsing n langganan paket BB jadi blom pernah ngecek, nanti kalau langganan saya add. kalo sempet kirim PINnya aja ke email :)

Balas

hehehe.. ini baru namanya dukun tutorial, serem, lebih serem daripada blog saya.

Balas

Kang Ismet.
Domain nemukabar.com saya masih nggak bisa disave di blogspot nya. Kunaon ini kang ismet ?

Balas

chat saya aktifin.. ditunggu

Balas

mantap kang, Valid HTML lagi nih , nice post.. lanjutkan!

Balas

Makasih kang Ismet atas bantuannya :D

Balas

Wah , Akhir"ran ini Becara Tentang Validasi Mulu Yah ,

Kalau saya mah Soal NAvigasi Buat Apa ,
Template Aja Belum Ada. :D

Balas

haha, kode otomatis ke post page kan ini kang:

[code]expr:href='data:blog.pageTitle'[/code]

Balas

udah diupdate di atas.. kalau ga salah [code]data:blog.pageTitle[/code] itu judul postingan...

Balas

wah, kayaknya gegara kang ismet jadi banyak yg pake html5 ya wkwk

eh iya, salam kenal buat kang ismet. sebenernya saya sudah lama dan sering berkunjung, cm jarang berkomentar. hehehe. maafkan saya

Balas

hehhe penyebar virus ya... ga 2pa ko sob

Balas

Mantap Kang nanti kalau udah nggak sibuk didunia nyata saya coba pakai yang ini

Balas

mantap nih, izin coba kang

Balas

mantap kang, berturut2 posting tentang HTML5 nih.. :D

Balas

Hebat, punya Kang Ismet tadi saya cek sudah valid :D .. Tapi punya saya belum :(

Balas

wah ane error sampe 150 lebih pengaruh gak ya sma blog? yg bisa bantu dapat pahala deh :D

Balas

Woww Nice Kang Super Kerennnnnnn...hhhhhh
Wah Kang Ismet sekarang Cenderung posting
yang palid2 an yeuh.. ..? Artikel pembahasan SEO
dan Tuturial kaya nya di pending dulu..tapi ini
Bermanfaat juga buat sobat yang sedang berupaya
Templatenya valid HTML5 dan CSS3. Sukses terus Kang..

Balas

silahkan sob.. lakukan skala prioritas

Balas

sebelum bikin tutorial, blognya harus valid dulu.. masa bikin tutorial sementara blognya blom valid :)

Balas

masih sedikit... awalnya punya saya juga error 300 lebih :)

Balas

pan ieu ge tutorial keneh kang :)

Balas

Nice Inpo,, siap bookmark :D
Langsung tester ke blog ane :)
oiya gan, folback ya >>>>>>
blog kang ismet udh ku follow
Trims ;)

Balas

Keren Mas Tipsnya... Makasih atas tutornya kang.

Balas

Kangen sama Kakandaku yang satu nih..apa kabarnya kakandaaaa..?
asyik dapat ilmu baru lagi disini..MINAL AIDIN WAL FA IDZIN ya kang.

Balas

butuh tenaga ekstra nih untuk mengatasi error valid html 5. thanks tutorialnya kang

Balas

Maaf nih kang baru sempat blogwalking dan berkomentar disini :) , soalnya kerjaan sekolah banyak banget...

Oh iya kang, kalau boleh URL Replace akun ini dialihkan ke "http://mestiqui.blogspot.com/"

Terimakasih kang :D

Balas

Kang Ismet ayna mh jago vavalidan, :D Kang di share ath supados Komentar hackna valid ?
Htr nhun steacanna. :D

Balas

Kang kalau valid 5 ada pengaruhnya tidak sama seo friendly pada blog?

Balas

Kang Ismet, saya bingung nih.. untuk [code]style type="text/css"[/code] error mulu nih.. Sama mau tanya kenapa iklan IBN Saya kalau gak pakai scrolling="no" Scrollnya tetep muncul ya? Padahal sudah saya tambahkan [pre]... style="border:0;overflow:hidden;">[/pre] Mohon pencerahannya kang ... Sudah 17 Error dan 1 Warning. Sekarang tinggal mengatasi beberapa saja, semoga berhasil :D

Balas

coba pake CSS terpisah...

Balas

iya gan ane juga kaget, kang ismet memang keren (y)
mantab deh :D

ane ngak bisa bilang ap ap lagi ^_^

Balas

kang mau nanya nih, app ini :
appId=352634211479923

itu app apa ya ? dari facebooknya atau harus diganti dgn app fb yg kita pnya ?

Balas

ga usah diganti juga ga apa2.. kecuali kalau mau buat aplikasi sendiri,itu aplikasi saya.

Balas

bisa pengaruh.. banyak kode yang ga valid.. ga bagus di SEO

Balas

izin koreksi kang (maaf jika lancang :D ), kode penutup "span" pada kode facebook share dan twitter tweet serta kode penutup "div" pada google plus button sepertinya konflik kang.. :D hhe

nanti error pada saat "save template".. ;)

Balas

terimakasih sob koreksinya, maklum postingnya malem2 n copy dari blog percobaan.. ternyata kode lainnya kebawa :)

Balas

Saya pasang di Upimod.blogspot.com :)
Maap nitip link akang :D

Balas

pagi-pagi dapat ilmu ginian. asiikkkk... thankyu kang ismet!

Balas

Salam kenal, kebetulan lagi cari artikel pasang cara pasang like di FB trus dapat deh salam kenal. http://betuah.com

Balas

sama2 mas.. salam kenal juga

Balas

kang mau tanya kode yg kedua itu letak dimana ya? misal kalao mau buat tombol share FB or komentar FB

Balas

maksudnya kode yang mana? kode2 di atas standarnya di tempatkan setelah <div class='post-footer'>

Balas

Kang, ane pas masang malah dapet yang beginian:
TEMPLATE ERROR: Invalid data reference post.url: No dictionary named: 'post' in: ['blog', 'skin', 'view']

Balas

kayaknya pasang diatas </head> ya? liat komentar saya sebelumnya

Balas

maksud saya kode untuk facebook itu kang, kan ada 2 kode yg 1 ditaruh di bawah body trus kode yg ke 2 itu kang taruh dmna? kan banyak jenisnya misal utk tombol share FB dan comment FB apa sama letaknya?

Balas

iya terserah, apa mau diatas postingan (dibawah judul), atau dibawah postingan, atau di sidebar. kalau dibawah postingan standarnya disimpan dibawah <div class='post-footer'>

Balas

Terima kasih kang Case was SOLVED, makin asyik belajar disini.

Balas

langsung saya praktekin sob,,,,

Balas

makasi atas informasainya.

Balas

yang google+ masih belum bisa kang, masih tetap error biar udah ta taruh di atas </head>

Balas

ini untuk lowongan kerja online kunjungi. http://kerjaonlinespektakuler.blogspot.com/
untuk bisnis online kunjungi. http://goo.gl/0IavR2

semuanya terbaru, termudah dan terpercaya
trimakasih

Balas

makasih kang.. kalau script async nya giamana ya?

Balas

wah mantap nih kang ismet, met kenal nya abdi ti cicurug, tutorial na bermanfaat pisan, boleh nambihan sa alit, berdasarkan pengalaman penambahan async = true; di setiap java script akan menolong kecepatan loading dan tidak ada error di Prefer asynchronous resources (gtmetrix). mun ditinggali google + tos aya po.async = true; nu teu acan mah Facebook sareng Twitter, SUKABUMI NA dimana kang?

Balas

abdi ti Parsal kang.. salam kenal.. tos aya oge kanggo FB sareng Twitter, abdi tos ngaggo :)

Balas

maaf kang mau nanya, kok di template saya gak ada "body" ya :mikir mohon bantuan

Balas

ah masa.. 'body' itu wajib untuk template, kalau ga ada ga bakalan jadi dan ga bisa di save

Balas

sudah ketemu kang, tengkyu udah bisa sekarang :hormat

Balas

Matur Nuwun Kang ismet. Semoga sehat selalu. aminnnnnn

Balas

//connect.facebook.net/id_ID/all.js
Jika pasang kode ini akan berpengaruh nilai skor menurut Google speed (developers.google.com/speed/pagespeed/insights) . Infonya Hapus JavaScript yang memblokir render.. Jadi bingung cek sono sini :D

Balas

kalo mau buat yang sejajar kaya' yang agan punya di bawah posting blog tu kodenya seperti apa ya ??? med malam,,, dan salam kenal aja

Balas

syukur ketemu share bookmark ini :) jadi tambah berkurang error valid template,terimakasih kang

Balas
Komentar ini telah dihapus oleh pengarang.

terima kasih atas informasi yang bermanfaat ini http://hainusantara.com/

Balas

*semoga direply*

kang minta script jejaring social seperti blog ini dong :(

Balas

itu scriptbiasa, tapi ditambah sticky coba kesini http://blog.kangismet.net/2012/10/membuat-sticky-widget-sidebar-di.html

Balas

tapi aku masih ga bisa bikin tombol follow twitter, follow g+, g+1, facebook like :(

maklum baru 1 bulan di dunia blog :((((

liat aja nih blog aku, pasti ancur :D
diakun.blogspot.com

Balas

Pada ngomongin apa ya? engga ngerti saya hehe. Tapi pengen belajar valid nih dari kangismet

Balas

mampir di sii gan http://www.mahvut.blogspot.com/

Balas

ALPHA SHOP.TOKO ONLINE TERPERCAYA.Kami hadir utk menjawab kebutuhan anda,terhadap produk elektronik,dgn harga terjangkau..Kami menawarkan berbagai jenis type hp,laptop,camera,dll,Garansi Resmi Distributor dan Garansi TAM .
Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
BERMINAT HUB-SMS:0857-3112-5055 ATAU KLIK WEBSITE RESMI KAMI http://www.alpha-shopelektronik.blogspot.com/
BlackBerry>Samsung>Nokia>smartfrend>Apple>Acer>Dell>Nikon>canon>DLL

Dijual

Ready Stock !
BlackBerry 9380 Orlando - Black
Rp.900.000,-

Ready Stock !
BlackBerry Curve 8520 Gemini
Rp.500.000,-

Ready Stock !
BlackBerry Bold 9780 Onyx 2
Rp.800.000,-

Ready Stock !
Blackberry Curve 9320
Rp.700.000,-

Ready Stock !
Samsung Galaxy Tab 2 (7.0)
Rp. 1.000.000

Ready Stock !
Samsung Galaxy Nexus I9250 - Titanium Si
Rp.1.500.000,-

Ready Stock !
Samsung Galaxy Note N7000 - Pink
Rp.1.700.000

Ready Stock !
Samsung Galaxy Y S5360 GSM - Pure White
Rp.500.000,-

Ready Stock !
Nokia Lumia 800 - Matt Black
Rp.1.700.000,-

Ready Stock !
Nokia Lumia-710-white
Rp. 900.000,-

Ready Stock !
Nokia C2-06 Touch & Type - Dual GSM
Rp.450.000,-

Ready Stock !
Nokia Lumia 710 - Black
Rp. 900.000,-

Smartfren Andromax Z
Rp.1,700.000

Smartfren Andromax U Limited Edition
Rp.1.000.000

Tablet Asus Eee Pad Slider SL 1O1
Rp.2.500.000

Tablet Asus Memo Pad ME172 V
RP.800.000

Lenovo ldea Pad B490
Rp.2.500.000

Lenovo think Pad edge A86
RP.1.700.000

Ready Stock !
Apple iPhone 4S 16GB (dari XL) - Black
Rp.1.200.000,-

Ready Stock !
Apple iPhone 4S 16GB (dari Telkomsel)
Rp.1.200.000,-

Ready Stock !
Apple iPod Touch 4 Gen 8GB
Rp.700.000

Ready Stock !
APPLE iPod Nano 8GB - Pink
Rp.500.000,-

Ready Stock !
Acer Aspire 4752-2332G50Mn Core i3 Win7 Home
Rp 1.300.000

Ready Stock !
Acer Aspire S3-951-2364G34iss
Rp. 1.200.000,-

Ready Stock !
Acer Aspire 5951G Core i7 2630 Win 7
Rp. 2.500.000,-

Ready Stock !
Acer Aspire 4755G Core i5 2430 Win 7 Home Premium Green
Rp. 2.500.000,-

Ready Stock !
Nikon D7000 kit 18-105mm
Rp.1.700.000

Ready Stock !
Nikon D90 Kit 18-105mm Vr
Rp 1.300.000

Ready Stock !
Nikon Coolpix L 120 Red
Rp. 900.000

Ready Stock !
Nikon Coolpix P 500 Black
Rp 1.000.000
ALPHA SHOP
alpha-shopelektronik.blogspot.com

Balas

Sudah diterapkan nih kang tutorialnya :D
Barusan breadcrumbs HTML5, dan Related Post HTML5
Mantap (y)

Balas

super mantap gan... gwa coba yah gan..ehhehe

Balas

Simpan nya di mana kang ? ko panduan nya kurang lengkap ?

Balas

like postingan blog kok ga bisa ya yang muncul malah like blog

Balas

Artikel nagus :) kunjung balik gan
http://penasaranbgt.blogspot.com/

Balas

terima kasih kang..
hehehe berkat htmlnya
blogku jdi valid html5..
pdhl erronya puluhan pas ganti html lsg valid wkwkw
(y)

Balas

mantaap kang, saya coba dulu semoga berhasil ...

Balas

Wah, bahkan Share-Button saya, terpaksa saya buang. Menurut yang saya baca dari blog teman-teman, share button dari goog.. ini membuat loading blog berat, dan juga menyumbang error yang cukup besar. Jadi, terima kasih banyak kang Ismet, sudah berbagi post "Membuat Tombol Twitter, Google +1 dan Facebook Like, Valid HTML5" ini. Segera saya pasang kembali share button pada post-footer saya.

Sekali lagi Terima kasih.

Balas

kang, script fb nya belum jalan ini error, kenapa ya ?

Balas

wah keren yeuh kang cobaan ah,atur nuhun

Balas

Poskan Komentar


×
Chat