WELLCOME TO MY TUTORIAL KAPTEN404 Cara Membuat Tombol Twitter, Google +1 dan Facebook Like Valid Html5 ~ KAPTEN404

Cara Membuat Tombol Twitter, Google +1 dan Facebook Like Valid Html5

Sobat pasti tahu peran jejaring sosial dalam dunia blogger, bagi yang belum tahu nih saya beri tahu perannya sangatlah penting karena dapat meningkatkan trafik blog kita secara ceepat dan mudah akan tetapi sayangnya kebanyakan saya menemukan tombol seperti google plus dan facebook like itu tidak valid html5. Kali ini saya akan mencoba untuk mengatasi hal tersebut, langsung saja simak post berikut ini!!!


Sobat tahukan gambar diatas itu gambar apa, yup benar itu adalah gambar button facebook like dan lainnya, tapi kebanyakan orang button itu tidak valid html5nya sekarang saya akan memberi sobat kode yang valid html5 lihat dibawah.

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

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: &#39;id&#39;};

(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
</script>
Facebook Like

<iframe expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;amp;send=false&amp;amp;layout=button_count&amp;amp;show_faces=false&amp;amp;width=90&amp;amp;action=like&amp;amp;font=arial&amp;amp;colorscheme=light&amp;amp;height=21&quot;' style='border:none; overflow:hidden; width:90px; height:21px;'/>



Update

Karena ada masukan dari blog sebelah, bahwa iframe kurang bagus untuk SEO dan disarankan untuk menggunakan kode dari Facebook Developer. Namun bagi soat yang tidak mau membuka 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=211719005686931";
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'/>


Share:

Tidak ada komentar:

Posting Komentar

Popular Posts

Diberdayakan oleh Blogger.

Cari Blog Ini

  • ()
  • ()
Tampilkan selengkapnya

menu

kontak

Food

Arsip Blog

Recent Posts

Unordered List

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.

Pages