Blog Personal tentang tips Blogging dan Internet

Membuat Tombol Facebook, Twitter dan Google Plus Valid HTML5

Social Media
Sepertinya minggu ini masih membahas tentang Validasi HTML5. Ok kali ini Saya akan berbagi tips membuat tombol share valid HTML5, pada tombol suka Facebook biasanya akan di dapatkan iframe, seperti yang sudah Saya bahas sebelumnya bahwa iframe sangat tidak bagus untuk SEO.

Pada tombol share ini Saya mengubahnya menjadi Asyncron agar kinerjanya lebih cepat. Silakan Anda simak baik - baik.

Tombol Facebook

<div id='fb-root'/>
<span class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' expr:data-href='data:post.url'/>

Tombol Twitter

<a class='twitter-share-button' data-count='horizontal' expr:data-text='data:post.title' expr:data-url='data:post.url'>Tweet</a>

Tombol Google Plus

<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'/>

JavaScript

Silakan Anda simpan JavaScript Asyncron ini diatas kode </body>.

<script type='text/javascript'>
//<![CDATA[
(function(){var fb1=document.createElement('script');fb1.type='text/javascript';fb1.async=true;fb1.src='http://connect.facebook.net/id_ID/all.js#xfbml=1','facebook-jssdk';var fb2=document.getElementsByTagName('script')[0];fb2.parentNode.insertBefore(fb1,fb2)})();(function(){var tw1=document.createElement('script');tw1.type='text/javascript';tw1.async=true;tw1.src='http://platform.twitter.com/widgets.js';var tw2=document.getElementsByTagName('script')[0];tw2.parentNode.insertBefore(tw1,tw2)})();(function(){var gp1=document.createElement('script');gp1.type='text/javascript';gp1.async=true;gp1.src='https://apis.google.com/js/plusone.js';var gp2=document.getElementsByTagName('script')[0];gp2.parentNode.insertBefore(gp1,gp2)})();
//]]>
</script>

Cara Memasangnya

Pertama silakan Anda simpan CSS ini diatas kode ]]></b:skin> atau </style>.

.share{display:block;padding:0;margin:0}
Untuk memasang Tombol Facebook, Twitter dan Google Plus pada blog silakan Anda cari dahulu kode seperti dibawah ini.

<b:includable id='post' var='post'>
<article class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
.....
<data:post.body/>
.....
 </article>
</b:includable>
Setelah ditemukan kode diatas silakan Anda simpan kode tombol share tersebut diatas kode <data:post.body/> bila ingin menyimpanya diatas artikel atau simpan dibawah kode <data:post.body/> bila ingin menyimpannya dibawah artikel. Sehingga menjadi kode dibawah ini, perhatikan kode yang Saya tandai.

<b:includable id='post' var='post'>
<article class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
.....
<data:post.body/>
<div class='share'>
<span style='float:left;margin-right:35px;font-weight:bold'>Bagikan :</span>
<div id='fb-root'/><span class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' expr:data-href='data:post.url' style='margin-right:40px;'/><a class='twitter-share-button' data-count='horizontal' expr:data-text='data:post.title' expr:data-url='data:post.url'>Tweet</a><div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'/>
  <div class='clear'/>
</div>
.....
 </article>
</b:includable>

Berlangganan : Masukan e-mail Anda untuk mendapatkan kiriman artikel terbaru dari Kang Mousir langsung di pesan kotak masuk.

feedburner

19 Komentar untuk "Membuat Tombol Facebook, Twitter dan Google Plus Valid HTML5"

Ramanda Sugraha

ngomong" masalah iframe, kan kotak komentar di blog itu kan pakai iframe, itu gimana kang?

Kang Mousir

Kalau iframe komentar blogger itu lain lagi ceritanya :D

AnonyMorph S

Itu tombol facebook nya di blog ini kalo di klik hasil nya kok tampilan cuma setengah ya?

KOPERASII LESTARI

Berhasil kang, telah kami praktekkan.... terima kasih kang..

Sonaji Yusup

iya euy kang, ngg full nampil ,,, cuma setengah ,,

Kang Mousir

heheh itu dari sononya biar valid :)

Ujang Apud mss

terimaksih gan sudah saya praktekan

Su jarwo

Buat satu paket kalau di coba langsung keren begitu bisa dak Kang,makasih

hefry fajar

ada yang tw g np ya ko blog q biasanya di alihkan ke blog lain

Surga Kenari

Trimakasih, bekerja dengan sempurna. Tadinya gagal tampil sblum di pasang javas.

Putri Zia Ulhaq Chalik

Kang , bagi tutorial dong cara buat tombol follow seperti punya akang yang di sidebar yang paling atas.

Silakan berkomentar sesuai dengan topik. Jangan menyisipkan link pada komentar dan jangan sampai komentar Anda masuk komentar SPAM.

Jangan salahkan Saya bila komentar Anda dihapus !

Klik emoticon : :) :D :( :-o @@, :s :wow: 8) :x :P :| ;) :lol: :oops: :cry: :evil: :twisted: :roll: :!: :?: :idea: :arrow: :mrgreen: :-d