How to Add Star Rating in Your Blog Post

Are you a passionate blogger looking to make your content more interactive and engaging? Adding star ratings to your Blogger blog posts can be a fantastic way to gather feedback from your readers and make your content stand out. Whether you're reviewing products, sharing recipes, or discussing movies, star ratings can add a visual appeal and provide valuable insights to you and your audience.

In this blog post, we'll explore how you can easily integrate star ratings into your Blogger blog posts to elevate your content and create a more immersive experience for your readers.

Why Add Star Ratings?

Star ratings serve multiple purposes that can benefit both bloggers and readers alike:

1. Visual Appeal: Star ratings add a visually appealing element to your blog posts, making them more attractive and enticing to readers.
2. User Engagement: Star ratings encourage user interaction by allowing readers to express their opinions and preferences with a click.
3. Feedback and Insights: By analyzing star ratings, bloggers can gain valuable insights into the preferences and interests of their audience, helping them tailor future content accordingly.
4. Enhanced Credibility: Incorporating star ratings into your reviews adds credibility to your assessments, as readers can see how others have rated the same content.

How to Add Star Ratings to Your Blogger Blog Posts

To add a star rating to our blog post we have to set up a Firebase real-time database and after that, we will implement a star rating code to our blogger theme.

First you create a firebase account using your google account. If you have already a firebase account your are good to go for next step. Follow these below steps to create a real-time database.

STEP 01

Go to your firebase dashboard and create a new project.

STEP 02

After clicking "Create Project" Now give a name of your project, here I giving a name which called "Star Rating" (You can give any name whatever you want). After that click the "Continue" button.

STEP 03

Again click the "Continue" button.

STEP 04

Now select your default firebase account from the dropdown and hit the "Create Project" button.

STEP 05

Now it will take few seconds to create the project. After that you get a "Continue" button , press that

STEP 06

Now you will redirect to the dashboard of your project. So click the "Build" button and you will get the "Realtime Database" button click that.

STEP 07

Now click the "Create Database" button

STEP 08

Now click the "Next" button

STEP 09

Now click the "Enable" button

STEP 10

Now click on the "Rules" tab

STEP 11

Remove all code and copy below code and paste it on rules tab. After that hit 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

Again click the "Data" tab and copy the database link link as shown on below image. Yahooo! Our firebase database creation is complete.

Let's implement star rating to our blog

Now, open your blogger website dashboard and go to Layout section. Add a HTML/JavaScript widget Copy below code and paste it in content section.

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

Hurrah! Done, Now check your post you can find star rating in your post. Hope you understand this process. If you are facing any trouble feel free to comment or reach out to me via our telegram channel.