{"id":3457,"date":"2017-08-09T10:22:29","date_gmt":"2017-08-09T10:22:29","guid":{"rendered":"https:\/\/ampforwp.com\/tutorials\/?post_type=ht_kb&#038;p=3457"},"modified":"2019-12-16T09:48:54","modified_gmt":"2019-12-16T09:48:54","slug":"add-star-ratings-amp","status":"publish","type":"ht_kb","link":"https:\/\/ampforwp.com\/tutorials\/article\/add-star-ratings-amp\/","title":{"rendered":"How to Add Star Ratings in AMP"},"content":{"rendered":"<p>You can integrate Star Rating with the help of an extension called <a style=\"font-size: 16px;\" href=\"https:\/\/ampforwp.com\/amp-ratings\/\"><strong>AMP Rating<\/strong><\/a><\/p>\n<div class=\"hkb-article__content\">\n<p>It\u2019s pretty easy for you to set up because it works out of the box.<\/p>\n<p><strong>Here are the steps:<\/strong><\/p>\n<ol>\n<li>Download and Install<\/li>\n<li>Upload and Activate<\/li>\n<li>Done! The AMP Rating will be visible on the AMP version of your site.<\/li>\n<\/ol>\n<p>For more details how to upload extension click on this link <a href=\"https:\/\/ampforwp.com\/tutorials\/article\/amp-in-wordpress-beginners-guide\/?preview=true\/#method-2\">Upload and Install.<\/a><\/p>\n<\/div>\n<p>With the help of our Rating extension, you can add the rating star easily.<\/p>\n<p>It&#8217;s very easy to use the ratings extension. When you are editing a post, simply enter the number of stars you would like to give in the meta box which appears on the right side of the post edit screen. See the screenshot for reference.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-large wp-image-3458\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/custom-rating-1-1024x512.png\" alt=\"Rating to show on AMP\" width=\"643\" height=\"322\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/custom-rating-1-1024x512.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/custom-rating-1-300x150.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/custom-rating-1-768x384.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/custom-rating-1-50x25.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/custom-rating-1-60x30.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/custom-rating-1-100x50.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/custom-rating-1.png 1200w\" sizes=\"(max-width: 643px) 100vw, 643px\" \/><\/p>\n<p>So, after you add the value, it will be displayed on the top of the post like below screenshot.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-large wp-image-3459\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/custom-rating-new-1-1024x512.png\" alt=\"3 out of 5\" width=\"643\" height=\"322\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/custom-rating-new-1-1024x512.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/custom-rating-new-1-300x150.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/custom-rating-new-1-768x384.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/custom-rating-new-1-50x25.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/custom-rating-new-1-60x30.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/custom-rating-new-1-100x50.png 100w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/custom-rating-new-1.png 1200w\" sizes=\"(max-width: 643px) 100vw, 643px\" \/><\/p>\n<h5>Here is the list of all the rating plugins which are fully compatible with our AMP rating extension<\/h5>\n<ul>\n<li><strong>KK star ratings<\/strong><\/li>\n<li><strong>Wp Customer review<\/strong><\/li>\n<li><strong>WP-PostRatings<\/strong><\/li>\n<li><strong>WP Review<\/strong><\/li>\n<li><strong>Multi Rating<\/strong><\/li>\n<li><strong>Taqyeem<\/strong><\/li>\n<li><strong>Yet Another Star Rating<\/strong><\/li>\n<li><strong>WP Recipe Maker<\/strong><\/li>\n<li><strong>Shortcode Star Rating<\/strong><\/li>\n<li><strong>Not finding your plugin here? Please contact us to make it compatible after Purchase.<\/strong><\/li>\n<\/ul>\n<h3><strong>How to Set up a rating feature in AMP?<\/strong><\/h3>\n<p>First of all, you have to install\u00a0 any of the below Three plugins:<\/p>\n<ol>\n<li><a href=\"https:\/\/ampforwp.com\/tutorials\/article\/add-star-ratings-amp\/#how-to-set-up-kk-star-rating-in-amp\"><strong>KK star ratings<\/strong><\/a><\/li>\n<li><a href=\"https:\/\/ampforwp.com\/tutorials\/article\/add-star-ratings-amp\/#how-to-set-up-wp-customer-review-in-amp\"><strong>Wp Customer review\u00a0<\/strong><\/a><\/li>\n<li><a href=\"https:\/\/ampforwp.com\/tutorials\/article\/add-star-ratings-amp\/#how-to-set-up-yet-another-star-rating-in-amp\"><strong>Yet Another Star Rating<\/strong><\/a><\/li>\n<\/ol>\n<div>\n<p><strong>Follow the simple steps of AMP Rating.<\/strong><\/p>\n<p id=\"from-the-dashboard-we-go-to-the-left-hand-side-in-menu-bar-go-to-amp-option-panel\">From the dashboard, we go to the left-hand side in Menu bar go to AMP option panel &#8211;&gt; AMP Rating.<\/p>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/amp-rating-1.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-6088\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/amp-rating-1.png\" alt=\"\" width=\"179\" height=\"258\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/amp-rating-1.png 179w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/amp-rating-1-35x50.png 35w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/amp-rating-1-42x60.png 42w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/amp-rating-1-69x100.png 69w\" sizes=\"(max-width: 179px) 100vw, 179px\" \/><\/a><\/p>\n<\/div>\n<h3><mark style=\"background-color: #f9fbe7;\">How to Set up KK Star Rating in AMP<\/mark><\/h3>\n<p>First, you need to install &#8220;KK Star Rating plugin&#8221; and active after that this option will appear.<\/p>\n<ul>\n<li>Go to <strong>WordPress Admin Area<\/strong> -&gt;<strong> AMP option panel<\/strong> -&gt; <strong>AMP Ratings<\/strong> -&gt; Enable <strong>KK Star Rating Compatibility for AMP<\/strong><strong>\u00a0<\/strong>option<\/li>\n<\/ul>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/kk-star-rating-1111.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-6105\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/kk-star-rating-1111.png\" alt=\"\" width=\"919\" height=\"175\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/kk-star-rating-1111.png 919w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/kk-star-rating-1111-300x57.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/kk-star-rating-1111-768x146.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/kk-star-rating-1111-50x10.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/kk-star-rating-1111-60x11.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/kk-star-rating-1111-100x19.png 100w\" sizes=\"(max-width: 919px) 100vw, 919px\" \/><\/a><\/p>\n<div>\n<ul>\n<li><strong>KK Star Rating Compatibility for AMP: <\/strong>If you enable this option star rating will be displayed on amp post\/pages. Click on the save changes button.<\/li>\n<\/ul>\n<h4><strong>The output of KK Star rating\u00a0 Compatibility with AMP:<\/strong><\/h4>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/rating.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-6106\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/rating.png\" alt=\"\" width=\"898\" height=\"368\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/rating.png 898w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/rating-300x123.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/rating-768x315.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/rating-50x20.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/rating-60x25.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/rating-100x41.png 100w\" sizes=\"(max-width: 898px) 100vw, 898px\" \/><\/a><\/p>\n<\/div>\n<h3><mark style=\"background-color: #f9fbe7;\">\u00a0How to set up <strong>Wp Customer review in AMP<\/strong><\/mark><\/h3>\n<p>First, you need to install &#8220;Wp Customer review&#8221; and active after that this option will appear.<\/p>\n<ul>\n<li>Go to <strong>WordPress Admin Area<\/strong> -&gt;<strong> AMP option panel<\/strong> -&gt; <strong>AMP Ratings<\/strong> -&gt; Enable <strong>WP Customer Reviews Rating Compatibility for AMP <\/strong>option<\/li>\n<\/ul>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/amp-review-4.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-9816\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/amp-review-4.png\" alt=\"\" width=\"830\" height=\"168\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/amp-review-4.png 830w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/amp-review-4-300x61.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/amp-review-4-768x155.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/amp-review-4-50x10.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/amp-review-4-60x12.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/amp-review-4-100x20.png 100w\" sizes=\"(max-width: 830px) 100vw, 830px\" \/><\/a><\/p>\n<ul>\n<li><strong>WP Customer Reviews Rating Compatibility for AMP:<\/strong> Enable the option and click on the &#8220;<strong>Save Change<\/strong>&#8221; button.<\/li>\n<\/ul>\n<h4>After enabling this option the below output will be rendered.<\/h4>\n<h4><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/amp-review-2.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-9800\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/amp-review-2.png\" alt=\"\" width=\"1348\" height=\"656\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/amp-review-2.png 1348w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/amp-review-2-300x146.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/amp-review-2-768x374.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/amp-review-2-1024x498.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/amp-review-2-50x24.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/amp-review-2-60x29.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/amp-review-2-100x49.png 100w\" sizes=\"(max-width: 1348px) 100vw, 1348px\" \/><\/a><\/h4>\n<h4>To submit your review click on create your own review button.<\/h4>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/amp-review-3.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-9801\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/amp-review-3.png\" alt=\"\" width=\"1349\" height=\"656\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/amp-review-3.png 1349w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/amp-review-3-300x146.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/amp-review-3-768x373.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/amp-review-3-1024x498.png 1024w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/amp-review-3-50x24.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/amp-review-3-60x29.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/amp-review-3-100x49.png 100w\" sizes=\"(max-width: 1349px) 100vw, 1349px\" \/><\/a><\/p>\n<div>\n<h3><mark style=\"background-color: #f9fbe7;\">\u00a0How To set up Yet Another Star Rating in AMP<\/mark><\/h3>\n<p>First, you need to install &#8220;Yet Another Star Rating&#8221; and active after that this option will appear.<\/p>\n<ul>\n<li>Go to <strong>WordPress Admin Area<\/strong> -&gt;<strong> AMP option panel<\/strong> -&gt; <strong>AMP Ratings<\/strong> -&gt; Enable <strong>YASR Rating Compatibility for AMP<\/strong><strong>\u00a0<\/strong>option<\/li>\n<\/ul>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/yasr-rating.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-6108\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/yasr-rating.png\" alt=\"\" width=\"911\" height=\"148\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/yasr-rating.png 911w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/yasr-rating-300x49.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/yasr-rating-768x125.png 768w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/yasr-rating-50x8.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/yasr-rating-60x10.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/yasr-rating-100x16.png 100w\" sizes=\"(max-width: 911px) 100vw, 911px\" \/><\/a><\/p>\n<ul>\n<li><strong>YASR Rating Compatibility for AMP:<\/strong> If you enable this option star rating will be displayed on amp post\/pages. Click on the save changes button.<\/li>\n<\/ul>\n<h4>How to set-up the positioning of amp rating<\/h4>\n<\/div>\n<p><a href=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/automaticall-top-bottom.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-6110\" src=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/automaticall-top-bottom.png\" alt=\"\" width=\"761\" height=\"195\" srcset=\"https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/automaticall-top-bottom.png 761w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/automaticall-top-bottom-300x77.png 300w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/automaticall-top-bottom-50x13.png 50w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/automaticall-top-bottom-60x15.png 60w, https:\/\/ampforwp.com\/tutorials\/wp-content\/uploads\/2017\/08\/automaticall-top-bottom-100x26.png 100w\" sizes=\"(max-width: 761px) 100vw, 761px\" \/><\/a><\/p>\n<div>\n<p><strong>Automatically Add ratings at the top\/bottom of the content:<\/strong> If you enable this option you can place Automatically rating at the top or bottom.<\/p>\n<p><strong>That\u2019s it for this tutorial!<\/strong><\/p>\n<\/div>\n<div>\n<div class=\"hkb-article__content\">\n<div class=\"hkb-article__content\">\n<p>We hope it helped you. If you have any feedback or questions, then please share them in the comments section below.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div id=\"div-1\" class=\"hkb-feedback\">\n\t\t\t<strong class=\"ht-mobile-exit__title\">Ask your Questions Directly!<\/strong><br>\n\t\t\t<div class=\"hkb_widget_exit__content\" style=\"font-size: 14px;\">If you can't find the solutions in this article, then just ask us in the comments and we will answer it for you!<\/div>\n\t\t\t<a href=\"https:\/\/ampforwp.com\/support\/#contact\" id=\"button\" target=\"_blank\" rel=\"noopener noreferrer\"><button>Yes, I have a Question<\/button><\/a>\n\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>You can integrate Star Rating with the help of an extension called AMP Rating It\u2019s pretty easy for you to set up because it works out of the box. Here are the steps: Download and Install Upload and Activate Done! The AMP Rating will be visible on the AMP version&#8230;<\/p>\n","protected":false},"author":3,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":[],"ht-kb-category":[72],"ht-kb-tag":[73],"_links":{"self":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/3457"}],"collection":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/comments?post=3457"}],"version-history":[{"count":62,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/3457\/revisions"}],"predecessor-version":[{"id":15433,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb\/3457\/revisions\/15433"}],"wp:attachment":[{"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/media?parent=3457"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-category?post=3457"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/ampforwp.com\/tutorials\/wp-json\/wp\/v2\/ht-kb-tag?post=3457"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}