Designing the Look and Feel

The Creating an Advanced Subscribed Link page discussed various ways to create a complex subscribed link. This page discusses how you can customize the look and feel of your custom results.

Contents

This page includes the following sections:

• Overview
• Moving Hyperlinks to the Right
• Creating Results with Images
• Creating Results with Gadgets
• Taking the Next Step

Overview

You can alter the appearance of your custom results using one of the following formats:

• Standard - enables you to make simple changes in the layout of your results. You can use XML attributes to add thumbnail images and change the position of your links and images to the right of the body of results. This approach is fairly easy to implement but does not give you extensive flexibility.
• Gadgets - enables you to create custom results with a rich interface. You can include an interactive interface or multiple images, manipulate the background, and create more graphical whizbang. Because you would need to know how to use the gadgets API and some JavaScript, it has a steeper learning curve. But don't be too daunted, you can learn more about the gadgets API by reading its developer guide.

Moving Hyperlinks to the Right

By default, the linked text in the result body appears on the left side of the text. To change the position of the linked text to the right, set the format attribute of the Response tag to answer_right. So the tag would look like: <Response format="answer_right">.

The following code is an an example of an XML file using this format:

<Results>

<ResultSpec id="FormatDemo">
  <Query>result format</Query>
  <Response format="answer_right">
    <Output name="title">Simple format demonstration</Output>
    <Output name="more_url">www.google.com</Output>

    <Output name="text1">Some text before the</Output>
    <Output name="link1">first link</Output>
    <Output name="url1">www.google1.com</Output>

    <Output name="text2">You might want to get</Output>
    <Output name="link2">more information</Output>
    <Output name="url2">www.google2.com</Output>
    <Output name="link3">This line is just a link.</Output>

    <Output name="url3">www.google3.com</Output>

  </Response>
</ResultSpec>

</Results>

If you omit the attribute and value ( format="answer_right") from the Response tag in our sample code, the links in the body of the text would appear to the left of the text.

Creating Results with Images

You can add thumbnail images to your custom results, and use the set of tags for images to format result body.

Adding Images

You can add thumbnail images to your results by using the following image values for the Output name attribute:

<Output name="image_src">
http://www.google.com/intl/en_ALL/images/logo.gif
</Output>

<Output name="image_size">
square
</Output>

To see sample code for images in its full context see the Image Example: Code section in this page.

Formatting Text in Results with Images

If you have images in your custom results, a few formatting rules for output text are different from what was discussed in the Creating a Subscribed Link Using XML page. A custom result that contains an image has the following differences:

• An additional line of text. Text-only results can have three lines of text in the result body, but image results can have four lines of text . The Output name values for the fourth line of text is just a progression from the previous values; hence they are text4, link4, and url4.

  <Output name="link4">to your heart's content.</Output>
  <Output name="url4">www.google.com/example</Output>

• By default, the image appears on the left side of the result body. To change the position of the image to the right, set the format attribute of the Response tag to image_right. So the tag would look like: <Response format="image_right">.
• The limit for the number of characters for each line of text, not just the fourth line, is shorter. The smaller limit is due to the image taking up space at the left side of the custom results. The limit is as follows:
  • Icon image (mini_square): 80 characters
  • Small image (small_square): 70 characters
  • Square image (square): 60 characters
    
  • Portrait image (portrait): 65 characters
    
  • Landscape image (landscape): 50 characters
• Additional text to the right of the result title. The Output name value, title_right_text, lets you add up to 30 characters to the right of the title of the custom result.

  <Output name="title_right_text"> in a new display format</Output>

By default, the linked text in the result body appears on the left side of the text. To change the position of the linked text to the right, set the format attribute of the Response tag to image_right. So the tag would look like: <Response format="image_right">.

Image Example: Code

The following sample code uses all the tags related to images:

<Results>

<ResultSpec id="test">

<Query>image test query</Query>

<Response format="image">

    <Output name="title">My Test Image</Output><Output name="title_right_text">in a new display format</Output>
    <Output name="image_src">http://upload.wikimedia.org/wikipedia/commons/6/61/AbelTransform.png</Output>

    <Output name="image_size">square</Output>
    <Output name="more_url">www.google.com/coop</Output>

    <Output name="text1">With this new format, you can</Output>
    <Output name="text2">display images of all kinds of things</Output>
    <Output name="link3">as well as links</Output>
    <Output name="url3">www.google.com/coop</Output>

    <Output name="link4">to your heart's content.</Output>
    <Output name="url4">www.google.com/coop</Output>
</Response>

</ResultSpec>
</Results>
    

Image Example: Preview

The corresponding custom result would look like this:

Clicking the image will take you to the same URL that was defined for the title.

Creating Results with Gadgets

You might find that the standard format doesn't provide rich configurability or interface for the kind of result you want to display. Perhaps you want your subscribed link to use JavaScript for interactive functionality, fetch and display results from another site, or use different fonts and colors from the standard text format. If that's the case, you might want to incorporate gadgets into your subscribed link.

Gadgets offer a much wider range of configurability, but they increase the loading time of the page. So don't use gadgets just because they make your custom results look cool; consider how they can serve the needs of your users. The standard Google search results load very quickly, but your subscribed link will load in an IFRAME separate from the rest of the page. If it often takes a long time for your subscribed link to load or it fails to load properly, your users will be dissatisfied and are likely to remove your subscribed link.

If you are not familiar with gadgets, read the Gadgets API Developer's Guide. But you don't really need to know how to create a gadget before you can create custom results with gadgets. You can use existing gadgets developed for the Google Personalized Homepage or gadgets For Your Webpage and integrate them into your custom results.

To include a gadget in your subscribed link:

1. In the Response tag under the ResultSpec element, add the format attribute and set the value to gadget.
   

   <Response format="gadget">
   

2. Use gadget-specific Output tags, which are described in the next section, to provide gadget description, specify user preference values, and configure the display size.

In general, gadgets displayed in subscribed links are subject to the same requirements as syndicated gadgets. The main difference is that user preferences can, and should, be specified as a function of the query to capture the user's intention. For example, a syndicated gadget for weather might be displaying the weather of one specific locale defined by the webmaster of the page. This fixed location would be pointless in subscribed link. So you should set the gadget to take its preference values–which, in this case, is the locale for the weather gadget–from your users' queries. This way, the subscribed link's displayed content is relevant to the query.

Integrating Gadgets

You can integrate gadgets with your results by using the following values for the Output name attribute:

<Output name="gadget_src">
http://www.google.com/ig/modules/googletalk.xml
</Output>

<Output name="gadget_width">
500
</Output>

<Output name="gadget_height">
250
</Output>

<Output name="up_name1">
url1
</Output>

<Output name="up_value1">
http://www.hubmed.org/feeds/rss.cgi?q=[0.gr0]
</Output>

Formatting Results with Gadgets

You can also use the attribute values described in the Creating a Subscribed Link Using XML page. As with the other standard format subscribed link, you define the title and the url for the gadget by defining Output name with the attribute values title and more_url, respectively. The hyperlinked title appears at the right side of the gadget.

You can also create additional text and links that appear to the right of the gadget by defining Output name with the values, text1, link1, url1. So results with gadgets use the same XML tags as results with just plain text. The only difference is that gadget results have a shorter 50-character limit for each line. The smaller limit is imposed because the gadget takes up space at the left side of the custom results.

Gadget Example: Code

Let's look at an subscribed link file that uses one of the more popular gadgets, Date and Time, which simply shows a clock and calendar. Suppose you want to make this gadget result appear when a user types queries like "today's date" or "what day is it".

Since the Date and Time gadget does not need any user-specified information, you do not need to include the attribute values for gadget user preferences (up_name and up_value). If you want to see sample code that passes values to the user preferences of the gadget, you could check out the Example page.

<Results>
<AuthorInfo description="Date and Time gadget" author="Ada Bogart"/>
<ResultSpec id="date_and_time">
<Query>[TimeKeyword]</Query>
<Response format="gadget">

    <Output name="title">Date and Time</Output>
    <Output name="more_url">http://www.google.com/ig/directory?url=http://www.google.com/ig/modules/datetime.xml</Output>
    <Output name="gadget_src">http://www.google.com/ig/modules/datetime.xml</Output>
    <Output name="gadget_width">320</Output>
    <Output name="gadget_height">136</Output>

</Response>
</ResultSpec>

<DataObject id="time_keywords" type="TimeKeyword">
    <QueryName value="time"/>
    <QueryName value="todays date"/>
    <QueryName value="today's date"/>
    <QueryName value="current time"/>
    <QueryName value="time now"/>
    <QueryName value="what time is it"/>
    <QueryName value="what day is it"/>

</DataObject>
</Results>          

Gadget Example: Preview

When you type "today's date" in the Google search box, you see a custom result with a gadget.

Taking the Next Step

Not only have you created your subscribed link queries and custom results, but you've also customized the look and feel of your results. But before you share your awesome subscribed link with the world, you should check and see if the whole thing works as planned.

< Back to Creating an Advanced Subscribed Link | Forward to Testing and Troubleshooting >