Senin, 13 Oktober 2014

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 kodeFacebook 'Like' buttonGoogle 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.

valid html5 button share

Berikut ini adalah tombol (button) yang 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'/>

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

Semoga bermanfaat...
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai
How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
Show Parser Box

Tidak ada komentar

[+] Berkomentarlah sesuai dengan topik artikel. Admin lebih suka komentar yang sifatnya membangun.
[+] Jangan meninggalkan link aktif, karena akan terdeteksi otomatis sebagai spam.
[+] Jika kesusahan mencari semua artikel dalam blog ini, pencet saja tombol Sitemap.
[+] Maaf Jika Komentar Tidak Saya Jawab Karena Saya Lagi Sibuk