Starting to Monkey Around
With Yahoo! Search Monkey
“You’ll never make a monkey out of me”
CEBIT Turkey 2008 – Éric Daspet...
Who Am I ?
Frontend engineer at Yahoo!
but not in the Search Monkey team
What is Search Monkey?
• A way to create more interesting Search
Results.
• Enhanced results and Infobar.
• Enhanced resul...
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 bu...
Starting your Monkey – Basic Info
• Name
• Description
• Category (for gallery)
• Icon (really important)
• Don’t forget t...
URLs
• Use auto-generate first.
• Then choose specific
URL for first field.
• First URL is used to
generate previews in
ga...
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 curso...
Making our changes
$ret['image']['src'] =
Data::get('com.yahoo.uf.hcard/rel:Card/vcard:photo/@r
esource');
• And that’s al...
Let others play with your monkey
• Once you’re happy with
your monkey, share it.
• Let users add your
monkey to their SERP...
Monkey 2: Robotic Monkey of Doom
• We want a Flickr Monkey that:
– Shows main/first photo on a page.
– Includes relevant i...
Creating the Data Service
• Starts the same as a µFormat Monkey does.
• Basic Info.
• URLs.
• Trigger: *.flickr.com/photos...
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 ...
XSLT First Pass
<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">
<xsl...
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/thev...
Flickr Monkey Data Services
• “Add More Data
Services”
• Because we’re using the
same URL trigger for
monkey and data
sour...
Flickr Monkey Appearance
• Point and click info from the data source.
$ret['summary'] =
Data::get('smid:DATA_SRC_ID/rel:Ph...
But Flickr’s more complex than that!
• Flickr doesn’t just have individual photo pages
under *.flickr.com/photos/*
• Also ...
Enter xsl:choose
• Allows if-elseif-else statements in XSL.
<xsl:choose>
<xsl:when test="some_test">
<item>...</item>
</xs...
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 wi...
Thankyou.
• Any questions?
• These slides are available at:
http://icanhaz.com/monkeys
(redirects to http://www.slideshare...
Upcoming SlideShare
Loading in...5
×

Yahoo! Search monkey API - CEBIT 2008

1,745

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,745
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Yahoo! Search monkey API - CEBIT 2008

  1. 1. Starting to Monkey Around With Yahoo! Search Monkey “You’ll never make a monkey out of me” CEBIT Turkey 2008 – Éric Daspet Original presentation by Neil Crosby (One of Yahoo!’s Monkeys in London)
  2. 2. Who Am I ? Frontend engineer at Yahoo! but not in the Search Monkey team
  3. 3. 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.
  4. 4. Some Normal Search Results
  5. 5. Monkey Monkey Monkey!
  6. 6. Where does the data come from? • Microformats • RDFa • Or pull it in from the page using XSLT
  7. 7. 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/
  8. 8. Starting your Monkey – Basic Info • Name • Description • Category (for gallery) • Icon (really important) • Don’t forget to agree to the T&C
  9. 9. URLs • Use auto-generate first. • Then choose specific URL for first field. • First URL is used to generate previews in gallery.
  10. 10. Data Services • We can ignore this for now since we’re using µformats that are built into Search Monkey.
  11. 11. Appearance • This is where we’ll actually do some work. • You must change something from the default here.
  12. 12. Using the right hand rail • +/- expands/contracts sections. • Clicking an item pastes that data into your PHP at the cursor.
  13. 13. Making our changes $ret['image']['src'] = Data::get('com.yahoo.uf.hcard/rel:Card/vcard:photo/@r esource'); • And that’s all there is to creating a simple monkey!
  14. 14. 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.
  15. 15. 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.
  16. 16. 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/
  17. 17. Now for some XSLT • Scary, but not too scary • Be aware of allowable rel values – see documentation.
  18. 18. 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.
  19. 19. 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>
  20. 20. Save & Refresh • Check that we don’t get any errors. • Then, back to the homepage.
  21. 21. Making our Flickr Monkey • Give it a name • Trigger: *.flickr.com/photos/* • First Test: http://www.flickr.com/photos/thevoicewithin /1276763134/
  22. 22. 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
  23. 23. 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');
  24. 24. 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.
  25. 25. 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>
  26. 26. Here’s one I made earlier • http://gallery.search.yahoo.com/application?smid=w4q.s (source available)
  27. 27. 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. • searchmonkey-developers@yahoogroups.com • http://developer.search.yahoo.com/
  28. 28. 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/ )
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×