Showing off your upcoming Lanyrd events as a badge with YQLWednesday, September 15th, 2010 at 7:08 am
Lanyrd is a cool new web site to organise the events you go to and speak at. The thing that is missing right now is a badge to show off your upcoming events on your own web site as requested by Dan Rubin:
The team is working on it but in the meantime you can easily use YQL to do that. In YQL you can get any HTML of a page and scrape it. You then can get it back as XML and if you provide a callback method name it returns it as JSON-P-X which is HTML as a string inside a JSON callback.
The first thing you need to do is to find the HTML you want. If I look at my own Lanyrd page then I can do that in Firebug:
What I want is the DIV that contains the H2 element with the word “Future” in it. In the
utterly painful XPATH syntax this is
//h2[contains(.,'Future')]/.. or “get all the h2 elements where the text node contains the word Future and then go up one level in the DOM hierarchy”.
In YQL this means you can get the content in the following format:
select * from html where
url=”http://lanyrd.com/people/codepo8/” and xpath=”//h2[contains(.,’Future’)]/..”
You test if there is an element with the ID “lanyrd” and if it is a link. If it is, you add a loading message to its text and read its URL. You then assemble the URL to the YQL command shown above and create a new SCRIPT element pointing to it. Once this has been executed it will call the method
lanyrdbadge.seed(). All the seed message needs to do is to replace the class of the DIV with the ID of “lanyrd” and remove the “speaking at” message. This then allows you to write some CSS to style the badge:
You can see the result here.