Chi tiết về nút Google Plus One +1 (phần 1)

Chi tiết về nút Google Plus One +1

Lời nói đầu – Cosmos viết bài này là vừa dịch vừa tham khảo từ trang developers.google.com. Mục đích là phổ biến kiến thức về các plugin, API của các ông lớn cho các webmaster (những ai ngại tiếng Anh) và đóng góp một phần nhỏ bé cho nguồn tài nguyên kiến thức bằng tiếng Việt. Và điểm nhấn đó chính là “tài liệu bằng tiếng Việt”. Bởi tài liệu tiếng Anh đã có quá nhiều và quá chi tiết rồi. Mong nhận được sự ủng hộ và góp ý của các bạn.

Tài liệu này dành cho các webmaster và lập trình viên muốn thêm và tùy biến nút +1 cho website của họ. Các tùy biến bao gồm thay đổi đơn giản về kích thước nút bấm và các kỹ thuật load nâng cao.

Việc sử dụng mã nguồn nút +1 phải tuân theo chính sách của Google.

Mẹo: Bạn có thể sử dụng công cụ thiết lập dành cho nút +1 để tạo các mã tùy chọn.

Khởi đầu

Nút bấm đơn giản

Cách đơn giản nhất để thêm nút +1 vào trang web của bạn là khai báo nguồn JavaScript cần thiết và thêm thẻ +1 (vào vị trí mà bạn muốn nút G+1 hiển thị):

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone></g:plusone>

Script phải được lấy bằng giao thức https và có thể đặt bất kỳ đâu trên web của bạn. Để có tốc độ tải nhanh hơn, bạn nên tham khảo phần load bất đồng bộ.

Thẻ +1

Cú pháp chuẩn của thẻ +1 như sau:

<g:plusone size="tall" ... ></g:plusone>

Nếu muốn, bạn có thể dùng thẻ +1 theo chuẩn HTML5 (giá trị của thuộc tính class phải là “g-plusone” và bất kỳ thuộc tính nào của thẻ +1 cũng phải thêm tiền tố data-).

<div class="g-plusone" data-size="tall" ... ></div>

Mặc định, script mà bạn nhúng vào sẽ tự động “lần mò” đến node mà bạn chỉ định để hình thành nút +1 cho bạn. Bạn có thể cải thiện thời gian tạo nút +1 trên những trang lớn bằng việc sử dụng JavaScript API duyệt chỉ một element trên trang, hoặc biến một element cụ thể thành nút +1.

Tải JavaScript không đồng bộ

Việc tải không đồng bộ sẽ giúp trang web của bạn tiếp tục load trong khi trình duyệt tải mã JavaScript của nút +1. Bằng cách tải những element này song song, thời gian tải trang web của bạn sẽ được cải thiện.

Để  thêm mã JavaScript bất đồng bộ, sử dụng mã sau:

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

Mẹo: Để đạt hiệu quả cao, đặt đoạn mã trên ngay sau thẻ +1 cuối cùng.

**

Thiết lập

Chọn URL để +1

URL sẽ được +1 khi bạn bấm nút G+1 được xác định bằng một trong ba thứ sau, theo thứ tự là:

1. Thuộc tính href của thẻ +1

Thuộc tính này xác định rõ ràng URL sẽ được +1.

2. Thẻ <link rel=”canonical”… />

Nếu thuộc tính href của nút +1 không được khai báo, Google sẽ sử dụng URL canonical của trang web. Thông tin chi tiết về canonical URL cho một trang web có tại bài viết này.

3. URL cung cấp bởi document.location.href (không khuyến cáo)

Nếu tất cả các mẫu tin trên đều không được khai báo, Google sẽ sử dụng URL của trang chứ DOM đó. Bởi vì URL này có thể chứa các thông tin về session ID, các neo (anchors), hoặc những tham số khác không thuộc thành phần của canonical URL, nên việc dùng phương pháp này là không nên. Tốt nhất chọn phương án 1 hoặc 2 ở trên.

Chú ý: +1 là một hành động dạng public (công khai) và phải được thao tác với một public URL. Nếu bạn +1 cho một URL không public, sẽ bị lỗi. Có nghĩa là bài viết bạn muốn +1 phải được thiết lập ở chế độ public, chế độ mà ai cũng có thể đọc bài viết của bạn. (bài viết chỉ có mình bạn đọc được thì +1 cũng chẳng có ý nghĩa gì nhỉ)

(còn tiếp)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s