How to Build a Yahoo! SearchMonkey App

How to Build a Yahoo! SearchMonkey App - Presentation Transcript

How to build a Yahoo! SearchMonkey App SearchMonkey is Yahoo! Search's open developer platform. Part I : Using Intel's Mash Maker to make a Custom Data Service Part II : Building a Presentation App from your data extractions

PART I: Mash Maker + SearchMonkey = Using Intel's Mash Maker to make Yahoo! SearchMonkey Custom Data Services.

1. Install Mash Maker

Register with a valid email address and download Mash Maker here: http://mashmaker.intel.com/web/download.html

Check your email and retrieve your login and password.

In Firefox, enter the login here: 'Tools-> Options -> Mash Maker', and enter your login and password. NOTE: In order for Mash Maker to work with SearchMonkey, YOU MUST BE LOGGED IN.

2. Navigate to the page from which you want to extract text, pics, etc.

Open the Mash Maker tool by clicking here

3. Click "Pick from Page" and then select an element on the page to extract . The "Pick from Page" button is conveniently located here

4. Save that element ("property")‏

Select "Property of the whole page" and click "Add"

Give it a name. (like "Album Cover")‏

Click "Publish" and you will be prompted to save this set of extractions (extractor).

NOTE: You must publish all changes for Mash Maker to work properly with SearchMonkey.

5. Save your extractor 1. Give your Extractor a name (like "Pitchfork Review Extractor")‏ 2. Click "Types" and select the type of page this is (like "review")‏ 3. Save your work by clicking publish.

6. Grab some other elements off of the page and then CLICK THE MONKEY a. For tips on extracting, see the Appendices . b. Save your work by clicking "Publish". c. When you've extracted all the elements that you want… CLICK THE MONKEY ! !!

7. Save the Mash Maker data to your clipboard. Click "copy to clipboard"

8. In a new window, open the SearchMonkey application dashboard: http://developer.yahoo.com/searchmonkey/ Click "Build an App"

9. Create a new Custom Data Service a. Scroll down and create a new "Custom Data Service" b. Fill out the following "Basic Info" and "URLs" pages.

10. Paste the Mash Maker code into the box in the middle of the Data Extraction page

11. Scroll down and check to see if it worked. Assuming you have the proper URLs in the dashboard, the little preview window should contain a list of your extracted properties. Like this

You're done! Now, that you have a Custom Data Service, you have to start thinking about organizing all that data into a Presentation App. You'll learn all about that in Part II.

Appendix A: Using XPather if Mash Maker isn't working on a particular extraction for some reason

If, for some reason, Mash Maker will not extract a particular property, the XPather Firefox add-on is a good back up.

Install the XPather Firefox add-on: https://addons.mozilla.org/en-US/firefox/addon/1192

In Firefox, right-click on the property you'd like to extract and select "Show in XPather". Copy the "XPath" in the little window that pops up.

In the Mash Maker sidebar, highlight the property that isn't working properly and check "Expert".

Paste the "XPath" from the XPather window into the "XPath" box in the Mash Maker sidebar.

Appendix B: Links

Video tutorial on making Custom Data Services with Mash Maker: http://mashmaker.intel.com/videos/tutorials/searchmonkey/customdataservices/

Video tutorial on extracting with Mash Maker: ( http://mashmaker.intel.com/videos/tutorials/extractors/extratorstutorial.wmv )‏

Intel Mash Maker support: http://mashmaker.intel.com/web/support/

SearchMonkey apps in the Search Gallery that were created using Mash Maker:

Food Network: http://gallery.search.yahoo.com/application?smid=pq2

How Stuff Works: http://gallery.search.yahoo.com/application?smid=odW

MyRecipes.com: http://gallery.search.yahoo.com/application?smid=uRE

Pitchfork Record Reviews: http://gallery.search.yahoo.com/application?smid=jLx

GrubHub: http://gallery.search.yahoo.com/application?smid=haC

Download.com: http://gallery.search.yahoo.com/application?smid=RCo

Part II: Creating a SearchMonkey Presentation Application

Part II: Building your Presentation Application Step 1: Basic Info

Enter name :

(Choose wisely! This name will appear in the Search Gallery)

Choose Type

Select Infobar since you are using a Custom Data Service (only choose “Enhanced Result” if you are NOT using a Custom Data Service.)

Add description

will be the description used in the Search Gallery)

4. Choose the Category that your app best fits under

5. Get Icon

add /favicon.ico to end of the root URL of the site you are developing an app for.: http://www.marthastewart.com/favicon.ico

If this returns an icon, right click on it and save it to your computer ( NOTE: this won't work every time )

Click ‘Browse’ and find your icon

6. Check the Terms of Service box

7. Click ‘Next Step’

Part II: Building your Presentation Application Step 2: URLs

These URLs should transfer over from your URLs page in your Custom Data Service.

Follow the instructions under "Create the Trigger URL"

AND / OR

Enter the same Trigger URL Pattern from your Custom Data Service.

2. Click 'AUTOFIND URLs'

Insert the domains from which your links and images will come.

You only need to do this if your images and links are hosted on a different URL

4. Click 'Next Step'

Part II: Building your Presentation Application Step 3: Data Services 1. Click ‘Add More Data Services’ 2. Check the box for the Custom Data Service you just made. 3. Click ‘Next Step’

Part II: Building your Presentation Application Step 4: Appearance

On the right side tab, click on ‘smid:’ to open your data service

2. In the PHP code box, highlight 'SMDEFAULT' under // Image

Click on the @resource link under (or next to) rel: Photo (or whatever you named your image).

Code should automatically be pasted in place of the highlighted 'SMDEFAULT'

4. Click 'Save & Refresh' on bottom of page and the image you extracted should appear in the preview panel.

Continue to add all your @resources to the PHP code SMDEFAULT wherever they fit.

Deep Links ‏ :

'Text' = "Link Text" (example: "User Reviews")‏

'href' = The link that you extracted with XSLT in your Custom Data Service. (See Extracting Links )‏

Key Value Pairs :

'Key' = Label Text

(example: "Address")‏

'Value' = Dynamic Text (example: "1600 Polk Street, San Francisco, CA")‏

When all you've added all the extracted elements that you want to add, click ‘Next Step’.

NOTE: If you want to make your Infobar more interesting, you can add HTML to the ['infobar']['summary'] section at the bottom of the PHP code box. (See Adding Links to the Infobar ).

Part II: Building your Presentation Application Step 4: Appearance (cont)‏

Step 4: Appearance (cont’d) Enhanced Results Key / Value Pairs Key Value Deep Links (up to 4)‏ Star Rating (see Adding Stars )‏ Image Enhanced Result: The default code already in the PHP box on your "Appearance" page is set up to create a SearchMonkey Enhanced Result like the one below.

Step 4: Appearance (cont’d) Infobar Infobar: If you are using a Custom Data Service, you MUST select "Infobar" on Step 1: Basic Info . If you want your infobar to look different from what you get with the default PHP code, you can add your own HTML to the ['infobar']['summary'] and ['infobar']['blob'] section at the bottom of the PHP code box. (See Adding Links to the Infobar )‏ .

Part II: Building your Presentation Application Appendix A – Adding Stars

Extract stars as a text resource in your Custom Data Service. (NOTE: Stars should extract as a number in your Custom Data Service preview)‏

2. Insert your stars resource as a “Value” in your Key Value Pairs.

Change the first part of the PHP resource code from “Data::get” to “Data::getStars”

or

"Data::getStarsfromNum"

(use whichever works)

Part II, Appendix B - Extracting Links Adding links to a SearchMonkey module requires extracting the link in two parts: URL and text. When are you add “quick links” to your SM app, the presentation application dashboard has a place to replace the “SMDEFAULT”s with both “text” and “href”, so when you’re making the Custom Data Service, you must extract both text (Yahoo!) and URL ( http://www.yahoo.com/ ) so that you end up with Yahoo! . To extract the text & linked URL of hypertext links: 1. In Mash Maker, first extract the hyperlink's text like you would extract any text, name it something like "happy link", and click publish. 2. To extract the URL (href), repeat step one and name this property something like "happy link url". 3. Check the “Expert” box. 4. Add “/@href” to the end of the string in the “XPath” text box.

Part II, Appendix C: Making partial link extractions render in the PHP presentation of your app If, when you try to extract links with Mash Maker, you end up extracting only a partial URL, like this (from www.foodnetwork.com ): /saras-secrets/index.html In order to not get this error message: “Error rendering module. Invalid URL provided for deep links.”, you must take the following steps to make that partial link work in your app: 1. In the PHP presentation portion of the application dashboard, your link extraction will look like this: Data::get('smid:gfx/mm:recipe_courtesy_href'); 2. Add the root URL to the partially extracted URL with the “.” (period) concatenate function: ‘ http://www.foodnetwork.com’ . Data::get('smid:gfx/mm:recipe_courtesy_href'); 3. Then add the ‘trim’ function like this: ‘ http://www.foodnetwork.com’ . trim(Data::get('smid:gfx/mm:recipe_courtesy_href'));

Building your Presentation Application Part II, Appendix D – Adding Links to the Infobar