Home | Index

SearchMonkey Guide

Creating a Presentation Application

The following tutorial explains how to create an example presentation application. In this example, we create a presentation application that, given a search result from LinkedIn, rewrites the result to display more information from the user's LinkedIn profile. Before trying this tutorial, you should be familiar with basic SearchMonkey concepts, SearchMonkey's screens for creating presentation applications, and the section “Presentation Application PHP Structure”.

[Note] Note

This tutorial assumes that you have already created a custom LinkedIn data service, following the instructions at “Creating a (Page) Custom Data Service”.

  1. From the main SearchMonkey Applications screen, click Create a new Presentation Application. SearchMonkey displays “Step 1: Basic Info”.

  2. Enter a Name: "Test LinkedIn Application"

    Leave the Type at the default of Enhanced Result for now.

  3. Enter a Description: "A test presentation application for LinkedIn. Displays hResume data directly from profile pages, using our previously-created test LinkedIn custom data service."

    Even if you don't plan to publish the application, the description is still useful for private development. This is particularly true if you end up creating several applications that have similar functions or that trigger on the same URLs. The description should not only indicate which sites the application triggers on, but what kinds of data it displays.

    Since this is a test application, you can skip the Category and Icon URL. If this were a "real" application, you should select an appropriate category, in this case Social. You should also provide your site's favicon, or some sort of 16 x 16 pixel image that would identify your application to users.

  4. Read the Terms of Service if you have not done so already. Select the Terms of Service checkbox.

  5. Click Next Step. SearchMonkey saves your changes and displays “Step 2: URLs”.

  6. Specify a Trigger URL Pattern of: "*.linkedin.com/in/*,*.linkedin.com/pub/*"

    This pattern matches all results from LinkedIn that fall under the /in and /pub directories. We happen to know that these pages represent individual LinkedIn user profiles, and that they have useful embedded microformats for us to display.

  7. Specify three test URLs:

    • http://www.linkedin.com/in/amitkumar

    • http://www.linkedin.com/in/kevinhaas

    • http://www.linkedin.com/in/mdubinko

    Alternatively, you can click AUTOFIND URLs to retrieve ten valid, random test URLs. However, by using these specific values, you can confirm that your results match the results in this tutorial.

  8. Click Next Step. SearchMonkey saves your changes and displays “Step 3: Data Services”.

    The screen displays a variety of different data services for building your presentation application:

    • yahoo:index — Core search data gathered by the Yahoo! Search Crawler, such as the page title, summary, and file size. yahoo:index is available for all presentation applications.

    • sm031-LinkedIn — A native DataRSS feed provided by LinkedIn. Expanding this feed displays a number of interesting fields, including the user's industry, past work experience, and more. This is all data that LinkedIn engineers have provided specifically for SearchMonkey.

    All in all, this is a rich collection of data for building SearchMonkey applications. However, this tutorial includes yet another data service — the custom data service that you constructed previously.

  9. Click Add More Data Services. The Data Service Library dialog displays.

    It might take several seconds for the Data Service Library dialog to render. This dialog displays all public data services, along with any data services that you have personally created but not yet published.

  10. Scroll down and find the LinkedIn data service you created in “Creating a (Page) Custom Data Service”. Note that even though the data service appears in your own Data Service Library, it is only accessible to you. Data services remain private, unless you share them by going to the Data Services Library Submission screen during the confirmation step.

    Select the checkbox next to your LinkedIn data service and click Add Service. The dialog disappears, and the main screen displays your data service with a checkbox to the left.

    Now there are three types of services available for constructing your application: the Yahoo! index, LinkedIn's native DataRSS feed, and your custom data service.

  11. Verify that your custom data service is selected. For simplicity, you can de-select all the other services on this screen, such as yahoo:index and sm031-LinkedIn.

    [Note] Note

    After this tutorial is over, you can always return to this screen, select some of these other data services, and create variations of this example application.

  12. Click Next Step. SearchMonkey saves your changes and displays “Step 4: Appearance”.

  13. Enter the following PHP function into the text area:

    [Important] Important

    If you copy and paste the code sample below, you must replace all four instances of smid with the real SearchMonkey ID of your custom data service.

    public static function getOutput() {
        $ret = array(); 
    
        $ret['image']['src'] = Data::get('smid/media:Photo/@resource'); 
        $ret['image']['alt'] = "Headshot of " .  
           Data::get('smid/vcard:Card/vcard:fn');
        $ret['image']['allowResize'] = TRUE; 
    
        $ret['dict'][0]['key'] = "Name";
        $ret['dict'][0]['value'] = Data::get('smid/vcard:VCard/vcard:fn'); 
        $ret['dict'][1]['key'] = "Title";
        $ret['dict'][1]['value'] = Data::get('smid/vcard:VCard/vcard:title'); 
        # Important: replace smid with your own smid:ID data service id
    
        return $ret;
    }

    where smid is the SearchMonkey ID of your custom data service, such as smid:aaWFb. When a search result triggers your application, SearchMonkey executes this PHP to determine the layout and contents of the enhanced search result.

    [Tip] Tip

    Instead of typing "Data::get('smid:...)" multiple times, try clicking the Insert button for each of the desired values. This causes SearchMonkey to automatically generate and insert the correct PHP code for retrieving the specified data.

    Defines an empty associative array to populate and return. The array's contents determine how SearchMonkey displays search results. For more information about how to construct these arrays, refer to “Presentation Application PHP Structure”.

    Specifies the URL of a thumbnail image for the search result. The URL is provided by your previously created custom data service and represents a photo of the LinkedIn user. If the user has not posted a profile picture, the value returned by the data service is empty, and so SearchMonkey omits the image from the final search result.

    Specifies an alt attribute for the thumbnail. The alt text concatenates the string "Headshot of " with the user's full name.

    Enables SearchMonkey to resize the thumbnail to fit the available space. Otherwise, SearchMonkey crops the picture to fit.

    Specifies the user's full name, as provided by the custom data service. SearchMonkey displays the name to the right of the thumbnail picture (if any).

    Specifies the user's title, as provided by the custom data service. SearchMonkey displays the title below the name, since ['dict'][1] falls after ['dict'][0].

  14. Click Save and Refresh. SearchMonkey refreshes the Preview Pane, displaying the effects of your application on the first test URL.

    The application appears to be acceptable. The photo is displaying to the left, and the Name and Title are set to something plausible, a person's full name and a job title repectively.

    Click Input and Output to view the module's input DataRSS and the contents of the array returned by getOutput(). These links are handy for debugging your application.

    Step through the other test results and verify that the Preview Pane is displaying the expected output.

  15. Click Next Step. SearchMonkey saves your changes and displays “Step 5: Confirmation”.

  16. Congratulations, you are done with the tutorial! However, there are a few more exercises to try out before you move on.

    Click Try. The Search Preferences screen displays. Your new application should appear at the top of the list.

    [Important] Important

    If your profile already includes a LinkedIn application, remove this other LinkedIn application so that it does not interfere with your testing of your example application.

    Click Save at the bottom of the screen to confirm that you want to add the application to your search preferences. This displays a dialog. Click Try it out on Yahoo! Search.

  17. In the Yahoo! Search query box, type a query such as:

    site:linkedin.com Stacy

    and click Search.

    All search results for people on LinkedIn named "Stacy" (or any other name you search on) should trigger your presentation application. However, your application displays as an Infobar, not an Enhanced Result! What's going on?

    The reason for this behavior is that your application depends on a custom data service, and custom data services tend to be slow. For slow applications, Yahoo! Search may dynamically display your Enhanced Result application to an Infobar, in order to preserve the user experience. Once your application is cached, it can revert back to an Enhanced Result.

    At this point, you have two options:

    • Return to the Basic Info screen and change the Type to Infobar. Any application that depends on a custom data service should probably be an Infobar in the first place, because the dynamic conversion is usually not desirable behavior.

    • Return to the Data Services screen and recreate the application as a true Enhanced Result. Instead of using your custom data service, you can redesign your example application to use LinkedIn's native data feed instead. Since feeds are already cached on the server side, applications built using feeds tend not to automatically displayed in Infobars, unless you specify some very complicated PHP.

      Once you have redesigned your application to use LinkedIn's feed, try it out again on some real searches. Verify that the application now behaves like an Enhanced Result from the start.