Blog rating

Site URL: https://chiroup.com

Hi there,

I am wanting to add blog ratings where users can rate our blog posts on a scale of 1-5 with star ratings. Is there code or a plugin I can add to include these ratings in the blog posts? 

There are a number of them out there:

https://ourcodeworld.com/articles/read/498/top-7-best-jquery-javascript-star-rating-plugins

1 hour ago, derricksrandomviews said:

There are a number of them out there:

https://ourcodeworld.com/articles/read/498/top-7-best-jquery-javascript-star-rating-plugins

If I wanted to use this https://github.com/nashio/star-rating-svg How would I add it to my site?

I am not a coder, but there are folks here who can tell you how to implement javascript. 

On 2/25/2022 at 11:03 PM, ChiroUp said:

If I wanted to use this https://github.com/nashio/star-rating-svg How would I add it to my site?

Try adding this to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<style>
  .jq-stars {
  display: inline-block;
}

.jq-rating-label {
  font-size: 22px;
  display: inline-block;
  position: relative;
  vertical-align: top;
  font-family: helvetica, arial, verdana;
}

.jq-star {
  width: 100px;
  height: 100px;
  display: inline-block;
  cursor: pointer;
}

.jq-star-svg {
  padding-left: 3px;
  width: 100%;
  height: 100% ;
}

.jq-star:hover .fs-star-svg path {
}

.jq-star-svg path {
  /* stroke: #000; */
  stroke-linejoin: round;
}

/* un-used */
.jq-shadow {
  -webkit-filter: drop-shadow( -2px -2px 2px #888 );
  filter: drop-shadow( -2px -2px 2px #888 );
}
</style>
<script>
  $(".my-rating").starRating({
    starSize: 25,
    callback: function(currentRating, $el){
        // make a server call here
    }
});
</script>

Next, add this to Blog Page Header > Post Blog Item Code Injection

<div class="my-rating"></div>

On 2/27/2022 at 2:35 AM, tuanphan said:

Try adding this to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<style>
  .jq-stars {
  display: inline-block;
}

.jq-rating-label {
  font-size: 22px;
  display: inline-block;
  position: relative;
  vertical-align: top;
  font-family: helvetica, arial, verdana;
}

.jq-star {
  width: 100px;
  height: 100px;
  display: inline-block;
  cursor: pointer;
}

.jq-star-svg {
  padding-left: 3px;
  width: 100%;
  height: 100% ;
}

.jq-star:hover .fs-star-svg path {
}

.jq-star-svg path {
  /* stroke: #000; */
  stroke-linejoin: round;
}

/* un-used */
.jq-shadow {
  -webkit-filter: drop-shadow( -2px -2px 2px #888 );
  filter: drop-shadow( -2px -2px 2px #888 );
}
</style>
<script>
  $(".my-rating").starRating({
    starSize: 25,
    callback: function(currentRating, $el){
        // make a server call here
    }
});
</script>

Next, add this to Blog Page Header > Post Blog Item Code Injection

<div class="my-rating"></div>

 

Hi there, I added both codes and nothing happened. 

On 3/3/2022 at 12:43 AM, ChiroUp said:

Hi there, I added both codes and nothing happened. 

Can you share link to a blog post on your site?

On 3/5/2022 at 8:17 PM, tuanphan said:

Can you share link to a blog post on your site?

https://chiroup.com/blog/chiropractic-evaluation-of-neurologic-heel-pain

On 3/17/2022 at 8:52 PM, ChiroUp said:

https://chiroup.com/blog/chiropractic-evaluation-of-neurologic-heel-pain

Try removing it from Blog Post Item Code Injection & Add a Code Block on a specific post >> Paste the code

<div class="my-rating"></div>

(I Just want to test to see if it works on a blog post)