Starting to Monkey Around With Yahoo! Search Monkey “ You’ll never make a monkey out of me” Neil Crosby (One of Yahoo!’s M...
What is Search Monkey? <ul><li>A way to create more interesting Search Results. </li></ul><ul><li>Enhanced results and Inf...
Some Normal Search Results
Monkey Monkey Monkey!
Where does the data come from? <ul><li>Microformats </li></ul><ul><li>RDFa </li></ul><ul><li>Or pull it in from the page u...
My First Monkey <ul><li>Start with something containing microformats. </li></ul><ul><li>FaceBook’s public profile pages fi...
Starting your Monkey – Basic Info <ul><li>Name </li></ul><ul><li>Description </li></ul><ul><li>Category (for gallery) </li...
URLs <ul><li>Use auto-generate first. </li></ul><ul><li>Then choose specific URL for first field. </li></ul><ul><li>First ...
Data Services <ul><li>We can ignore this for now since we’re using µformats that are built into Search Monkey. </li></ul>
Appearance <ul><li>This is where we’ll actually do some work. </li></ul><ul><li>You  must  change something from the defau...
Using the right hand rail <ul><li>+/- expands/contracts sections. </li></ul><ul><li>Clicking an item pastes that data into...
Making our changes <ul><ul><li>$ret['image']['src'] = Data::get('com.yahoo.uf.hcard/rel:Card/vcard:photo/@resource'); </li...
Let others play with your monkey <ul><li>Once you’re happy with your monkey, share it. </li></ul><ul><li>Let users add you...
Monkey 2: Robotic Monkey of Doom <ul><li>We want a Flickr Monkey that: </li></ul><ul><ul><li>Shows main/first photo on a p...
Creating the Data Service <ul><li>Starts the same as a µFormat Monkey does. </li></ul><ul><li>Basic Info. </li></ul><ul><l...
Now for some XSLT <ul><li>Scary, but not too scary </li></ul><ul><li>Be aware of allowable rel values – see  documentation...
XSLT First Pass <ul><li>We want to extract an image URL and a description. </li></ul><ul><li>Assume the only page type is ...
XSLT First Pass <ul><li><?xml version=&quot;1.0&quot;?> </li></ul><ul><li><xsl:stylesheet xmlns:xsl=&quot;http://www.w3.or...
Save & Refresh <ul><li>Check that we don’t get any errors. </li></ul><ul><li>Then, back to the homepage. </li></ul>
Making our Flickr Monkey <ul><li>Give it a name </li></ul><ul><li>Trigger: *.flickr.com/photos/* </li></ul><ul><li>First T...
Flickr Monkey Data Services <ul><li>“ Add More Data Services” </li></ul><ul><li>Because we’re using the same URL trigger f...
Flickr Monkey Appearance <ul><li>Point and click info from the data source. </li></ul><ul><ul><li>$ret['summary'] = Data::...
But Flickr’s more complex than that! <ul><li>Flickr doesn’t just have individual photo pages under *.flickr.com/photos/* <...
Enter xsl:choose <ul><li>Allows if-elseif-else statements in XSL. </li></ul><ul><ul><li><xsl:choose> </li></ul></ul><ul><u...
Here’s one I made earlier <ul><li>http://gallery.search.yahoo.com/application?smid=w4q.s  (source available) </li></ul>
And we’re done… <ul><li>There’s lots more you can go away and do. </li></ul><ul><li>We haven’t even looked at infobars. </...
Thankyou. <ul><li>Any questions? </li></ul><ul><li>These slides are available at: </li></ul><ul><li>http://icanhaz.com/mon...
Upcoming SlideShare
Loading in...5
×

Starting to Monkey Around With Yahoo! Search Monkey

8,923

Published on

A quick start guide showing how to create two simple Search Monkeys.

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

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

No notes for slide

Starting to Monkey Around With Yahoo! Search Monkey

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

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

×