Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Membuat Tombol Twitter, Google +1 dan Facebook Like, Valid HTML5

Cara membuat tombol Facebook Like, Twitter, dan Google Plus Valid HTML5
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...

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

117 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. Pertamaxx,,,,bensin solar.....
    1. icalan ki? wkwkwkkwkkw :)
  2. 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....
    1. BTW masih menunggu validasi jump-link nya kang hehehe....
  3. Saya sudah tulis di sini http://www.kompiajaib.com/2013/05/cara-pasang-plugin-facebook-di-blog.html (maaf nyimpan link)
    1. gak apa2 mas .. asal jangan hidup aja hehe
  4. begitu ya, pantasan blog saya banyak error, wuii... kalo soal valid2 saya gak mampu menguras, bisa strees liat kodi2 itu. @@,
    1. 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. ^_^
  5. Yang template sempat tak beresin, ada yang baru lagi ini..
    Harus dalam minggu ini saya benerin...target yang harus dilaksanakan ini
    1. masih urusan template ko sob, biasanya kan bagian postingan ini
  6. Bisa dicoba nih kang :)
    1. silahkan sob...
  7. Hadddehh..!! tutor valid html 5 yang lalu aja udah bikin deg2an atuh, kang!
    tambah lagi yang ini.....kabuuuuuur :D
    1. wkwkwk... cuman sedikit aja ko :)
  8. 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 .. ??
    1. naek turun sih.. Insya Allah postingan selanjutnya membahas statistik blog
  9. si akang kana valid valid'an ayena mah ... Ke ah masih fokus kana tampilan hela
    1. sok atuh ngiringan valid moal? kade valid ka susukan :)
  10. wehh mantabb deh
    1. tengkyu sob..
  11. aih .. keur usum html5 mang :D, jarang o`el abi :D kangen blog kang ismet ..

    bookmark heula ah , pameng nuju nuang seblak ladaa .. hehe
    1. panitia agustusan teh kaclep... :)
  12. 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...
    1. 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 :)
  13. Kang Ismet.
    Domain nemukabar.com saya masih nggak bisa disave di blogspot nya. Kunaon ini kang ismet ?
    1. chat saya aktifin.. ditunggu
  14. mantap kang, Valid HTML lagi nih , nice post.. lanjutkan!
    1. wkwkwk kaya SBY :)
  15. Wah , Akhir"ran ini Becara Tentang Validasi Mulu Yah ,

    Kalau saya mah Soal NAvigasi Buat Apa ,
    Template Aja Belum Ada. :D
  16. 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
    1. hehhe penyebar virus ya... ga 2pa ko sob
  17. Mantap Kang nanti kalau udah nggak sibuk didunia nyata saya coba pakai yang ini
    1. silahkan sob.. lakukan skala prioritas
  18. mantap nih, izin coba kang
  19. mantap kang, berturut2 posting tentang HTML5 nih.. :D
    1. biar seirama :)
  20. Hebat, punya Kang Ismet tadi saya cek sudah valid :D .. Tapi punya saya belum :(
    1. sebelum bikin tutorial, blognya harus valid dulu.. masa bikin tutorial sementara blognya blom valid :)
  21. wah ane error sampe 150 lebih pengaruh gak ya sma blog? yg bisa bantu dapat pahala deh :D
    1. masih sedikit... awalnya punya saya juga error 300 lebih :)
  22. 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..
    1. pan ieu ge tutorial keneh kang :)
  23. Nice Inpo,, siap bookmark :D
    Langsung tester ke blog ane :)
    oiya gan, folback ya >>>>>>
    blog kang ismet udh ku follow
    Trims ;)
  24. Keren Mas Tipsnya... Makasih atas tutornya kang.
  25. Kangen sama Kakandaku yang satu nih..apa kabarnya kakandaaaa..?
    asyik dapat ilmu baru lagi disini..MINAL AIDIN WAL FA IDZIN ya kang.
  26. butuh tenaga ekstra nih untuk mengatasi error valid html 5. thanks tutorialnya kang
  27. 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
  28. Kang Ismet ayna mh jago vavalidan, :D Kang di share ath supados Komentar hackna valid ?
    Htr nhun steacanna. :D
    1. diantos we kang :)
  29. Kang kalau valid 5 ada pengaruhnya tidak sama seo friendly pada blog?
    1. bisa pengaruh.. banyak kode yang ga valid.. ga bagus di SEO
  30. 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
    1. coba pake CSS terpisah...
  31. kang mau nanya nih, app ini :
    appId=352634211479923

    itu app apa ya ? dari facebooknya atau harus diganti dgn app fb yg kita pnya ?
    1. ga usah diganti juga ga apa2.. kecuali kalau mau buat aplikasi sendiri,itu aplikasi saya.
  32. 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".. ;)
    1. terimakasih sob koreksinya, maklum postingnya malem2 n copy dari blog percobaan.. ternyata kode lainnya kebawa :)
  33. Saya pasang di Upimod.blogspot.com :)
    Maap nitip link akang :D
  34. pagi-pagi dapat ilmu ginian. asiikkkk... thankyu kang ismet!
  35. Salam kenal, kebetulan lagi cari artikel pasang cara pasang like di FB trus dapat deh salam kenal. http://betuah.com
    1. sama2 mas.. salam kenal juga
  36. kang mau tanya kode yg kedua itu letak dimana ya? misal kalao mau buat tombol share FB or komentar FB
    1. maksudnya kode yang mana? kode2 di atas standarnya di tempatkan setelah <div class='post-footer'>
  37. Kang, ane pas masang malah dapet yang beginian:
    TEMPLATE ERROR: Invalid data reference post.url: No dictionary named: 'post' in: ['blog', 'skin', 'view']
    1. kayaknya pasang diatas </head> ya? liat komentar saya sebelumnya
  38. langsung saya praktekin sob,,,,
  39. makasi atas informasainya.
  40. yang google+ masih belum bisa kang, masih tetap error biar udah ta taruh di atas </head>
  41. ini untuk lowongan kerja online kunjungi. http://kerjaonlinespektakuler.blogspot.com/
    untuk bisnis online kunjungi. http://goo.gl/0IavR2

    semuanya terbaru, termudah dan terpercaya
    trimakasih
  42. makasih kang.. kalau script async nya giamana ya?
  43. 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?
    1. abdi ti Parsal kang.. salam kenal.. tos aya oge kanggo FB sareng Twitter, abdi tos ngaggo :)
  44. maaf kang mau nanya, kok di template saya gak ada "body" ya :mikir mohon bantuan
    1. ah masa.. 'body' itu wajib untuk template, kalau ga ada ga bakalan jadi dan ga bisa di save
  45. Matur Nuwun Kang ismet. Semoga sehat selalu. aminnnnnn
  46. mantab kang :D
  47. //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
  48. kalo mau buat yang sejajar kaya' yang agan punya di bawah posting blog tu kodenya seperti apa ya ??? med malam,,, dan salam kenal aja
  49. syukur ketemu share bookmark ini :) jadi tambah berkurang error valid template,terimakasih kang
  50. Unknown
    Komentar ini telah dihapus oleh pengarang.
  51. terima kasih atas informasi yang bermanfaat ini http://hainusantara.com/
  52. *semoga direply*

    kang minta script jejaring social seperti blog ini dong :(
    1. itu scriptbiasa, tapi ditambah sticky coba kesini http://blog.kangismet.net/2012/10/membuat-sticky-widget-sidebar-di.html
  53. mampir di sii gan http://www.mahvut.blogspot.com/
  54. super mantap gan... gwa coba yah gan..ehhehe
  55. wahahah hanks gan
  56. Simpan nya di mana kang ? ko panduan nya kurang lengkap ?
  57. like postingan blog kok ga bisa ya yang muncul malah like blog
  58. Artikel nagus :) kunjung balik gan
    http://penasaranbgt.blogspot.com/
  59. terima kasih kang..
    hehehe berkat htmlnya
    blogku jdi valid html5..
    pdhl erronya puluhan pas ganti html lsg valid wkwkw
    (y)
  60. mantaap kang, saya coba dulu semoga berhasil ...
  61. -d keren
  62. 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.
  63. kang, script fb nya belum jalan ini error, kenapa ya ?
  64. wah keren yeuh kang cobaan ah,atur nuhun
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.