Membuat Tombol Facebook, Twitter dan Google Plus Valid HTML5

Membuat Tombol Facebook, Twitter dan Google Plus Valid HTML5

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>

Tentang Penulis

Kang Mousir

Seorang blogger sejak tahun 2012 sampai sekarang. Saya hanyalah orang biasa yang senang dengan blog dan membagikan tulisan lewat media blog, karena itu saya membangun Blog Kang Mousir.

Facebook | Twitter | Instagram

  • 0 Artikel
  • 0 Komentar

Artikel Terkait

Komentar

Anonim
ijin nyoba kang .. :D
Anonim
Mantap Kang :D
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?
Sonaji Yusup
iya euy kang, ngg full nampil ,,, cuma setengah ,,
KOPERASII LESTARI
Berhasil kang, telah kami praktekkan.... terima kasih kang..
Khafa Q
masih sedikit bungung neh
Ujang Apud mss
terimaksih gan sudah saya praktekan
Screenshot 8
Terima kasih untuk infonya ,
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 !

Batal