Membuat Tombol Twitter, Google +1 dan Facebook Like, Valid HTML5
0 views
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...
119 komentar
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
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
Sekali lagi Terima kasih.
hehehe berkat htmlnya
blogku jdi valid html5..
pdhl erronya puluhan pas ganti html lsg valid wkwkw
(y)
http://penasaranbgt.blogspot.com/
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 !
Noki…
kang minta script jejaring social seperti blog ini dong :(
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
untuk bisnis online kunjungi. http://goo.gl/0IavR2
semuanya terbaru, termudah dan terpercaya
trimakasih
TEMPLATE ERROR: Invalid data reference post.url: No dictionary named: 'post' in: ['blog', 'skin', 'view']
Maap nitip link akang :D
nanti error pada saat "save template".. ;)
appId=352634211479923
itu app apa ya ? dari facebooknya atau harus diganti dgn app fb yg kita pnya ?
Htr nhun steacanna. :D
Oh iya kang, kalau boleh URL Replace akun ini dialihkan ke "http://mestiqui.blogspot.com/"
Terimakasih kang :D
asyik dapat ilmu baru lagi disini..MINAL AIDIN WAL FA IDZIN ya kang.
Langsung tester ke blog ane :)
oiya gan, folback ya >>>>>>
blog kang ismet udh ku follow
Trims ;)
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..
eh iya, salam kenal buat kang ismet. sebenernya saya sudah lama dan sering berkunjung, cm jarang berkomentar. hehehe. maafkan saya
Kalau saya mah Soal NAvigasi Buat Apa ,
Template Aja Belum Ada. :D
Domain nemukabar.com saya masih nggak bisa disave di blogspot nya. Kunaon ini kang ismet ?
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 :)
bookmark heula ah , pameng nuju nuang seblak ladaa .. hehe
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 .. ??
tambah lagi yang ini.....kabuuuuuur :D
Harus dalam minggu ini saya benerin...target yang harus dilaksanakan ini
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....