Bài blog này đã được cập nhật, xin vui lòng di chuyển xuống "update 1" và "cập nhật 2" phần.
Có một số cách để thêm G + nút trên trang web của bạn, bạn phải sử dụng các phương pháp chính xác để tránh tụt hậu vì điều này ảnh hưởng đến SEO của bạn.
Đây chỉ là một hướng dẫn nhanh chóng mà sẽ cho phép bạn thực hiện các tính năng Google +1 mới trên trang web của bạn với HTML5 cú pháp.
Điều đầu tiên là đầu tiên, bạn cần phải bao gồm các tập tin JavaScript sau đây trong tài liệu của bạn.
<script type = "text / javascript" src = "https://apis.google.com/js/plusone.js"> </ script>Xin lưu ý rằng sự bao gồm JavaScript phải sử dụng giao thức HTTPS. Bạn có thể bao gồm các tập tin tại bất kỳ điểm nào trong tài liệu của bạn, nhưng vì lý do hiệu suất mà bạn nên cân nhắc trì hoãn sự phân tích của các tập tin JavaScript. By trì hoãn phân tích cú pháp của JavaScript không cần thiết cho đến khi nó cần phải được thực hiện, bạn có thể làm giảm thời gian tải ban đầu của trang của bạn mà có thể cải thiện hiệu suất. Bạn có thể tìm thêm thông tin về tối ưu hóa tốc độ trang.
Bây giờ bạn có bao gồm các cộng một tập tin JavaScript, bây giờ là thời gian để thêm HTML5 giữ chỗ tương ứng. Bạn có thể thêm mã sau đây bất cứ nơi nào trong tài liệu của bạn, nhưng bạn phải đảm bảo các lớp học được thiết lập để "g-plusone" không nó sẽ không làm việc.
<div class="g-plusone" data-size="medium" data-count="true"></div>
<div class="g-plusone" data-size="small" data-count="true"></div>
Thông báo "đếm" thuộc tính là một boolean, bạn có thể thiết lập nó để "true" hoặc "false" để hiển thị / ẩn nó. Các biểu đồ sau chỉ ra các loại / kích thước có sẵn của 1 một nút.
Lưu ý tablate trên, Google sẽ sử dụng các giá trị href rằng bạn đã thông qua. Tuy nhiên, nếu các thuộc tính href không được thiết lập, Google sẽ tiếp tìm kiếm các rel = "canonical" tag trên trang. Nếu điều đó không được tìm thấy, Google sẽ sử dụng document.location.href.
UPDATE 1:
Google không làm việc trong một số trình duyệt và tôi đã quên để gọi các API. Vui lòng sử dụng đoạn mã sau:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Google +1 Demo</title>
<link rel="canonical" href="http://www.rocketmill.co.uk/" />
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">
function renderPlusone(){gapi.plusone.render("g-plusone", {"size": "small", "count": "true"});}
</script>
</head>
<body onload="renderPlusone();">
<div id="g-plusone"></div>
</body>
</html>
UPDATE 2:
Dưới đây là một cách tốt hơn để thực hiện Google +1. Tôi đang sử dụng jQuery để kích hoạt các chức năng khi tài liệu đã sẵn sàng, nhưng bạn có thể đi trước và loại bỏ các jQuery nếu bạn đang kêu gọi các API ở dưới cùng của tài liệu của bạn. Các mã sau đây cũng cho phép bạn tùy chỉnh Google +1 sử dụng mã HTML5 nạc và hợp lệ. Lưu ý, tôi không sử dụng rel = canonical tag trong ví dụ này, điều này hoàn toàn là bởi vì tôi muốn có mã để xác nhận. Bạn luôn có thể tuyên bố kinh điển nhưng sau đó các tài liệu sẽ không xác nhận. Kiểm tra các nút Google +1 demo.<!DOCTYPE html>
<html dir="ltr" lang="en-GB">
<head>
<title>Google +1 Button valid HTML 5</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">
$(document).ready(function(){
gapi.plusone.render("tall", {"size": "tall", "count": "true"});
gapi.plusone.render("small", {"size": "small", "count": "true"});
gapi.plusone.render("standard", {"size": "standard", "count": "true"});
gapi.plusone.render("tallbare", {"size": "tall", "count": "false"});
gapi.plusone.render("smallbare", {"size": "small", "count": "false"});
gapi.plusone.render("standardbare", {"size": "standard", "count": "false"}); });
</script></head>
<body>
<div id="tall"></div>
<div id="small"></div>
<div id="standard"></div>
<div id="tallbare"></div>
<div id="smallbare"></div>
<div id="standardbare"></div>
</body></html>