Sgt Semantic Pepper's star rating Add-On for sNews

On behalf of Billy Shears, this is a stand alone app for your beloved sNews that your visitors will enjoy by enlighting stars to rate your articles, photos etc.

It's called Sgt Semantic Pepper's star rating Add-On. Sgt Pepper requires the PDO extension for PHP with the sqlite driver enabled. So you'll need to check if your hosting service provides sqlite support. You'll find instructions on the author'spage on how to check sqlite is enable. Make sure the database folder and its ratings.sqlite file is writable (777)...

Sgt Pepper works with or without javascript, but requires jQuery for Ajax functionality.
Superb hey?

• • •

First of all fasten seat belts: backity backity!
1st step [optional]:
If you don't have JQuery already copy those 2 lines above and paste them somewhere in your index file. For those in the back who are using vintage HTML, either in the HEAD tag, or before the closing HTML tag.


<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1.3.2");</script>

2nd step:
Go to ColorRating download page to grab the package. Unzip and upload the whole directory "rating" to your website root.

3rd step:
As per in 1st step copy and paste those 2 lines in your index.file:


<link rel="stylesheet" type="text/css" href="rating/rating.css" media="screen"/>
<script type="text/javascript" src="rating/rating.js"></script>

Note: you can copy and paste the CSS content to your existing CSS file to avoid extra HTTP request.

4th step:
Sgt Pepper needs that line to play his music with sNews:


<?php include('rating/rating.php'); ?>

Copy and paste it at the very top of your index file but depending upon your configuration Sgt Pepper allows you to paste wherever it works.

5th step [optional]
If as me you're an alien and your visitors too, you'll need to customize some strings in the JQuery rating JS file and in the rating PHP file. Take you english dictionary and translate those damn lines into your glubutz language:
- in the JS file: line 2 -> $('.status')
- in the JS file: lines 51 and 53 -> $this->status

How to use:
Easy, real easy...
2 options:
- in the Core itself, somewhere in function articles(), to have an automatic star rating function in your articles and/or pages
- in an article or a page by adding this simple line as per the example PHP file in the package:
<!-- Replace 'test1' with a unique name. Repeat this for every item you want to score. -->
So for sNews include it this way:

rating_form:|:test1

That's it.
That's all? No: we're going to had some semantic tags using the hreview microformat. Microformats?
hreview?
On this page you'll find lotta examples of sites that includes actual hReview markup.
By inserting the attributes defined by the standard into your source code, the datas you’re gonna present in your pages will become more easily understood by search engines that support interpretation of the format. Oh oh...
Believe me: SE bots love microformats. Feed them with hreview and your website gonna be nicely ranked in SERPS.

Ready for it?
Let's go again:
Open your rating PHP file. Look for:


<div class="sp_rating">
		<div class="rating">Rating:</div>
		<div class="base"><div class="average" style="width:<?php echo $rating->average; ?>%"><?php echo $rating->average; ?></div></div>
		<div class="votes"><?php echo $rating->votes; ?> votes</div>
		<div class="status">
			<?php echo $status; ?>
		</div>
</div>

and comment it out.
This is the code I'll be using for my "HTML5 showcases" to open... soon... I promise.


<div class="hreview-aggregate sp_rating">
		<div class="ratings"><span class="item"><span class="fn">Note :</span></span></div>
		<div class="base"><div class="average" style="width:<?php echo $rating->average; ?>%"><span class="rating"><meta itemprop="rating" content="<?php echo $rating->average; ?>" /><?php echo $rating->average; ?>%</span></div></div>
		<div class="votes"><span class="count"><?php echo $rating->votes; ?> votes</span></div>		
		<div class="status">
<?php echo $status; ?>
		</div>
</div>

Copy and paste it below the lines you've commented.

Okey? You're done?
Now we gonna test the markup. Give it a check at the Google's Rich snippets testing tool.

If it works you gonna see this: Aside you might need to tweak the properties of the classes in your CSS to fit your needs and design.
Do it with class! order you Sgt Pepper.

DEMO?
Below!
Dismiss!

Note :
83.0%
69 votes
1 2 3 4 5



Commentaires :

Fred K||#1
Fred K
Bravo! First mod, non? Félicitations!
Philippe||#2
Philippe
Not a Mod, but an Add-on with microdata embedded.
I think I'm going to use some top-level microdata items to annotate content since Google's bot seems to be fond of.

Les commentaires pour ce billet sont fermés