Forums, Knowledge Base and FAQs/Knowledge Base/Tips & Tricks

How To: Add Google Alerts to Geckoboard

Paul Joyce
posted this on October 07, 2010 12:18

Google Alerts allow you to know when something you're interested in is mentioned around the internet.  You tell Google what it should look for and it will alert you every time it finds it either by email or via a RSS feed.

I've had a few requests for how to add Google Alerts to your geckoboard so I thought I knock up a quick tutorial on how you can do it yourself using YQL and some online storage.  Before you begin you'll need 2 things:

  1. The URL for the Google Alert RSS feed you're interested in.  Go to http://www.google.com/alerts/manage to get the feed URL for an existing Google Alert, or create an new one.
  2. Some online storage to put a file.  You can use anything at all here as long as it's publicly accessible.  The files doesn't contain any private data.  I've found using a free Dropbox account works really well with the file in the public folder.

It would be great if we could just use any feed and pass it straight to Geckoboard but we can't.  Geckoboard needs to be fed data in a particular way to allow it to know what it needs to display where.  This is where Yahoo's excellent YQL comes in.  Don't worry if you're not technically minded, I'll make the instructions easy to follow.  In a nutshell, YQL allows you to take data from the internet and use it elsewhere; in this case we're going to take the data from your Google Alerts feed and put it into a format that Geckoboard can read and display.

googleAlerts.png

Step 1: Create a new file

In order to put it into a structure Geckoboard can understand we need to manipulate it using XSLT.  I've done all the work for you so you just need to open a text editor and paste the code below.

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
   <xsl:output method="xml" encoding="utf-8"/>
<xsl:template match="/">
<xsl:apply-templates select="/atom:feed"/>
</xsl:template>
<xsl:template match="/atom:feed">
<root>
<xsl:apply-templates select="atom:entry"/>
</root>
</xsl:template>
<xsl:template match="atom:entry">
<item>
<text>
<xsl:value-of select="concat(substring-before(atom:updated,'T'),': ','&#60;a href=&#34;',atom:link/@href,'&#34;&#62;',atom:title,'&#60;/a&#62;')"/>
</text>
<type>0</type>
</item>
</xsl:template>
</xsl:stylesheet>
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:atom="http://www.w3.org/2005/Atom"
  xmlns:dc="http://purl.org/dc/elements/1.1/">
  	<xsl:output method="xml" encoding="utf-8"/>
	
	<xsl:template match="/">
		<xsl:apply-templates select="/atom:feed"/>
	</xsl:template>
	
	<xsl:template match="/atom:feed">
		<root>
			<xsl:apply-templates select="atom:entry"/>
		</root>
	</xsl:template>
	
	<xsl:template match="atom:entry">
		<item>
			<text>
			<xsl:value-of select="concat(substring-before(atom:updated,'T'),': ','&#60;a href=&#34;',atom:link/@href,'&#34;&#62;',atom:title,'&#60;/a&#62;')"/>
			</text>
			<type>0</type>
		</item>
	</xsl:template>

</xsl:stylesheet>

You need to save this a file called googlealerts.xsl on the public folder of your Dropbox account or somewhere else where it's publicly accessible.  

TIP:  See this article to find how to get the URL for your file using Dropbox

Now, just verify it's publicly accessible by typing the url into your search engine - if you can see the file then keep the URL somewhere safe; we're ready to go on the next step.

 

Step 2: Using YQL

So now you should have 2 URLs.  Your Google Alert feed URL and the URL to that you created in the previous step.  You're now going to combine them together in a YQL query.

1.  Go to http://y.ahoo.it/utQ78uZe  In the top part of the window you'll see the following YQL query:

select * 
from xslt 
where url = 'PUT YOUR GOOGLE ALERT LINK HERE' 
and stylesheet = 'PUT YOUR googlealerts.xsl LINK HERE '

2.  Simply paste the 2 links in the appropriate part of the query so it looks something like this:

select * 
from xslt 
where url = 'http://www.google.com/alerts/feeds/02409934318269871026/17580548552650162368' 
and stylesheet = 'http://dl.dropbox.com/u/512939/GB/googleAlerts.xsl'

3.  Directly beneath the query window there are a series of buttons.  You should ensure JSON is selected, the text field next to it is empty and Diagnostics is unchecked.  See the image below if you're unsure.  Now hit the TEST button.  If all is well you should see a bunch of data in the main window, if you don't or it displays an error please review the steps above.

YQLsetup.png

4.  Finally copy the REST URL by using the "COPY URL" button at the bottom right of the page in the blue section.  Keep this URL somewhere safe, we need it for the last step.


Step 3: Geckoboard

Log on to your Geckoboard then...

1.  Add widget >> Custom Widgets >> Text >> Choose the middle, 2x1 option

2.  Fill in the config form as follows:

URL data feed: Use the URL you got from the previous step.  This should start with http://query.yahooapis.com
API key: leave blank
YQL
JSON
60
Label:  Give it a name, e.g. Google Alerts.

3. Click "Add to Dashboard", and you're done!

 
Topic is closed for comments