How to use the Bazaarvoice API to completely handle styling and displaying the star rating and "Read reviews" links. Also shows an accurate number of reviews. Requires loading the bvapi.js first.

BVSingleProductExample.js

// PLACE THIS HTML where you want the star rating and "Read x Reviews" to show up
// <div id="bvReview" data-productid="3898"></div>

// ..................... Javascript for bazaarvoice reviews and ratings for a single product .................................

$(document).ready(function() {
	// This part just readies the bvReview DIV to be filled with the star rating and a "Read reviews" link
	var bvrrDiv = $('#bvReview');
	var productId = bvrrDiv.attr("data-productid");
	bvrrDiv.append("<div id='BVRRInlineRating-" + productId + "'>");
	bvrrDiv.append("<a class='bvReadReviews' data-productid='" + productId + "' href='' style='display:block;margin-top:4px;' onclick=\"openReviews('" + productId + "'); return false;\">Read reviews</a>");

	var participatingBVDealers = [];
	participatingBVDealers.push(productId);

	// Let's get the number of reviews

	link = $("a.bvReadReviews");
	var url = "http://api.bazaarvoice.com/data/reviews.json?apiversion=5.4&passkey={yourpasskey}&Filter=ProductId:" + link.attr("data-productid") + "&Filter=IsRatingsOnly:false&Limit=1";

	$.get(url, function (data)
	{
		var numReviews = data.TotalResults || 0;
		link.text("Read " + numReviews + " reviews");
		// if you want to show "Write reviews" when there are no reviews, *uncomment* the following:
		//if (numReviews === 0) {
		//	link.text("Write a review");
		//}
		
		// if you want to show "Write reviews", *comment* out the following:
		if (numReviews === 0) {
			bvrrDiv.hide(); // don't show anything because it would say "Read 0 Reviews"
		}
	})
	.fail(function (jqXHR, textStatus, errorThrown)
	{
		console.log(textStatus + " " + errorThrown);
	});

	if (participatingBVDealers && participatingBVDealers.length > 0) {
		$BV.ui('rr', 'inline_ratings', {
			productIds: participatingBVDealers,
			containerPrefix: 'BVRRInlineRating'
		});
	}
});