Membuat Tombol Twitter, Google+1 dan Facebook Like, Valid HTML5 ~ Blog Alvin Warasi

Membuat Tombol Twitter, Google+1 dan Facebook Like, Valid HTML5

Alvin Warasi

Wednesday, 16 July 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 kode Facebook 'Like' button, Google 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.

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...

Advertise

Contact Me

300x250

Advertise

Contact Me

300x250

1 Comments

Balas

dataexpert 20 April 2020 at 15:43

I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. ExcelR Digital Marketing Classes In Pune Any way I’ll be subscribing to your feed and I hope you post again soon. Big thanks for the useful info.

Silakan Tinggalkan Komentar Anda!
Saya sangat menghargai atas pertanyaan dan komentar Anda, berkomentarlah dengan baik dan sopan.
Dilarang menyertakan link aktif, iklan, atau titip link...
Terima Kasih Sudah Berkomentar..

Konversi KodeTutup Konverter!ForumEmoticon

Terima kasih telah berkomentar