Instructions to add a 5 star review widget on Blogger

Hello friends. In this article, I will guide you to add a 5-star review utility on Blogger.

If you are managing a website on a blogger platform, you cannot ignore the 5-star rating feature on your articles on Blogger/Blogspot.

Blogger is a Google platform, but the search giant supports very few 5-star review plugins like on many other platforms. The following article will be very helpful for you.

Instructions to add a 5 star review widget on Blogger

What are the benefits of a 5 star rating?

5 star rating increases the likelihood of clicking on your articles more than web/blogs that don’t use them, it’s simply understandable when our web/blog has a 5 star rating on search results to help web/blog If you point to more prestige and professionalism, readers will easily see that this is a professional web/blog and help readers recognize a useful article.

Will this 5-star review appear on Google search results?

As long as you add this 5-star review widget and turn on Google Rich Snippets mode, the reviews will appear on your search results.

Instructions to add a 5-star review widget on Blogspot

Case 1
Blogspot has no  <b:include name=’feedLinks’/> tag  and no javascript right after it.
Step 1
Method 1: Use English for evaluation:
You paste the following javascript before the </body> . tag

<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>

Method 2: Use Vietnamese for reviews:
Return  <b:include name=’feedLinks’/>  and add javascript.
You expand the  <b:includable id=’main’ var=’top’>  tag at the end near the closing tag, it looks like:

<b:else/>
<b:include name='mobile-main'/>

</b:if>

<b:if cond='data:top.showPlusOne'>

<data:top.googlePlusBootstrap/>

</b:if>

</b:includable>

You add the following code right above  <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>

Step 2: Common to both methods:
Find the <div class=’post-footer’> tag and paste the following code after it

<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>

If using method 2, the value of g:width=’155′ will  be changed to 220 to fit Vietnamese.
Save the template and view the results.
Scenario 2
Step 1
+ If the blogspot is using a basic template from before 2010 there is still the  <b:include name=’feedLinks’/> tag  and right after it is the 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>

You just need to remove the conditional tag and the 2 lines will be highlighted in yellow to complete step 1.

The utility will have Vietnamese language because it is a Vietnamese blog.
+ If blogspot uses HTML based on blogger’s new HTML platform, there is still  <b:include name=’feedLinks’/> tag  but no javascript, you can just add after it the javascript that has removed the conditional tag.

Step 2

Find the <div class=’post-footer’> tag and paste the following code after it

<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>

Save the template and view the results.
– Note:  The utility is only valid on:
– Blogspot uses its own domain name.
– Blogspot (blogspot.com) does not use https protocol.

Click to rate this post!
[Total: 1 Average: 3]
49
Subscribe
Notify of
guest
0 Góp ý
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x