Add star ratings to your site

Jun 12 2021

This article is about adding a star rating display to your own website.

Why? #

Someone asked a question on reddit about how to add star reviews.

I have recently started a book review blog and I was wondering how to add stars at the end of my review? Like if I thought that a book deserved 4/5 stars, I want to visually show 4 highlighted and 1 greyed out star at the end of the text.

My own book reviews use a more involved system, but I repurposed it to be applicable to any site. Most blogs allow insertion of HTML blocks when drafting a post.

If you just want to copy-paste without messing with the theme, here’s the whole code:

Embed

<div class="rating" data-rating=4.5></div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/><style>.rating{display:flex;align-items:baseline}.rating .filled{color:gold}.rating .empty{color:rgba(0, 0, 0, 0.3)}.rating .half{position:relative;display:flex;align-items:flex-start}.rating .half .filled{z-index:1}.rating .half .empty{position:absolute;left:0;z-index:0}</style><script>function getRatingHTML(a){let t="",i=parseFloat(a),e=Math.floor(i),l=0;for(;e>l;)t+='<i class="fas fa-star filled"></i>',l++;i>e&&(t+='<div class="half"><i class="fas fa-star-half filled"></i><i class="fas fa-star empty"></i></div>',l++);let s=5-l;for(l=0;s>l;)t+='<i class="fas fa-star empty"></i>',l++;return document.createRange().createContextualFragment(t)}function initRating(){document.querySelectorAll(".rating").forEach(a=>{a.appendChild(getRatingHTML(a.dataset.rating))})}initRating();</script>

It will appear like so:

To change the stars, set data-rating=4.5 to any number, such as data-rating=3 for three stars.

Plain HTML and CSS #

If you don’t want to use JavaScript, you can manually create the stars with a set of HTML and CSS.

CSS embed (paste within <head>)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<style>.rating{display:flex;align-items:baseline}.rating .filled{color:gold}.rating .empty{color:rgba(0,0,0,.3)}.rating .half{position:relative;display:flex;align-items:flex-start}.rating .half .filled{z-index:1}.rating .half .empty{position:absolute;left:0;z-index:0}</style>

HTML

<div class="rating">
  <i class="fas fa-star filled"></i>
  <i class="fas fa-star filled"></i>
  <i class="fas fa-star filled"></i>
  <div class="half">
    <i class="fas fa-star-half filled"></i>
    <i class="fas fa-star empty"></i>
  </div>
  <i class="fas fa-star empty"></i>
</div>

<div class="rating">
  <i class="fas fa-star filled"></i>
  <i class="fas fa-star empty"></i>
  <i class="fas fa-star empty"></i>
  <i class="fas fa-star empty"></i>
  <i class="fas fa-star empty"></i>
</div>

<div class="rating">
  <i class="fas fa-star filled"></i>
  <i class="fas fa-star empty"></i>
  <i class="fas fa-star empty"></i>
  <i class="fas fa-star empty"></i>
  <i class="fas fa-star empty"></i>
  <i class="fas fa-star filled"></i>
  <i class="fas fa-star filled"></i>
  <i class="fas fa-star filled"></i>
</div>

Altering the theme #

Copy-pasting the whole block every time you write a review is somewhat unwieldy. If your site designer allows you to edit the HTML theme itself, or add CSS and JavaScript, you can do it the ‘proper’ way. Then for every post, you only need to add the <div class="rating" data-rating="4.5"></div> part.

If you don’t understand how to edit your theme, be sure to find a guide for your platform: How to edit theme on Blogger, how to edit Wordpress code, etc.

Add CSS #

Add a reference to the Font Awesome stylesheet. Font Awesome provides a lot of icons, such as the stars. It’s pretty common in a lot of themes, but if you don’t have it, you can add the following line inside the <head>:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />

Also add the CSS for the stars to color and align properly:

.rating{
  display:flex;
  align-items:baseline;
}.rating .filled{
  color: #fcc74c; /* Change the color of the stars here */
}.rating .empty{
  color: rgba(0, 0, 0, 0.3);
}
.rating .half{
  position: relative;
  display: flex;
  align-items: flex-start;
}.rating .half .filled{
  z-index:1;
}.rating .half .empty{
  position: absolute;
  left: 0;
  z-index: 0;
}

Put the following <script> in your HTML. Because it’s a JavaScript snippet, it should go near the end of the page, ideally somewhere in the footer, or right before </body>

<script>
function getRatingHTML(a){let t="",i=parseFloat(a),e=Math.floor(i),l=0;for(;e>l;)t+='<i class="fas fa-star filled"></i>',l++;i>e&&(t+='<div class="half"><i class="fas fa-star-half filled"></i><i class="fas fa-star empty"></i></div>',l++);let s=5-l;for(l=0;s>l;)t+='<i class="fas fa-star empty"></i>',l++;return document.createRange().createContextualFragment(t)}function initRating(){document.querySelectorAll(".rating").forEach(a=>{a.appendChild(getRatingHTML(a.dataset.rating))})}initRating();
</script>

Write a post #

Wherever you want a 5-star rating to show up, use the HTML block:

<div class="rating" data-rating="4.5"></div>

Change the data-rating to any number (preferably less than or equal to 5).

That’s it!

Codepen #

The source code is on CodePen.

Credits #

Header photo by Black ice from Pexels