Hướng dẫn thêm tiện ích đánh giá 5 sao trên Blogspot

Xin chào các bạn. Trong bài viết này thì mình sẽ Hướng dẫn thêm tiện ích đánh giá 5 sao trên Blogspot.
Nếu bạn đang quản lý một web trên nền tàng blogger thì bạn không thể bỏ qua tính năng rating 5 sao vào bài viết của mình trên Blogger/Blogspot.

Blogger dù là nền tảng của Google nhưng gã khổng lồ tìm kiếm này hỗ trợ rất ít plugin đánh giá 5 sao như trên nhiều nền tảng khác. Bài viết sau đây sẽ rất hữu ích cho các bạn.

Lợi ích của xếp hạng 5 sao?

Đánh giá 5 sao tăng khả năng kích vào bài viết của bạn hơn so với những web/blog không dùng chúng, đơn giản cũng dễ hiểu thôi khi web/blog ta có xếp hạng 5 sao trên kết quả tìm kiếm sẻ giúp web/blog bạn trỏ nên uy tín, chuyên nghiệp hơn thì người đọc sẽ dễ dàng nhận thấy đây là một web/blog chuyên nghiệp và giúp cho người đọc nhận biết một bài viết có ích.

Đánh giá 5 sao này có xuất hiện trên kết quả tìm kiếm Google không?

Chỉ cần bạn thêm widget đánh giá 5 sao này và bật chế độ Google Rich Snippets thì sẽ xuất hiện lượt đánh giá trên kết quả tìm kiếm của bạn.

Hướng dẫn thêm tiện ích đánh giá 5 sao trên Blogspot

Trường hợp 1
Blogspot không còn thẻ <b:include name=’feedLinks’/> và không còn đoạn javascript ngay sau nó.
Bước 1
Cách 1: Sử dụng tiếng Anh cho đánh giá:
Các bạn dán đoạn javascript sau vào trước thẻ </body>

<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>
google.load("annotations", "1", {"locale": "<data:top.languageCode/>"});
function initialize() {
google.annotations.setApplicationId(<data:top.blogspotReviews/>);
google.annotations.createAll();
google.annotations.fetch();
}
google.setOnLoadCallback(initialize);
</script>

Cách 2: Sử dụng tiếng Việt cho đánh giá:
Trả lại <b:include name=’feedLinks’/> và thêm javascript.
Bạn mở rộng thẻ <b:includable id=’main’ var=’top’> ở cuối gần thẻ đóng nó có dạng:

<b:else/>
    <b:include name='mobile-main'/>
  </b:if>
  <b:if cond='data:top.showPlusOne'>
    <data:top.googlePlusBootstrap/>
  </b:if>
</b:includable>

Bạn thêm đoạn code sau vào ngay trên <b:else/>

<!-- feed links -->
    <b:include name='feedLinks'/>
<script src='http://www.google.com/jsapi' type='text/javascript'/>
    <script type='text/javascript'>
      google.load("annotations", "1", {"locale": "<data:top.languageCode/>"});
      function initialize() {
        google.annotations.setApplicationId(<data:top.blogspotReviews/>);
        google.annotations.createAll();
        google.annotations.fetch();
      }
      google.setOnLoadCallback(initialize);
    </script>

Bước 2: Chung cho cả 2 cách trên:
Tìm tới thẻ <div class=’post-footer’> và dán đoạn code sau vào sau nó

<b:if cond='data:blog.pageType == &quot;item&quot;'>
   <span class='star-ratings'>
      <div expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:background-color='#fff' g:height='35' g:type='RatingPanel' g:width='155' />
   </span>
   <div style='clear: both;'/>
</b:if>

Nếu sử dụng cách 2 thì trị số g:width=’155′ sửa lại thành 220 cho vừa với tiếng việt.
Lưu mẫu và xem kết quả.
Trường hợp 2
Bước 1
+ Nếu blogspot đang sử dụng mẫu cơ bản có từ trước những năm 2010 thì vẫn còn thẻ <b:include name=’feedLinks’/> và ngay sau nó là đoạn javascript:

<b:if cond='data:top.showStars'>
    <script src='http://www.google.com/jsapi' type='text/javascript'/>
    <script type='text/javascript'>
      google.load("annotations", "1", {"locale": "<data:top.languageCode/>"});
      function initialize() {
        google.annotations.setApplicationId(<data:top.blogspotReviews/>);
        google.annotations.createAll();
        google.annotations.fetch();
      }
      google.setOnLoadCallback(initialize);
    </script>
</b:if>

Bạn chỉ cần bỏ thẻ điều kiện là 2 dòng tô màu vàng là xong bước 1.
Tiện ích sẽ có ngôn ngữ là tiếng Việt vì là blog tiếng Việt.
+ Nếu blogspot sử dụng HTML dựa trên nền tảng HTML mới của blogger thì vẫn có thẻ <b:include name=’feedLinks’/> nhưng không có đoạn javascript thì bạn cứ thêm vào sau nó đoạn javascript đã bỏ thẻ điều kiện.
Bước 2
Tìm tới thẻ <div class=’post-footer’> và dán đoạn code sau vào sau nó

<b:if cond='data:blog.pageType == &quot;item&quot;'>
   <span class='star-ratings'>
      <div expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:background-color='#fff' g:height='35' g:type='RatingPanel' g:width='220' />
   </span>
   <div style='clear: both;'/>
</b:if>

Lưu mẫu và xem kết quả.
– Chú ý: Tiện ích chỉ có hiệu lực trên:
– Blogspot sử dụng tên miền riêng.
– Blogspot (blogspot.com) không sử dụng giao thức https.