Embedding Y!Q Yahoo Search into your site

When you embed Y!Q into your site, your users get to search for related information about the content of your pages while staying actively engaged on your site. And because Y!Q overlays the search results directly onto your web page, site visitors never have to leave your site to view their related search results.

Embedding Y!Q in your site is easy. Simply include the Y!Q JavaScript library, decide where to use Y!Q, and add a <form> element to your HTML or template. The following steps walk you through the process.

By putting Y!Q on your website you agree to the Terms of Service of Y!Q.

Step 1: include the Y!Q JavaScript library

Include the Y!Q library file in the header (between <head> and </head>) of the HTML page.

Example:

Step 2: Decide where to use Y!Q

Always associate Y!Q with context. This context may be a small paragraph, a sentence, word, etc. It is up to you to choose the context. We recommend you experiment a bit to see what works best on your site. For example, you may find that using the first paragraph of a story provides relevant results. Or maybe just the document title or headline is sufficient.

If you'd like the context to be highlighted when your users click on the Y!Q icon or text, you should enclose it with an HTML <div> with the class name yqcontext

Example:

Step 3: Add the Y!Q form

If you're using the <div> for highlighting, include the form within that <div> block. Otherwise, place the form as close to the context as possible without compromising your site layout. That will help increase the chance of users being able to determine exactly what context you're using to generate the related search results.

The Y!Q form has two required elements:

The first is a hidden form field that will specify the search context. The relevancy of Y!Q results will depend on both the size and type of the context you choose. Short paragraphs, sentences, or even a set of keywords, work well with Y!Q. In contrast, longer articles or whole pages may not provide enough focus, so results may be broader and less relevant.
The second element is a styled form input button that will activate Y!Q for all users with JavaScript enabled-browsers or submit the form directly to a Yahoo! Search Results Page for users without JavaScript. We wrap the input button in a ><div>> of class "yqact" to allow you to override the default style if it does not blend in with your site's style.

Note: the Y!Q form needs to be placed 200px below the top of the page in order to be completely visible. Therefore, it should be placed beneath its context, and not above it or at the top of the page.

Example:

Step 4 (optional): Add optional controls

If you choose to customize your embedded results, you can add optional hidden form elements to query only specific sites or determine how many search results should appear within the embedded search results. Do this by adding hidden form elements to the Y!Q form.

Y!Q allows Webmasters to add additional context information that is not displayed to the user for further improving its search results. The motivation here is that a Web master for instance wants to augment a context to provide additional information not contained in the context.
For this reason Y!Q supports the hidden input field siteContext. This should be plain text. When a user activates Y!Q, the siteContext will be combined with the context field and sent to Y!Q.

Example:

By using Y!Q you expressly agree to the Yahoo! Terms of Service.

Steven C. Howes and Howes-IT-Going are NOT Responsible for Y!Q Usage. Terms of use.