Yesterday I received a really appreciative email message from someone who enjoyed my post on converting .caf files to .mp3's. The sender stated she has a friend who recently lost a close family member. The friend had saved several voice mails from the deceased on her iPhone, and wanted to save the voice mail audio files as a remembrance. With the information found on my post, everything worked out great: the friend extracted the .caf files from the iPhone and successfully converted them to an .mp3, and I got a nice email praising my blog!This was clearly a special case, but it got me thinking that I might be able to make it easier for people to give me a general thumbs-up or thumbs-down for each of my blog posts. For a number of reasons, I don't accept comments on my blog so this is the next best thing.
It's actually fairly easy to add your own "Did You Find this Helpful?" widget in Movable Type:
Enjoy.
- I added a new Template Module, and named it "Did You Find this Helpful?":
<div id="helpful" class="comments">
<h2 class="comments-header">Did You Find this Helpful?</h2>
<div class="comment-content" id="helpful-content">
<p>Did you find this post helpful, or at least, interesting?</p>
<p><input type="button" value="Yes" feedback="yes" />
<input type="button" value="No" feedback="no" /></p>
</div>
</div> - In my Entry Archive Template, I added a reference to my new Template Module so that it will be included on every published entry:
<$mt:Include module="Did You Find This Helpful?"$>
<$mt:Include module="Trackbacks"$>
<$mt:Include module="Comments"$> - To style the Yes/No input buttons, I whipped up a little CSS:
#helpful input {
width: 50px
padding: 3px
margin-top: 4px
color: #4d4d4d;
font: bold 13px arial;
background-color: #BDD2E0;
border:1px solid #c0c0c0;
cursor: pointer;
}
#helpful input:hover {
border-color: #ffffff;
background: #11b1e0;
text-shadow: 1px 1px 0 #0d80a2;
color: #fff;
} - And finally, I'm using jQuery to send the yes or no feedback ping to my server with AJAX:
Kolich.Helpful = {};
Kolich.Helpful.tracker = "/tracker/Helpful/";
Kolich.Helpful.setup = function(){
$("#helpful input:button").click(function(e){
var href = encodeURIComponent(window.location.href);
var feedback = $(this).attr("feedback");
$.get(Kolich.Helpful.tracker+feedback+"/?"+href,function(r,s){
$("#helpful-content").html("Thank you for your feedback!");
});
});
}
In a nutshell, I'm letting Apache act as my feedback logging mechanism. The JavaScript sends a GET to http://mark.koli.ch/tracker which returns an HTTP 204 No Content on success. So for each feedback submission, in my Apache logs, I'll see something like this:192.168.1.1 - - [05/Jun/2009:09:03:07 -0700] \
"GET /tracker/Helpful/yes/?http%3A%2F%2Fmark.koli.ch%2F2009%2... \
HTTP/1.1" 204 - "http://mark.koli.ch/2009/05/..." \
"Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9.0.10) \
Gecko/2009042316 Firefox/3.0.10 (.NET CLR 3.5.30729)"
The GET request URI is the feedback itself. Hence the "GET /tracker/Helpful/[yes,no]/?URL" in my logs. Technically speaking I don't even need the ?URL part at the end of the GET, because I already have the referring URL (which is the URL the user is submitting feedback about). Anyways, the idea is to let Apache log the yes or no ping for me, and when I'm ready, I can run reports against my server logs to see what posts folks enjoyed, or didn't enjoy. A simple grep "GET /tracker", and an awk or two should work nicely.
If you'd like to see how I configured Apache to return an HTTP 204 No Content when someone pings /tracker on my server, you should check out this post.
Enjoy.
Did you find this post helpful, or at least, interesting?