Membuat Tombol Twitter, Google +1 dan Facebook Like, Valid HTML5
Kang Ismet
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.
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.
Berikut ini adalah tombol (button) yang valid HTML5 :
Twitter
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
2. Untuk menambah kode Facebook Like Button, simpan kode ini di tempat mana kode akan dimunculkan :
Semoga bermanfaat...
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.
Berikut ini adalah tombol (button) yang valid HTML5 :
<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: 'id'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>Facebook Like
<iframe expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21"' 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>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...
Pertamaxx,,,,bensin solar.....
icalan ki? wkwkwkkwkkw :)
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....
BTW masih menunggu validasi jump-link nya kang hehehe....
Saya sudah tulis di sini http://www.kompiajaib.com/2013/05/cara-pasang-plugin-facebook-di-blog.html (maaf nyimpan link)
gak apa2 mas .. asal jangan hidup aja hehe
begitu ya, pantasan blog saya banyak error, wuii... kalo soal valid2 saya gak mampu menguras, bisa strees liat kodi2 itu. @@,
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. ^_^
Yang template sempat tak beresin, ada yang baru lagi ini..
Harus dalam minggu ini saya benerin...target yang harus dilaksanakan ini
masih urusan template ko sob, biasanya kan bagian postingan ini
Hadddehh..!! tutor valid html 5 yang lalu aja udah bikin deg2an atuh, kang!
tambah lagi yang ini.....kabuuuuuur :D
wkwkwk... cuman sedikit aja ko :)
si akang kana valid valid'an ayena mah ... Ke ah masih fokus kana tampilan hela
sok atuh ngiringan valid moal? kade valid ka susukan :)
wehh mantabb deh
tengkyu sob..
aih .. keur usum html5 mang :D, jarang o`el abi :D kangen blog kang ismet ..
bookmark heula ah , pameng nuju nuang seblak ladaa .. hehe
panitia agustusan teh kaclep... :)
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...
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 :)
Kang Ismet.
Domain nemukabar.com saya masih nggak bisa disave di blogspot nya. Kunaon ini kang ismet ?
chat saya aktifin.. ditunggu
mantap kang, Valid HTML lagi nih , nice post.. lanjutkan!
wkwkwk kaya SBY :)
Wah , Akhir"ran ini Becara Tentang Validasi Mulu Yah ,
Kalau saya mah Soal NAvigasi Buat Apa ,
Template Aja Belum Ada. :D
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
hehhe penyebar virus ya... ga 2pa ko sob
Mantap Kang nanti kalau udah nggak sibuk didunia nyata saya coba pakai yang ini
silahkan sob.. lakukan skala prioritas
mantap nih, izin coba kang
Komentar ini telah dihapus oleh Kang Ismet sebagai penulis.
mantap kang, berturut2 posting tentang HTML5 nih.. :D
biar seirama :)
Hebat, punya Kang Ismet tadi saya cek sudah valid :D .. Tapi punya saya belum :(
sebelum bikin tutorial, blognya harus valid dulu.. masa bikin tutorial sementara blognya blom valid :)
wah ane error sampe 150 lebih pengaruh gak ya sma blog? yg bisa bantu dapat pahala deh :D
masih sedikit... awalnya punya saya juga error 300 lebih :)
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..
pan ieu ge tutorial keneh kang :)
Nice Inpo,, siap bookmark :D
Langsung tester ke blog ane :)
oiya gan, folback ya >>>>>>
blog kang ismet udh ku follow
Trims ;)
Keren Mas Tipsnya... Makasih atas tutornya kang.
Kangen sama Kakandaku yang satu nih..apa kabarnya kakandaaaa..?
asyik dapat ilmu baru lagi disini..MINAL AIDIN WAL FA IDZIN ya kang.
butuh tenaga ekstra nih untuk mengatasi error valid html 5. thanks tutorialnya kang
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
Kang Ismet ayna mh jago vavalidan, :D Kang di share ath supados Komentar hackna valid ?
Htr nhun steacanna. :D
diantos we kang :)
Kang kalau valid 5 ada pengaruhnya tidak sama seo friendly pada blog?
bisa pengaruh.. banyak kode yang ga valid.. ga bagus di SEO
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
coba pake CSS terpisah...
kang mau nanya nih, app ini :
appId=352634211479923
itu app apa ya ? dari facebooknya atau harus diganti dgn app fb yg kita pnya ?
ga usah diganti juga ga apa2.. kecuali kalau mau buat aplikasi sendiri,itu aplikasi saya.
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".. ;)
terimakasih sob koreksinya, maklum postingnya malem2 n copy dari blog percobaan.. ternyata kode lainnya kebawa :)
Saya pasang di Upimod.blogspot.com :)
Maap nitip link akang :D
pagi-pagi dapat ilmu ginian. asiikkkk... thankyu kang ismet!
Salam kenal, kebetulan lagi cari artikel pasang cara pasang like di FB trus dapat deh salam kenal. http://betuah.com
sama2 mas.. salam kenal juga
kang mau tanya kode yg kedua itu letak dimana ya? misal kalao mau buat tombol share FB or komentar FB
maksudnya kode yang mana? kode2 di atas standarnya di tempatkan setelah <div class='post-footer'>
Kang, ane pas masang malah dapet yang beginian:
TEMPLATE ERROR: Invalid data reference post.url: No dictionary named: 'post' in: ['blog', 'skin', 'view']
kayaknya pasang diatas </head> ya? liat komentar saya sebelumnya
langsung saya praktekin sob,,,,
makasi atas informasainya.
yang google+ masih belum bisa kang, masih tetap error biar udah ta taruh di atas </head>
ini untuk lowongan kerja online kunjungi. http://kerjaonlinespektakuler.blogspot.com/
untuk bisnis online kunjungi. http://goo.gl/0IavR2
semuanya terbaru, termudah dan terpercaya
trimakasih
makasih kang.. kalau script async nya giamana ya?
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?
abdi ti Parsal kang.. salam kenal.. tos aya oge kanggo FB sareng Twitter, abdi tos ngaggo :)
maaf kang mau nanya, kok di template saya gak ada "body" ya :mikir mohon bantuan
ah masa.. 'body' itu wajib untuk template, kalau ga ada ga bakalan jadi dan ga bisa di save
Matur Nuwun Kang ismet. Semoga sehat selalu. aminnnnnn
Komentar ini telah dihapus oleh Unknown sebagai penulis.
mantab kang :D
//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
kalo mau buat yang sejajar kaya' yang agan punya di bawah posting blog tu kodenya seperti apa ya ??? med malam,,, dan salam kenal aja
syukur ketemu share bookmark ini :) jadi tambah berkurang error valid template,terimakasih kang
Komentar ini telah dihapus oleh Unknown sebagai penulis.
terima kasih atas informasi yang bermanfaat ini http://hainusantara.com/
*semoga direply*
kang minta script jejaring social seperti blog ini dong :(
itu scriptbiasa, tapi ditambah sticky coba kesini http://blog.kangismet.net/2012/10/membuat-sticky-widget-sidebar-di.html
mampir di sii gan http://www.mahvut.blogspot.com/
Komentar ini telah dihapus oleh ALPHA SHOP sebagai penulis.
super mantap gan... gwa coba yah gan..ehhehe
wahahah hanks gan
Simpan nya di mana kang ? ko panduan nya kurang lengkap ?
like postingan blog kok ga bisa ya yang muncul malah like blog
Artikel nagus :) kunjung balik gan
http://penasaranbgt.blogspot.com/
terima kasih kang..
hehehe berkat htmlnya
blogku jdi valid html5..
pdhl erronya puluhan pas ganti html lsg valid wkwkw
(y)
mantaap kang, saya coba dulu semoga berhasil ...
-d keren
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.
kang, script fb nya belum jalan ini error, kenapa ya ?
wah keren yeuh kang cobaan ah,atur nuhun