Y!Q Beta

Search in context

<script language="javascript" type="text/javascript"
     src="http://yq.search.yahoo.com/javascript/yq.js"></script>
  

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:

<div class="yqcontext">
    <p>A fuel-efficient compact spacecraft has made it into lunar orbit,
        signaling Europe's first successful mission to the moon and putting 
        the inexpensive probe on course to study the lunar surface, 
        European Space Agency officials said Tuesday.</p>
    </div>
 

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:

1. 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.
2. 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:

1. 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.
2. Y!Q currently works best if the form values are UTF-8 encoded.

<div class="yqcontext">
    <p>A fuel-efficient compact spacecraft has made it into lunar orbit,
        signaling Europe's first successful mission to the moon and putting 
        the inexpensive probe on course to study the lunar surface, 
        European Space Agency officials said Tuesday.</p>

    <form class="yq" action="http://yq.search.yahoo.com/search" method="post">

        <input type="hidden" name="context" value="A fuel-efficient compact
            spacecraft has made it into lunar orbit, signaling Europe's first
            successful mission to the moon and putting the inexpensive probe
            on course to study the lunar surface" />

        <div class="yqact">
            <input class="yqbt" type="submit" value="Search Related Info"
                onclick="return activateYQ(this)" />

        </div>
    </form>

 </div>

 

Step 4 (Optional): Add parameters for fine-tuning Y!Q

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.

Fieldname	Values	default	example	description
YSTResultsMax	integer	"3"	"5"	This determines how many Yahoo! Search results to display.
siteRestriction	Space separated list of URLs	""	"www.mysite.com www.mysite1.com"	Restricts the search to the list of specified sites.
p	String	""	"madonna"	This field allows to focus the related search to the specific concept represented by 'p'. For instance, a particular context is about a broad topic. By setting 'p' to a specific concept Y!Q will focus in on that value (like a query). Consider an article that discusses pros and cons of a particular car, let's say an Audi A4. To focus in the related search one can set 'p' to "audi a4". This will make sure the related search results are relevant to "audi a4". The surrounding context is used to augment and bias the query specified in 'p'. The 'p' value is also commonly used in combination with the in-line Y!Q. For example, if you highlight a term by inserting an in-line Y!Q for that term, you may want to set to 'p' value to be that term. To make sure search results are relevant we always recommend to use the 'context' parameter to provide additional context. For example, consider a 'p' value like apple. Without 'context' it is not possible to disambiguate that 'p' value and return the most relevant results.
siteContext	String	""	"The spacecraft used only 130 pounds of the 181 pounds of xenon fuel it had aboard, according to European Space Agency spokesman Franco Bonacina in Paris. That translates to more than 5 million miles per gallon."	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. In the example below the context is about a fuel efficient spacecraft. The siteContext then provides additional information on its weight and actual fuel efficiency. This represents useful information, which Y!Q can use to further improve its search quality.
ei	String	"UTF-8"	"ISO-8859-1"	This allows specifying the encoding type of the data in the Y!Q form. Please specify this form field if your site supports browsers with no Javascript capability. This will allow Y!Q to work correctly on those browsers as well.
sourceOrder	String    s  i  y  yn  c1  c2  c3  m  img	"s,i,y,m"	"s,y,i,m"	This allows specifying the order of items that appear within the Y!Q overlay. The parameter sourceOrder accepts a list of comma-separated values that specify what content should be shown (please see below for the complete list of supported values). The order in which the values are placed will determine the order in which they are displayed. Note that each value in the list can only be used once. The following values are supported: s (search box), i (inside yahoo!), y (contextual web search results), c1, c2, c3 (static content provided by publisher, see below), m (show more/all results), img (show contextual images). "yn" - The YN parameter in the sourceOrder field will allow the Web Master to include Yahoo! News results based on the context set for YQ. Please note that y and yn are mutually exclusive - i.e. the overlay can currently display only web results or only news results, not both. In event that both are specified, the 1st one takes precedence, and the 2nd one is ignored.
c1, c2, c3	String	""	"My cool site logo or text goes here."	Y!Q allows publishers to display their own content in the overlay display. The motivation here is that a publisher for instance wants to display some relevant or important information within the Y!Q overlay, that is not being generated by Y!Q. For this reason Y!Q supports up to three optional hidden input fields named c1, c2, and c3 within an item's Y!Q form. The content for these fields can be HTML or plain text. When a user activates Y!Q, these parameters (if specified) will be sent to Y!Q and inserted into the overlay as specified. It is the responsibility of the publisher to test the HTML in these parameters to make sure it renders well. Y!Q will not perform any form of HTML validation. Y!Q will insert the static content into a container that has the id idC1, idC2, or idC3 (based on the corresponding parameter passed into Y!Q). This id can be used by the publisher to associate style sheets (CSS) and control the appearance of the displayed content.
negativeTV	String	""	"foo|bar"	This parameter allows publishers to specify a list of negative terms that should be ignored for contextual search. Negative terms are separated by the '|' character. Overall negative terms can be used for refining contextual search results. For example, consider an article about a BMW and a Mazda. Both terms maybe considered important by Y!Q. If one of these terms is specified to be a negative term, it would be ignored for contextual search. Let's say 'Mazda' is a negative term, then contextual search results are focused on BMW. Note: Negative terms that do not occur in the 'context' or 'siteContext' parameter are simply ignored.

Note: Internet Explorer (IE) allows a maximum URL length of 2084. IE (version 6.x and lesser) crashes if the size of the data in the Y!Q form exceeds 2084 bytes.

Example:

 <div class="yqcontext">
    <p>A fuel-efficient compact spacecraft has made it into lunar orbit,
        signaling Europe's first successful mission to the moon and putting 
        the inexpensive probe on course to study the lunar surface, 
        European Space Agency officials said Tuesday.</p>

    <form class="yq" action="http://yq.search.yahoo.com/search" method="POST">

        <input type="hidden" name="YSTResultsMax" value="5">
        <input type="hidden" name="p" value="smart-1">

        <input type="hidden" name="siteContext" value="The spacecraft used only 130 pounds of the
	181 pounds of xenon fuel it had aboard, according to European Space Agency spokesman
	Franco Bonacina in Paris. That translates to more than 5 million miles per gallon.">

        <input type="hidden" name="siteRestriction" value="sci.esa.int www.spacetoday.net">

        <input type="hidden" name="sourceOrder" value="s,c1,i,y">
        <input type="hidden" name="c1" value="This shows some cool extra information.">
        <input type="hidden" name="context" value="A fuel-efficient compact
            spacecraft has made it into lunar orbit, signaling Europe's first
            successful mission to the moon and putting the inexpensive probe
            on course to study the lunar surface">

        <div class="yqact">
            <input class="yqbt" type="submit" value="Search Related Info"

                onclick="return activateYQ(this)">
        </div>
    </form>
</div>
 

Step 5 (Optional): Change Y!Q Theme

If you would like to enhance or otherwise change the look and feel of the Y!Q overlay, you may choose to create a CSS file (called in Y!Q a "Theme") that redefines the appearance. This CSS file may reside anywhere accessible by your users and typically you would place this somewhere on your own website.

To indicate that you want to use a custom Theme you must add some additional javascript code above the code that calls the Y!Q library file. It is important that you include this code before the library call, as this code changes the library's behavior on your page.

The example below shows how to refer to the custom Theme. The url contained there is also the "default" Theme and can be used as a starting point for creating your own Theme.

Example:

 
<script type="text/javascript" language="javascript">
	document.sYQTheme = "http://yq.search.yahoo.com/javascript/defaultTheme.css";
</script>
 
<script language="javascript" type="text/javascript"
     src="http://yq.search.yahoo.com/javascript/yq.js"></script>

Here are some tips for developing themes for YQ:

• Creating a theme involves having a working knowledge of HTML, Javascript, and CSS, but primarily CSS. If you are unfamiliar with CSS, you might try visiting sites like w3schools before proceeding with developing a theme.
• Download the "default" Theme (url listed in the example above) and use this as a template for your initial theme testing and development.
• To modify the opacity of the overlay - modify this line: #yschyqresult { filter:alpha(opacity=96); -moz-opacity:0.96 }
• To modify the font size of the result text, here's an example of some CSS you might add to the bottom of your theme css file: #yschweb, #yschyqframe div, #yschweb div {margin:0; border:none; font-size:1.2em !important; font:1.2em !important}
• If you wanted to alter the background color of the overlay, you might try adding this rule to the bottom of your CSS: #yschyqresults {background-color: tan;}
• CSS content on the page you are placing Y!Q on may also effect the overlay. If you notice that the results display does not appear as you expect, check the CSS on the page you are embedding Y!Q to determine if you need to modify your theme CSS to override the page rules.
• Make sure you test your theme on multiple browsers/platforms for maximum compatibility with users of alternative browsers.

 <div class="yqcontext">
    <p>A fuel-efficient compact spacecraft has made it into lunar orbit,
        signaling Europe's first successful mission to the moon and putting 
        the inexpensive probe on course to study the lunar surface, 
        
        <span class="yqlink">
           
           <form class="yq" action="http://yq.search.yahoo.com/search" method="POST">

           <input type="hidden" name="YSTResultsMax" value="5">
           <input type="hidden" name="p" value="smart-1">

           <input type="hidden" name="siteContext" value="The spacecraft used only 130 pounds of the
	181 pounds of xenon fuel it had aboard, according to European Space Agency spokesman
	Franco Bonacina in Paris. That translates to more than 5 million miles per gallon.">

           <input type="hidden" name="siteRestriction" value="sci.esa.int www.spacetoday.net">

           <input type="hidden" name="sourceOrder" value="s,c1,i,y">
           <input type="hidden" name="c1" value="This shows some cool extra information.">
           <input type="hidden" name="context" value="A fuel-efficient compact
            spacecraft has made it into lunar orbit, signaling Europe's first
            successful mission to the moon and putting the inexpensive probe
            on course to study the lunar surface">
           </form>
        
           <a onclick="activateYQinl(this)" class="yqimgins">
             European Space Agency 
           </a>
       </span> 
        officials said Tuesday.</p>
     </div>