BBCTo start with, we get the URL of the headlines feed. We can get this from the BBC news page at news.bbc.co.uk. The feed URL we need is:
YQLNow to use this in YQL, we go to the YQL console at http://developer.yahoo.com/yql/console/ and enter the query into the text box:
SELECT * From rss Where url='http://newsrss.bbc.co.uk/rss/newsonline_world_edition/front_page/rss.xml'Click the TEST button, and you get your results in the results view. Not terribly useful yet, since you'd get that from the RSS anyway, but since all we're interested in is the title, we change the
SELECT title From rss Where url='http://newsrss.bbc.co.uk/rss/newsonline_world_edition/front_page/rss.xml'This gives us a more readable list with less extra information.
FlickrFor step 2, we first figure out how to use the flickr API. This is much easier because it's listed on the right in the Data Tables section under the flickr subsection. The table we want is
flickr.photos.search. Click on this, and the query shows up in the YQL console:
SELECT * From flickr.photos.search Where has_geo="true" and text="san francisco"Since for our particular example, we don't really care if the photos have geo information or not, we can drop the
has_geo="true"part, or leave it in if you like. The predefined search only looks for a single term, we're looking for multiple terms, so we'll change the query from
text IN ("san francisco", "new york", "paris", "munich")and see what we get:
SELECT * From flickr.photos.search Where text IN ("san francisco", "new york", "paris", "munich")Notice the diagnostics section of the XML results. This tells us that YQL made 4 API calls to flickr and asked for 10 results from each. Since we only care about one result per term, we tell YQL to only request a single result from each call to the flickr API:
SELECT * From flickr.photos.search(1) Where text IN ("san francisco", "new york", "paris", "munich")Note the parenthesised 1 after the table name. We now get only one result for each of the cities we've specified. (if you're copying and pasting this into the console, make sure you remove the <em> tag)
MashupNow to put it all together, we use the SQL like sub-select. This allows us to pass the result set of the first query in as an operand in the second query:
SELECT * From flickr.photos.search(1) Where text IN (SELECT title From rss Where url='http://newsrss.bbc.co.uk/rss/newsonline_world_edition/front_page/rss.xml')This gets us at most one photo result for each headline in the RSS feed. It's possible that some headlines return 0 results, and that can't be helped.
showphotos. Click TEST again, and then copy the URL out of REST box. It should be something like this (I've added line breaks for readability):
http://query.yahooapis.com/v1/public/yql? q= SELECT%20*%20From%20flickr.photos.search(1)%20 Where%20text%20IN%20 (SELECT%20title%20From%20rss%20 Where%20url%3D 'http%3A%2F%2Fnewsrss.bbc.co.uk%2Frss%2Fnewsonline_world_edition%2Ffront_page%2Frss.xml' ) &format=json &callback=showphotosWe can use this in our HTML file by setting it as the
srcattribute of a
<script src="http://query.yahooapis.com/vq/public/yql?.....&format=json&callback=showphotos"> </script>Before we can do that though, we need to define the
showphotosfunction and the HTML that will hold the photos. This is what it looks like:
LIfor each photo, puts all the
LIs into a
UL, and puts the
ULinto the document. You can style it any way you like.
Have a look at the full code in action. You could modify it to draw a badge, to update itself every 10 minutes, to link back to the original photos, or any thing else. If the photos have geo information, you could display them on a map as well.
ImprovementsIt would be really cool if we could print out the News headline along with the photo. Perhaps even pull out the geo location of the story using the placemaker API and plot that on a map. However, this is the limit of this hack. It's taken me more time to write this post than it did to write the hack.
Short URL: http://tr.im/bbcflickr