Product Rating Widget: Custom Rating Icons With Price-Link Control

We are really excited to announce our latest affiliate products rating widget with stars rating options (with custom rating icons) with a price control feature and product landing page link button. The widget is more suitable to the standalone websites/Blogger as there aren't enough third-party plugins to back up their affiliate campaigns.

For WordPress, there are a couple of advanced free and premium rating plugins. Every day we strive for bringing in something new to our readers that would actually help them out in their online presence. So here we have, an advanced custom rating widget for the affiliate (or any other products) that features price and a link to the landing page.

Follow the instructions below to add the widget to your blogs.

Step #1 Configure Rating Widget First

The first step is to configure the third-party rating widget for your blog. Go to rating-widget.com/ and get a rating widget for your self. First, you need to generate a unique user ID. Simply hit the button that says "Generate User-Key"

Once done, next click "Get Widget" Button (in green). The process is shown in the picture below.

Now simply note down the widget ID as shown in the picture above. DON'T hit Get Widget (No need of that).

Step #2 Customize The Rating Widget (Adding the code that you saved before)

Now Simply replace "YOUR USER ID" text in the code below with your rating code that you copied in the previous step.

<div id="ta_post_review_after">
<div>Add Product Description Here</div>
<div class="clear_space"></div>
<ul>
<li class="price">
<span>$49</span>
</li>

<div class="rw-ui-container rw-urid-1"></div>

<li class="after_button">
<div class="rating_btn">
<a class="ar_button ar_blue" rel="nofollow" target="_blank" href="PRODUCT LINK" itemprop="url">More Details</a>
</div>
</li>
</ul>
<div class="clear"></div>

<span style=" line-height:0px; font-size:8px; font-weight:bold; margin-left:290px;
">
<a style="color:#D3D3D3;" href="http://www.bloggingehow.com">widgets</a></span>
</div>

.ar_button.ar_blue {
background-color: #2C6DA0;
}

</style>

<div class="rw-js-container">
    <script type="text/javascript">
        // Async Rating-Widget initialization.
        function RW_Async_Init(){
            RW.init("YOUR USER ID",
            {
                advanced: {
                    font: {
                        color: "#000"
                    }
                },
                type: "star"
            });
            RW.render();
        }

        // Append Rating-Widget JavaScript library.
        if (typeof(RW) == "undefined"){
            (function(){
                var rw = document.createElement("script");
                rw.type = "text/javascript"; rw.async = true;
                rw.src = "http://js.rating-widget.com/external.min.js?t=js";
                var s = document.getElementsByTagName("script")[0];
                s.parentNode.insertBefore(rw, s);
            })();
        }

</script>
</div>

Now replace the other colored tags with description and product price etc as mentioned. Finally once the widget is customized, follow the next step.

Step #3 Add The Widget To Blogger

Now simply navigate to Blogger Dashboard >> Layout >> Add a Gadget >> HTML/JavaScript and paste the entire customized widget code in it. Hit Save and you're DONE!

Need Help?

Hope you guys liked the widget. Leave out your problems below. I'll try to get back as soon as possible. Stay safe guys and Best of Luck! Cheers!