Nút thích Facebook, +1 Google, Twitter chuẩn HTML5

Mạng xã hội thì luôn có vai trò khá quan trọng trong việc đưa lưu lượng truy cập đến website của chúng ta. Do đó việc thêm các nút như Thích của Facebook, +1 của Google, Chia sẻ lên Twitter,.. là một phần không thể thiếu, đặc biệt là đối với những blog cá nhân đây.

Nút thích Facebook, +1 Google, Twitter chuẩn HTML5

Vấn đề xảy ra ở đây là, nếu bạn tối đang thiết kế hoặc tối tưu cho website của mình để đạt chuẩn HTML5, những số đoạn mã tạo nút chuẩn lại khó tìm kiếm, và đôi khi cần phải sửa đổi. Do đó dưới đây mình sẽ tổng hợp và cung cấp cho các bạn những đoạn mã chia sẻ qua mạng xã hội đạt chuẩn HTML5.

Google Plus

<div class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'/>
<script type='text/javascript'>
  (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>

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

Facebook

Đối với facebook, một mạng xã hội phổ biến nhất ở Việt Nam thì mình chia sẽ code ở cuối cùng là vì có 2 phương án cho bạn lựa chọn.

Sử dụng thẻ iframe

<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;'/>
đây là phương án tiện nhất chỉ sử dụng một đoạn mã duy nhất để chèn vào website của bạn, nhưng mình không khuyến khích sử dụng phương án này. Như khá nhiều bài viết khác trên mạng đã nói thẻ việc sử dụng thẻ iframe trên website của chúng ta thì hoàn toàn không tốt cho SEO một tý nào.

Sử dụng HTML5 mà facebook cung cấp

Bước 1: Chèn đoạn mã này xuống dưới thẻ <body>
<div id="fb-root"></div>
<script>(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/en_US/sdk.js#xfbml=1&amp;appId=191743990857285&amp;version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Bước 2: Chèn đoạn mã sau đây vào nơi muốn hiện nút "Thích"
<div class="fb-like" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>

Lời kết

Đấy là toàn bộ những đoạn mã để đặt các loại nút chia sẻ qua mạng xã hội đạt chuẩn HTML5 mà mình đã tổng hợp lại, mong rằng nó sẽ giúp ích được cho những bạn đang tìm cách tối ưu cho website đạt chuẩn.

10 bình luận

  1. avatar says

    21:17 Ngày 25 tháng 06 năm 2014

    Năm 2014 HTML5 lên ngôi, thiết kế phảng nổi trội :D

  2. avatar says

    16:49 Ngày 11 tháng 07 năm 2014

    Chào bạn mình đang muốn hỏi bạn là mình đang có một blog và muốn thiết kế giao diện phẳng cho nó. Blog của mình đã tải temple sẵn có . giờ thiết kế lại thì nó thay đổi toàn bộ temp đó đúng ko bạn? Sau khi thiết kế xong mình mới chuẩn hóa blog theo dạng HTML 5 nhỉ :D

  3. avatar says

    17:01 Ngày 11 tháng 07 năm 2014

    Không biết bạn muốn thiết kế lại như thế nào so với template gốc nên mình không thể nói được có phải thay đổi lại toàn bộ code trong đó hay không. Còn nếu vấn đề chỉ là chuẩn hóa thì bạn có thể chuẩn hóa trước hoặc sau cũng đều như nhau cả.

  4. avatar says

    00:01 Ngày 26 tháng 07 năm 2014

    Hì hì
    window.___gcfg = {lang: 'id'};
    lang id là ngôn ngử cuả indonesia mà ta, thay vi mới đúng nè

  5. avatar says

    20:20 Ngày 26 tháng 07 năm 2014

    Ngôn ngữ tiếng anh mà ta? . Lụm trực tiếp từ facebook mà https://developers.facebook.com/docs/plugins/like-button

  6. avatar says

    17:37 Ngày 21 tháng 12 năm 2014

    Hay quá, tìm mãi mới được cái này, nhưng nút share có được không vậy adm?

  7. avatar says

    19:20 Ngày 22 tháng 12 năm 2014

    Nút share của facebook hay sao bạn :D Hay là hình ảnh nó như thế nào?

  8. avatar says

    08:32 Ngày 21 tháng 06 năm 2015

    Tớ đã làm cái này nhưng đặt vào template thì nó không được thẳng hàng (như trong hình) bạn giúp mình làm cho nó thẳng hàng với!
    http://4.bp.blogspot.com/--IGo1ZCTxqo/VYYUBDEIEwI/AAAAAAAADpA/IkB2MG8IHug/s1600/Help.jpg

  9. avatar says

    18:19 Ngày 21 tháng 06 năm 2015

    Cái nút facebook nó là cái nút trùm khó chịu =.= Bác để lại domain cho mình đi edit tại đó cho chuẩn.

  10. avatar says

    18:30 Ngày 21 tháng 06 năm 2015

    Tớ đã chỉnh được rồi! Có cái này là bỏ được cái addthis nặng nề! Vậy mà giờ mới biết :))

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.