Spry Comment Box Code

Screen-shot of the comments section of an example static webpage (generated using Spry).

There are four key steps to making a Spry comment box for a static web page.

1. Extract relevant comment data and output results in an XML format.
2. Display comment data using a Spry region.
3. Display a Spry interface for entering a new comment.
4. Store the new comment data.

In this article we will focus on steps 2 and 3 – displaying comments and collecting new comment information.

The easiest way to execute steps (1) and (4) is by linking your Spry comment box to a local blog system such as WordPress. By doing this, you can tap into the existing comment moderation and spam detection functionality of WordPress without having to reinvent the wheel.

In addition, it is fairly easy to link into WordPress using PHP scripts that can then be called directly from your Spry comment box. For an example on how to generate such an XML file, check out Displaying WordPress Comments in a Static Web Page.

Before creating a Spry comment box, note that Spry displays comments on a web-page using Javascript. As a result, your comments will not be visible to search engines. If you want your comments to be available for search engine optimization purposes, use PHP scripts instead of Spry.

1. Load Spry Data Set

<script type="text/javascript" src="SpryAssets/xpath.js"></script>
<script type="text/javascript" src="SpryAssets/SpryData.js"></script>

<script type="text/javascript">
var dsComments = new Spry.Data.XMLDataSet("sample.php?" + "d=" + (new Date()).getTime()", "comment-set/comment");

dsComments.setColumnType("commentDate", "date");
</script>

The first step is to load your comments data set.
Lines 1-2 – includes the Spry library so that you can call Spry functions within your HTML file.

Line 5 – loads in your comments data set. This is done by calling a PHP function that will read in your comments and then generate a valid XML file.

The sample XML code below shows an example of the XML file structure that we expect.

Note that in addition to linking to the PHP file, we also pass in the current date as an argument. The reason we do this, is to force the Spry data set to reload new data from the PHP file every time the page is reloaded. Otherwise, certain browsers may just cache the data set results and not update your comment box with new data.

+ "d=" + (new Date()).getTime()

Instead of passing the Spry function a PHP file we can also pass it a fixed XML file.

After reading in your comments data set, you can set the data types for the different fields. In line 7 we set the commentDate field of our data set to contain date data types.

All of this code should go into the header section of your HTML file.

Sample XML Data Set

<br />
<?xml version="1.0" encoding="utf-8"?><br />
<comment-set></p>
<p><comment><br />
<id>comment-1002</id><br />
<commentDate>July 26, 2009</commentDate></p>
<p><cite><![CDATA[<a href="http://shibashake.com">shibashake</a>]]></cite></p>
<p><avatarimg><![CDATA[<img alt='' src='http://www.gravatar.com/avatar/?d=monsterid&s=45' class='avatar avatar-45 avatar-default' height='45' width='45' />]]></avatarimg></p>
<p><text><![CDATA[Test Text]]></text><br />
</comment></p>
<p></comment-set><br />

1. id contains a unique identifier for the comment.
2. commentDate contains the date when the comment was originally posted.
3. cite contains a link to the author of the comment. If the comment author does not have an associated website URL, then it will just contain the author name.
4. avatarimg points to the avatar image of the comment author.
5. text contains the textual contents of the comment.

2. Display Comments From Data Set

<div id="comments-table" spry:region="dsComments">
<div spry:repeat="dsComments">
	<table width="100%" border="0">
	<tr>
		<td width="45"><a name={id} id={id}></a>{avatarimg}</td>
		<td class="subHeader">{cite}</td>
		<td width="200"><div align="right"><em>{date}</em></div></td>
	</tr>
	<tr>
		<td colspan="3">{text}</td>
	</tr>
	<tr>
		<td colspan="3">&nbsp;</td>
	</tr>           
	</table>
</div>
</div>

In the body of your HTML file, place the code above.

Line 1 – will create a Spry region that has access to the data set we just loaded.
Line 2 – will repeat displaying the table within it for each comment object in our data set.
Lines 3-15 – specifies the table structure of our comment.

<a name={id} id={id}></a>

This HTML fragment in line 5, sets an anchor for the comment, so that we can easily jump to specific comments within the HTML page. We assume that {id} contains a unique identifier for the comment.

This will display all the comments in our data set.

Here is an example.

Example Spry table structure within the Design view of Dreamweaver CS3

Example screenshot of Spry comment display.

3. New Spry Objects for Posting Comments

<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationTextarea.js" type="text/javascript"></script>


<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryValidationTextarea.css" rel="stylesheet" type="text/css" />

We include two new Spry objects for our post new comment interface, SpryValidationTextField and SpryValidationTextarea.

Include the code above into the header of your HTML file to get access to these two new Spry interface objects.

4. Display Post Comment Form

The comment form below contains standard HTML form elements except for two Spry objects – a validation text field (sprytextfield1) for the author of the comment and a validation text area (sprytextarea1) for the comment itself.

These Spry validation objects will ensure that a new comment contains at least a comment author, as well as actual comment content. The e-mail and website fields are optional, therefore they are defined using the regular HTML input tags.

When the user presses the Submit button within the form, the file specified on the action tag of the form (i.e. wp-comments-post.php) will get executed.

Example screenshot of the Spry post comment interface.

<form id="commentform" name="commentform" method="post" action="wp-comments-post.php">     

        
<div id="formregion"> 
	<table width="100%" border="0">
	
	<tr> // Input comment author name
		<td width="50">Name</td>
		<td>
		<span id="sprytextfield1">
			<label><input type="text" name="author" id="author" /></label>
			<span class="textfieldRequiredMsg">Please enter your name.</span>
		</span>
		</td>
	</tr>
	
	<tr> // Input comment author e-mail
		<td>E-Mail</td>
		<td><input type="text" name="email" id="email" /></td>
	</tr>
	<tr> // Input comment author website
		<td>Website</td>
		<td><input type="text" name="url" id="url" /></td>
	</tr>
	<tr> // Input comment text
		<td colspan="2">
		<span id="sprytextarea1">
			<label><textarea name="comment" id="comment" cols="70" rows="5"></textarea></label>
			<span class="textareaRequiredMsg">Please enter your comment.</span>
		</span>
		</td>
	</tr>
	</table>
</div> <!--end formregion--> 

<div class="buttons">
	<input type="submit" name="Submit" id="submit" value="Submit"/>
	<input type="reset" name="Reset" id="reset" value="Reset" />
</div>

</form>

<script type="text/javascript">
<!--
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1");
var sprytextarea1 = new Spry.Widget.ValidationTextarea("sprytextarea1");
//-->
</script>

5. Post Comment to WordPress

wp-comments-post.php is actually a WordPress file. It is used by WordPress blogs to post comments. To properly link your Spry comment form to wp-comments-post.php, you must name your input HTML objects in the same way specified above. In particular,

1. author should contain the commenter’s name.
2. email should contain the commenter’s electronic mail address.
3. url should contain the commenter’s website URL.
4. comment should contain the comment’s text.

In addition to author, email, url, and comment, you will need to define two additional values.

1. redirect_to which points to the file your browser should load after posting the new comment.
2. comment_post_ID which contains the page or post ID that WordPress should associate with the comment.

Below we set the redirect_to parameter to the current HTML page so that your browser will reload the current static web page after it posts the new comment. We set comment_post_ID to the WordPress page we want to associate with our current static web page.

<script>
document.write('<input type="hidden" name="redirect_to" id="redirect_to" value="' + window.location.href + '"/>')
document.write('<input type="hidden" name="comment_post_ID" id="comment_post_ID" value='+ pageID + '/>')
</script>

6. Get WordPress Page ID

You can obtain the page ID for any WordPress page by using the PHP script below.

Line-3 – loads the WordPress function library. get_page_by_title is a WordPress function that allows you to retrieve a WordPress page based on its title.

<?php
	// Load WordPress functions
	require('wp-load.php'); 

	$post = get_page_by_title('WordPress Page Title'); 
	echo $post->ID;
?>

7. Redirect User to the New Comment

Finally, the last thing you need to do is ensure that you redirect the user to their new comment after they have made their submission.

This process is slightly more complex than usual because your Spry comment table is dynamic and will not be populated yet when the page is first loaded. As a result, you need to separately check if there is an anchor (i.e., #) in the URL address after your Spry comment table is fully populated. If so, redirect the browser to the anchor location using the PHP code below.

You can place this javascript code right below your Spry.Data.XMLDataSet command.

<script>
Spry.Data.Region.addObserver("comments-table",{onPostUpdate:function(){
	// check if theres a anchor has in the url example.com/#example
	if(location.hash){
	window.location = location.hash; // go to the hash location
	}
}
});
</script>

That’s All Folks

Now you should have your very own Spry comment box that you can insert into any static web page. Feel free to leave me questions and comments if you should run into any errors.