starting to monkey around with yahoo! search monkey
DESCRIPTION
A quick start guide showing how to create two simple Search Monkeys.TRANSCRIPT
Starting to Monkey Around With Yahoo! Search Monkey
“You’ll never make a monkey out of me”
Neil Crosby (One of Yahoo!’s Monkeys in London)
What is Search Monkey?
• A way to create more interesting Search Results.
• Enhanced results and Infobar.• Enhanced results fit a tight template, infobars
can be far more freeform.
Some Normal Search Results
Monkey Monkey Monkey!
Where does the data come from?
• Microformats• RDFa• Or pull it in from the page using XSLT
My First Monkey
• Start with something containing microformats.
• FaceBook’s public profile pages fit the bill.• We’ll build a monkey that shows the user’s
profile picture.• Go to http://developer.search.yahoo.com/
Starting your Monkey – Basic Info
• Name• Description• Category (for gallery)• Icon (really important)• Don’t forget to agree to
the T&C
URLs
• Use auto-generate first.• Then choose specific
URL for first field.• First URL is used to
generate previews in gallery.
Data Services
• We can ignore this for now since we’re using µformats that are built into Search Monkey.
Appearance
• This is where we’ll actually do some work.
• You must change something from the default here.
Using the right hand rail
• +/- expands/contracts sections.
• Clicking an item pastes that data into your PHP at the cursor.
Making our changes$ret['image']['src'] =
Data::get('com.yahoo.uf.hcard/rel:Card/vcard:photo/@resource');
• And that’s all there is to creating a simple monkey!
Let others play with your monkey
• Once you’re happy with your monkey, share it.
• Let users add your monkey to their SERPs.
• Share your source if you want to.
Monkey 2: Robotic Monkey of Doom
• We want a Flickr Monkey that:– Shows main/first photo on a page.– Includes relevant information about photo.
• No relevant µformats on the page, so we need some XSLT.
• Will be slower than pre-spidered µFormats.• We need to create a data service.
Creating the Data Service
• Starts the same as a µFormat Monkey does.• Basic Info.• URLs.• Trigger: *.flickr.com/photos/*• First test:
http://www.flickr.com/photos/thevoicewithin/1276763134/
Now for some XSLT
• Scary, but not too scary• Be aware of allowable rel values – see
documentation.
XSLT First Pass
• We want to extract an image URL and a description.
• Assume the only page type is the single photo page for now.
• Use Firebug and/or XPather in Firefox to work out XPaths to our required nodes.
XSLT First Pass<?xml version="1.0"?><xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0"> <xsl:template match="/"> <adjunctcontainer> <adjunct id="smid:{$smid}" version="1.0"> <item rel="rel:Photo" resource="{//div[@class='photoImgDiv']/img[@class='reflect']/@src}"> <meta property="dc:description"> <xsl:value-of select="//div[@class='photoDescription']"/> </meta> </item> </adjunct> </adjunctcontainer> </xsl:template></xsl:stylesheet>
Save & Refresh
• Check that we don’t get any errors.• Then, back to the homepage.
Making our Flickr Monkey
• Give it a name• Trigger: *.flickr.com/photos/*• First Test:
http://www.flickr.com/photos/thevoicewithin/1276763134/
Flickr Monkey Data Services
• “Add More Data Services”
• Because we’re using the same URL trigger for monkey and data source, the source shows up here
Flickr Monkey Appearance
• Point and click info from the data source.
$ret['summary'] = Data::get('smid:DATA_SRC_ID/rel:Photo/dc:description');
$ret['image']['src'] = Data::get('smid:DATA_SRC_ID/rel:Photo/@resource');
But Flickr’s more complex than that!
• Flickr doesn’t just have individual photo pages under *.flickr.com/photos/*
• Also has tag, user, set etc pages.• We should handle this at our end, so users
only have to add one monkey.
Enter xsl:choose
• Allows if-elseif-else statements in XSL.
<xsl:choose> <xsl:when test="some_test"> <item>...</item> </xsl:when> <xsl:when test="some_other_test"> <item>...</item> </xsl:when> <xsl:otherwise> <item>...</item> </xsl:otherwise></xsl:choose>
Here’s one I made earlier
• http://gallery.search.yahoo.com/application?smid=w4q.s (source available)
And we’re done…
• There’s lots more you can go away and do.• We haven’t even looked at infobars.• You can also fiddle with web services.• There’s a whole world of opportunity.
• [email protected]• http://developer.search.yahoo.com/
Thankyou.
• Any questions?
• These slides are available at:
http://icanhaz.com/monkeys
(redirects to http://www.slideshare.net/neilcrosby/starting-to-monkey-around-with-yahoo-search-monkey/ )