Cara Membuat Tombol Twitter, Google+, dan Facebook Like, Valid HTML5 ~ SCH-XP

Cara Membuat Tombol Twitter, Google+, dan Facebook Like, Valid HTML5 - Sebelumnya udah posting Cara Membuat Blog Valid HTML5, kali ini saya akan posting artikel yg berbau ke HTML5 lg nih, karena lg pusing mikirin posting apa, jadinya ane mending posting artikel ini yg saya temukan di blog.kangismet.net. kembali ke topik, 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.

Cara Membuat Tombol Twitter, Google+, dan Facebook Like, 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'/></span>

Google Plus

<div class='g-plusone' data-count='true' data-size='medium'/>
<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>
</div>

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 bawah <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'/></span>

14 komentar

Click here for komentar

Terima Kasih Sudah Berkomentar

Unknown

September 1, 2013 at 5:14 AM

Ini Dia Yang Saya Tunggu Tunggu Thank's Info Ya

Balas

Anonymous

September 1, 2013 at 5:16 AM

Pertamaxx gan.. infonya berguna mungkin setelah ini akan saya pasang di blog saya. Kunjungan bLiknya gan

MYT

September 1, 2013 at 5:20 AM

Mantep gan :)

September 1, 2013 at 5:56 AM

Tulisannya sangat menarik sehingga cukup mudah untuk dipraktekkan...
Sukses selalu buat anda

September 1, 2013 at 6:45 AM

makasih :D

September 1, 2013 at 7:15 AM

wah mangtab nih sudah valid html 5. ^_^

Apik IMcyber

September 1, 2013 at 9:58 AM

Mas untuk like facebook
352634211479923 <<< ini idd app facebook apa g??
klo di ganti ama id app saya boleh g

September 1, 2013 at 4:20 PM

wihh, yg ini udah valid HTML5,, keren gan.. :D

September 1, 2013 at 6:44 PM

Pertanyaan ku g pernah di jawab -_- :'(

September 1, 2013 at 11:58 PM This comment has been removed by the author.

September 2, 2013 at 5:16 AM

hehehe sorry, ane off tadi :v, kalo susah kontak ane kontak fb aja nih :
http://fb.com/rivaillee

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