I recently found a really neat way of integrating a WordPress driven testimonials page with a comment rating plugin that then outputs a HTML feed into the main site which is outside the blog, automatically displaying comment stars that could potentially be used for rich snippets in the future.
Why – Testimonials & customer comments are really important for SEO. With various recent Google updates they are becoming ever more important. As such I wanted a manageable way to look after testimonials (not using an external service like ReviewCentre) with a rating system for potential use with rich snippets, that would automatically output a feed anywhere on the site even outside the blog. Further I didn’t really want to do it with new software or plug-ins, I wanted to use as much of the current software as possible.
What – The site is question is run on Magento (a fantastic eCommerce platform) it has a WordPress blog and one of the pages is used to accumulate testimonials.
How – Firstly I installed the paid for version of the WordPress plugin Comment Rating Field Pro this automatically adds the next 5 star rating ability to the comments field (there is a free version that will work fine too). Then I used my Feedburner account to burn the comments feed and then utilised the Buzzboost option (in the Publicize tab in the feed settings) which generates the necessary script, set your required settings (make sure you set the ITEM CONTENT FORMAT to HTML – as this will allow the stars to appear). My feed code is below for reference (instructions on how to customise the feed can be found HERE):
<script src="https://feeds.feedburner.com/XXXXX/pzDX?format=sigpro&openLinks=new&nItems=2&excerptLength=15" type="text/javascript"></script>
Add your buzzboost script snippet where you want the feed to output (you can style the feed using CSS, instructions are HERE. Here is the CSS styling I used to start you off).
#creditfooter {display: none}
div.feedburnerFeedBlock p.feedTitle {;margin-bottom: 0px; margin-top: 0px; font-weight: bold;font-size:12pt}
div.feedburnerFeedBlock {font-size:8pt;color:#000000;border:1px solid #ffffff; background-color:#ffffff; padding:2px}
div.feedburnerFeedBlock p.date {color:#666666;margin-left: 0px; margin-right: 0px;margin-bottom: 0px; }
div.feedburnerFeedBlock li {margin-left:0; padding-left:0; list-style-image:none; list-style:none}
div.feedburnerFeedBlock ul {margin-left:0; padding-left:0; list-style-image:none; list-style:none}
.feedburnerFeedBlock ul li {padding: 0px;border-top-width: 1px; border-top-style:dashed; border-top-color: #eeeeee; text-align:left}
.feedburnerFeedBlock ul li span.headline a {margin-top: 10px; color: #777777;text-decoration: none;display: block;font-size:8pt;font-weight:bold}
.feedburnerFeedBlock ul li span.headline a:hover {color: #000000;font-size:8pt;font-weight:bold}Now all you need to do is to get the stars outputted on the front end. This is done by adding some CSS from the WordPress plugin, here it is… obviously change the URL to your own:
div.crfp-rating { width: 80px; height: 16px; background: url(https://www.XXXXX.com/blog/wp-content/plugins/comment-rating-field-pro-plugin/images/star.gif) 0 -32px repeat-x; text-indent: -9999px; overflow: hidden; }
div.crfp-rating-5 { width: 80px !important; }
div.crfp-rating-4 { width: 64px !important; }
div.crfp-rating-3 { width: 48px !important; }
div.crfp-rating-2 { width: 32px !important; }
div.crfp-rating-1 { width: 16px !important; }
div.crfp-rating-0 { width: 0 !important; }Please note, at the time of writing all the above works, if the Comment Rating Field Pro plugin gets updated then the integration may fall apart.
If anyone has any questions please feel free to ask and I’ll try and help.