Are you a dedicated blogger eager to enhance the interactivity and engagement of your content? Incorporating star ratings into your Blogger posts can be an excellent method to collect feedback from your audience and differentiate your content. Whether you’re evaluating products, sharing cooking instructions, or talking about films, star ratings can enhance visual interest and offer useful information for both you and your readers.
In this article, we will look at simple ways to add star ratings to your Blogger posts, helping to improve your content and provide a richer experience for your audience.
The Importance of Including Star Ratings
Star ratings offer various advantages that can enhance the experience for both readers and bloggers:
Attractive Design: Incorporating star ratings makes blog posts visually engaging, drawing in readers more effectively.
Reader Participation: These ratings promote interaction, allowing users to share their thoughts and preferences easily with just a click.
Understanding Audience: By examining star ratings, bloggers can collect important information about their audience's likes and dislikes, which aids in crafting content that aligns with their interests.
Increased Trust: Adding star ratings to reviews boosts the reliability of your evaluations, as visitors can see how others have rated similar content.
Steps to Implement Star Ratings on Your Blogger Blog
To include a star rating in your blog post, you need to first establish a Firebase real-time database and then integrate the star rating code into your Blogger template.
Begin by creating a Firebase account using your Google account. If you already have one, you can proceed to the next step. Follow the instructions below to set up a real-time database.
STEP 01
Access your Firebase dashboard and initiate a new project.
STEP 02
After you click on "Create Project," it's time to give your project a name. I’ll use "Star Rating" as an example, but you can pick any name you prefer. Then, click the "Continue" button.
STEP 03
Please click the "Continue" button once more.
STEP 04
Next, choose your default Firebase account from the dropdown menu and then press the "Create Project" button.
STEP 05
It will take a few seconds for the project to be created. After that, a "Continue" button will appear; click on it.
STEP 06
You will be taken to your project's dashboard. Click on the "Build" button, and then select the "Realtime Database" option.
STEP 07
Now, press the "Create Database" button.
STEP 08
Click the "Next" button now.
STEP 09
After that, hit the "Enable" button.
STEP 10
Now, go to the "Rules" tab.
STEP 11
Delete all the existing code, then copy the code provided below and paste it into the rules tab. Finally, click the publish button.
{
"rules": {
"StarRatingSystem": {
"$0O": {
".read": true,
".indexOn": [
"OO",
"O0"
],
"$pass": {
".write": "$0O==='yourwebsitelinkhere_com'",
".validate": "newData.hasChildren(['OO','O0'])",
"OO": {
".validate": "newData.val()>0&&newData.val()<=1&&newData.isNumber()"
},
"O0": {
".validate": "!data.exists()?newData.val()===1:newData.val()===data.val()+1"
},
"$00": {
".validate": false
}
}
}
}
}
}
Replace yourwebsitelinkhere_com text with your website link but here is a trick you can not replace your url directly if your url is example.blogspot.com or example.com write them like example_blogspot_com or example_com
STEP 12
Click the "Data" tab once more and copy the database link as illustrated in the image below. Hooray! We have finished setting up our Firebase database.
Time to add star ratings to our blog.
Next, navigate to your Blogger dashboard and select the Layout section. Insert an HTML/JavaScript widget and paste the code below into the content area.
<script>
var starRatingSystemSettings = {
"postPage" : {
"firebaseURL" : "your-firebase-link",
"fullStarImg" : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCQOzXM_msysnCUG8KPm4gK-5kMtViW-ceTbbG2FTpQK6SpbyLQGgnDVFgl02cBHZ7uUhLF8e8RL4HRgus7f6rB8SO1TBU_o2ctbAurdStU6Fu76foyPZdn1WtFRK41mILW6E3eNskYII/s1600/srs3.png",
"emptyStarImg" : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIoe4JlpS7IXKd_7JWq-Z8iuG_d24Z6Jk9lQxtdI_Q16nSIr3CXlZY_d_-I5yViR8jr_HlBPw2rLAD4iB5_RonNPeFTYX9YUr_c9FPheGWS3Yt5Q0HOaVK2OFK2rqAOfLlosMDREk9J7o/s1600/srs1.png",
"hoverStarImg" : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0rw_5c7cnEKaMYIXwaNk-vVihd4KTmKh_rLrhJGR8Ph1QrRGsODV-18NhE2OpqNWeU0bHGzhsMfEot0Izwa70onkHNpm_CJvbO4XVIr8xAueVMFNF5LqeXskq_0dNOKGNntO_pgVEm1Y/s1600/srs2.png",
"numberOfStars" : "5",
"starSize" : "30",
"textSize" : "15",
"textColor" : "#292929",
"fontFamily" : "Georgia, serif",
"align" : "center",
"topText" : "Rating:",
"bottomText" : "Average: $average$ / $max$ ($votes$ votes)",
"thankYouText" : "Thanks for voting",
"blockingText" : "You have already cast your vote, your rating is $userRating$.",
"position" : "bottom",
"status" : "active"
},
"indexPage" : {
"firebaseURL" : "your-firebase-link",
"fullStarImg" : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCQOzXM_msysnCUG8KPm4gK-5kMtViW-ceTbbG2FTpQK6SpbyLQGgnDVFgl02cBHZ7uUhLF8e8RL4HRgus7f6rB8SO1TBU_o2ctbAurdStU6Fu76foyPZdn1WtFRK41mILW6E3eNskYII/s1600/srs3.png",
"emptyStarImg" : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIoe4JlpS7IXKd_7JWq-Z8iuG_d24Z6Jk9lQxtdI_Q16nSIr3CXlZY_d_-I5yViR8jr_HlBPw2rLAD4iB5_RonNPeFTYX9YUr_c9FPheGWS3Yt5Q0HOaVK2OFK2rqAOfLlosMDREk9J7o/s1600/srs1.png",
"hoverStarImg" : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0rw_5c7cnEKaMYIXwaNk-vVihd4KTmKh_rLrhJGR8Ph1QrRGsODV-18NhE2OpqNWeU0bHGzhsMfEot0Izwa70onkHNpm_CJvbO4XVIr8xAueVMFNF5LqeXskq_0dNOKGNntO_pgVEm1Y/s1600/srs2.png",
"numberOfStars" : "5",
"starSize" : "30",
"textSize" : "15",
"textColor" : "#292929",
"fontFamily" : "Georgia, serif",
"align" : "center",
"topText" : "Rating:",
"bottomText" : "Average: $average$ / $max$ ($votes$ votes)",
"thankYouText" : "Thanks for voting",
"blockingText" : "You have already cast your vote, your rating is $userRating$.",
"position" : "none",
"status" : "readonly"
},
"staticPage" : {
"firebaseURL" : "your-firebase-link",
"fullStarImg" : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCQOzXM_msysnCUG8KPm4gK-5kMtViW-ceTbbG2FTpQK6SpbyLQGgnDVFgl02cBHZ7uUhLF8e8RL4HRgus7f6rB8SO1TBU_o2ctbAurdStU6Fu76foyPZdn1WtFRK41mILW6E3eNskYII/s1600/srs3.png",
"emptyStarImg" : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIoe4JlpS7IXKd_7JWq-Z8iuG_d24Z6Jk9lQxtdI_Q16nSIr3CXlZY_d_-I5yViR8jr_HlBPw2rLAD4iB5_RonNPeFTYX9YUr_c9FPheGWS3Yt5Q0HOaVK2OFK2rqAOfLlosMDREk9J7o/s1600/srs1.png",
"hoverStarImg" : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0rw_5c7cnEKaMYIXwaNk-vVihd4KTmKh_rLrhJGR8Ph1QrRGsODV-18NhE2OpqNWeU0bHGzhsMfEot0Izwa70onkHNpm_CJvbO4XVIr8xAueVMFNF5LqeXskq_0dNOKGNntO_pgVEm1Y/s1600/srs2.png",
"numberOfStars" : "5",
"starSize" : "30",
"textSize" : "15",
"textColor" : "#292929",
"fontFamily" : "Georgia, serif",
"align" : "center",
"topText" : "Rating:",
"bottomText" : "Average: $average$ / $max$ ($votes$ votes)",
"thankYouText" : "Thanks for voting",
"blockingText" : "You have already cast your vote, your rating is $userRating$.",
"position" : "bottom",
"status" : "active"
}
}
</script>
<script src="https://cdn.jsdelivr.net/gh/starratingsystem/blogger@1.0.0/ratingwidget.js" async></script>
<style>
.mainbar .BloggerStarRating, .sidebar .BloggerStarRating{
display: none;
}
.post .BloggerStarRating{
display: flex !important;
justify-content: center;
}
</style>Replace your-firebase-url text with your firebase database link but which you already copied before.
Great job! You’re finished. Take a look at your post, and you should see the star rating there. I hope this process makes sense to you. If you have any issues, don’t hesitate to leave a comment or contact me on our Telegram channel.
(1).jpg){kind=small}
