Scrape Shared Notes from Your Google Reader Feed into WordPress
Tuesday, October 27th 2009If you love Google Reader and regularly create "Shared Notes" as you skim through your daily dose of RSS feeds, then this quick tutorial will help put those notes on your website.
Forget fiddling with plugins for this one—by using the DOMDocument class in PHP 5, you can scrape your Google Shared Notes feed to display your latest shared notes directly on a page within WordPress.
See the finished result: http://www.dquinn.net/notes/
It's actually really easy. First create a template called "page-notes.php." Then, make a page in WordPress and call it "Notes" or something similar, and assign your new page template to it. Here is the code that goes in your template:
<ul class="google-reader">
<?php
$doc = new DOMDocument();
$doc->load('PUT YOUR FEED URL HERE');
$titles = array();
$content = array();
foreach ($doc->getElementsByTagName('entry') as $node) {
$titles[] = $node->getElementsByTagName('title')->item(0)->nodeValue;
$links[] = $node->getElementsByTagName('link')->item(0)->getAttribute('href');
$quote[] = $node->getElementsByTagName('annotation')->item(0)->nodeValue;
}
for ($i=0; $i<count($titles); $i++) {
echo "<li>";
echo '<a href="'.$links[$i].'">';
echo $titles[$i];
echo '</a>';
if ($quote[$i]) {
echo '<span class="shared-note">';
echo '<span class="shared-avatar"><img width="40" height="40" alt="YOUR NAME" src="http://www.gravatar.com/avatar/PUT YOUR GRAVATAR ID HERE?s=40"/></span>';
echo '<span class="shared-quote"><span class="shared-pip"></span><em>';
echo str_replace("YOUR GOOGLE READER USERNAME","",$quote[$i]);
echo '</em></span>';
echo '<span class="shared-follow"><a href="PUBLIC URL TO YOUR GOOGLE READER PAGE">Follow Me on Google Reader »</a></span>';
echo '</span>';
}
echo "</li>";
}
?>
</ul>
You'll need to fill in the following values where noted above:
"PUT YOUR FEED URL HERE." This one is tricky to find. Go to your public profile and then click on the link to your Atom Feed. This is the RSS that the script will parse.
"PUT YOUR GRAVATAR ID HERE." I like to have my gravatar appear next to each note (if I've left one). Go to Gravatar to get your encrypted email ID (it's a really long sequence of numbers/letters). You could, of course, substitute this with any image.
"YOUR GOOGLE READER USERNAME." Mine is "alkah3st." The script looks for your username in the XML nodes to parse the note, so this is case-sensitive.
"PUBLIC URL TO YOUR GOOGLE READER PAGE." Mine looks like this: http://www.google.com/reader/shared/djamesquinn
This will generate the latest items in your Shared Notes feed in an unordered list. For items that you shared but didn't write a note for, it will generate the following markup:
<li> <a href="http://volokh.com/2009/10/27/legal-scholarship-in-the-internet-age/">Legal Scholarship in the Internet Age</a> </li>
If you did write a note, then it will generate this markup:
<li>
<a href="http://feeds.gawker.com/~r/gawker/full/~3/eynAol1tBZI/french-convict-the-church-of-scientology-of-fraud-almost-ban-it">French Convict the Church of Scientology of Fraud, Almost Ban It [Scandal]</a>
<span class="shared-note">
<span class="shared-avatar">
<img width="40" height="40" src="http://www.gravatar.com/avatar/8c35d8ee142dbe5101cf9314236a87fc?s=40" alt="Daniel Quinn"/>
</span>
<span class="shared-quote">
<span class="shared-pip"></div>
<em>Nice.</em>
</span>
<span class="shared-follow"><a href="http://www.google.com/reader/shared/djamesquinn">Follow Me on Google Reader »</a></span>
</span>
</li>
Last, but not least, you can style the markup however you like, but if you want the neat talk bubble like I have, you'll want CSS that goes something like this:
ul.google-reader {
margin-left: 0px;
}
ul.google-reader li {
border-top:1px dotted #CCCCCC;
padding-top: 15px;
}
.shared-note {
display:block;
margin-top:15px;
overflow:hidden;
padding-bottom:20px;
position:relative;
}
.shared-avatar {
display: block;
float: left;
}
.shared-avatar img {
border:1px solid #C2D9FF;
padding: 2px;
}
.shared-quote {
float: left;
width: 380px;
margin-left:20px;
position: relative;
background-color: #E1ECFE;
border: 1px solid #c2d9ff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 10px;
}
.shared-quote em {
font-size: 12px;
font-style: normal;
}
.shared-quote .shared-pip {
display: block;
position: absolute;
top: 10px;
width: 16px;
height: 16px;
left: -9px;
background: url(images/pip.gif) no-repeat;
}
.shared-follow {
bottom:0px;
font-family:arial;
font-size:10px;
font-style:italic;
left:80px;
position:absolute;
width:300px;
}
You can download the "pip" image here: http://www.dquinn.net/wp-content/themes/sneakers/images/pip.gif
Note: Keep in mind that I have Eric Meyer's Reset CSS in my stylesheet.
Awesome stuff! Any hints on what I should throw in to get the timestamp?
You could try:
$dates[] = $node->getElementsByTagName('published')->item(0)->nodeValue;
Thanks. What did the trick was in my case however:
$dates[] = $node->getAttribute('gr:crawl-timestamp-msec');
which returns the timestamp (in milliseconds since the beginning of the UNIX Epoch) of when I shared the item in Google Reader. The published tag returns when it was originally published.