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 == "item"'>
<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 == "item"'>
<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.
