LÀM WEB‎ > ‎MẸO LÀM WEB‎ > ‎

Thêm nút Share cho trang web

  Nút Share là các nút bạn đặt trên trang web để người xem trang web có thể dễ dàng chia sẻ lên Facebook, Twitter, Google+ chỉ bằng vài cú nhấp chuột.
  Chúng ta hãy đặt nút Chia sẻ (Share Button) để các nội dung được chia sẻ rộng rãi hơn.

    Tạo nút chia sẻ từ ShareThis.com

Hình ảnh nút chia sẻ ShareThis:


  • Ưu điểm: Hầu hết các mạng xã hội SNS, sắp xếp đẹp và chuẩn
  • Nhược điểm: Có thể địa chỉ URL khi share lên Facebook, Twitter sẽ biến thành địa chỉ gọn kiểu "http://shar.es/c3XXX"
Cách thêm nút ShareThis:
 Truy cập trang ShareThis.com, chọn loại trang (ví dụ trang web, trang Wordpress, chọn hình dạng nút, loại SNS muốn share, cuối cùng sẽ hiện cửa sổ Đăng ký tài khoản, bạn chỉ cần ấn vào dòng "Just give me the code" để lấy mã mà không cần đăng ký.
  • Đoạn code nút share sẽ như sau:
<span class='st_sharethis_large' displayText='ShareThis'></span>
<span class='st_facebook_large' displayText='Facebook'></span>
<span class='st_twitter_large' displayText='Tweet'></span>
<span class='st_linkedin_large' displayText='LinkedIn'></span>
<span class='st_email_large' displayText='Email'></span>
  • Script: Bạn nhận được Script và phải dán vào ngay trước tag </head>:
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "ur-d207247d-f4a3-e98e-1da2-57aaba9d6ddf"});</script>


    Trực tiếp tạo nút chia sẻ

Facebook, Google+, Twitter, LinkedIn, v.v... cung cấp cho bạn đoạn code tạo nút share nên bạn có thể sử dụng các đoạn mã này để tạo nút chia sẻ. Tuy nhiên, do kích thước chúng khác nhau nên có thể căn chỉnh sẽ bị lệch. Ở đây, tôi hướng dẫn cách căn chỉnh cho đẹp.
Tham khảo:

Bí quyết căn chỉnh layout hàng nút chia sẻ cho đẹp:
  • Khi xếp các nút Share với nhau thì nhiều khả năng chúng sẽ bị lệch. Do đó, nên dùng bảng table để căn chỉnh.
  • Khi có lệch vị trí thì dùng thuộc tính "width, padding-top, padding-bottom" của tag <td> để căn chỉnh.
Hình ảnh:

Ví dụ về code:
<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/all.js#xfbml=1&appId=115476608547153";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<table>
  <tbody>
    <tr>
      <td style="padding-bottom: 2px;" width="105">
      <fb:like href="http://soho.saigonphoenix.com/" send="false" layout="button_count" width="100" show_faces="false"></fb:like>
      </td>
      <td style="padding-top: 0px;"><a href="http://twitter.com/share" class="twitter-share-button" data-text="VIETNAM IT OUTSOURCING" data-count="horizontal">Tweet</a>
      <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></td>
      <td>
      <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="medium"></g:plusone></td>
      <td>
      <script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
      <script type="IN/Share" data-counter="false"></script></td>
    </tr>
  </tbody>
</table>

Trong đoạn mã trên, script của nút share Facebook là đoạn sau:
<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/all.js#xfbml=1&appId=115476608547153";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Chỉ cần đoạn script này là bạn có thể thêm <fb:like href="http://it.saigonphoenix.com/" send="false" layout="button_count" width="100" show_faces="false"></fb:like> để tạo nút Like của Facebook.

Hiển thị, không hiển thị đếm số (count), ...

Ví dụ:
  • Đếm số LinkedIn thì hiển thị là data-counter="right", không hiện là data-counter="false"
  • Facebook,Google+ thì thiết lập thông số tương ứng (true / false)

Nút sẽ chia sẻ trang nào?

Những nút Share có chỉ định URL thì chia sẻ URL đó (ví dụ nút Like của Facebook ở trên) còn nút Share không chỉ định thì chia sẻ trang đặt nút đó.

(C) soho saigonphoenix
Comments