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.

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

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/

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

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.

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.

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.

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.

+/- 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!

$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.

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.

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/

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 .

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.

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=&quot;1.0&quot;?> <xsl:stylesheet xmlns:xsl=&quot;http://www.w3.org/1999/XSL/Transform&quot; version=&quot;1.0&quot;> <xsl:template match=&quot;/&quot;> <adjunctcontainer> <adjunct id=&quot;smid:{$smid}&quot; version=&quot;1.0&quot;> <item rel=&quot;rel:Photo&quot; resource=&quot;{//div[@class='photoImgDiv']/img[@class='reflect']/@src}&quot;> <meta property=&quot;dc:description&quot;> <xsl:value-of select=&quot;//div[@class='photoDescription']&quot;/> </meta> </item> </adjunct> </adjunctcontainer> </xsl:template> </xsl:stylesheet>

<?xml version=&quot;1.0&quot;?>

<xsl:stylesheet xmlns:xsl=&quot;http://www.w3.org/1999/XSL/Transform&quot; version=&quot;1.0&quot;>

<xsl:template match=&quot;/&quot;>

<adjunctcontainer>

<adjunct id=&quot;smid:{$smid}&quot; version=&quot;1.0&quot;>

<item rel=&quot;rel:Photo&quot;

resource=&quot;{//div[@class='photoImgDiv']/img[@class='reflect']/@src}&quot;>

<meta property=&quot;dc:description&quot;>

<xsl:value-of select=&quot;//div[@class='photoDescription']&quot;/>

</meta>

</item>

</adjunct>

</adjunctcontainer>

</xsl:template>

</xsl:stylesheet>

Save & Refresh Check that we don’t get any errors. Then, back to the homepage.

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/

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

“ 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');

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.

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=&quot;some_test&quot;> <item>...</item> </xsl:when> <xsl:when test=&quot;some_other_test&quot;> <item>...</item> </xsl:when> <xsl:otherwise> <item>...</item> </xsl:otherwise> </xsl:choose>

Allows if-elseif-else statements in XSL.

<xsl:choose>

<xsl:when test=&quot;some_test&quot;>

<item>...</item>

</xsl:when>

<xsl:when test=&quot;some_other_test&quot;>

<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)

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_address] http://developer.search.yahoo.com/

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_address]

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/ )

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/ )