You are invited to Log in or Register a free Frihost Account!

Add Contextual Search to Your Blog

Hack 97. Add Contextual Search to Your Blog

Y!Q gives your readers the ability to search for content directly related to your posts.
Say you're reading a weblog about astronomy and you run across a post about refraction, a stellar optical illusion caused by the atmosphere. If you want to learn more about refraction, you'll need to leave the weblog, browse to your favorite search engine, type in refraction, and start browsing through the results. Unfortunately, the search is lacking any context, and though you will get results related to astronomical refraction, you'll also find many results about lenses, the human eye, and physics. Most likely, you were interested in the term refraction as it relates to astronomy.
Yahoo! is addressing this problem by bringing search capabilities to remote sites such as weblogs with a feature called Y!Q. Y!Q is a contextual search, which means a Y!Q search uses additional information to refine the search results. If the astronomy weblog had a Y!Q search link embedded with every post, you could have clicked the link to see the top related results without leaving the weblogand within an astronomical context.
Weblogs are particularly suited for contextual search, because each post is a unique burst of text with its own topic. A related search link can give readers a path to explore more about a particular topic. And adding the feature to your weblog is just a matter of knowing some HTML.
Most weblog systems provide a template system for defining how posts should be displayed within a page. Adding a Y!Q search form is just a matter of editing your template. Every page that will host a Y!Q search must include the JavaScript Y!Q library. Open your template and add the following code somewhere between the <head> and </head> tags in the page:
<script language="javascript" type="text/javascript"

Next, you'll need to add some HTML to the section of the template that describes how posts should be displayed. Here's a simple bit of HTML from a Blogger ( template that describes how to display the text of a post:
<div class="post-body">

And here's the same code, with the addition of a Y!Q Search Related Info link:
<div class="post-body">
<div class="yqcontext">
<form action="" method="post">
<input type="hidden" name="context" value="<$BlogItemBody$>" />
<div class="yqact">
<input class="yqbt" type="submit" value="Search Related Info"
onclick="return activateYQ(this)" />

The <div> tag with the class yqcontext tells Y!Q what to highlight when someone clicks the Search Related Info link. And the <form> creates the Search Related Info link. Within the form, the hidden element named context tells Yahoo! what information is related to the search. In this case, the Blogger-specific <$BlogItemBody$> tag sets the value of context to the full text of the post when the weblog is published.
You could also narrow this value to the title of the post by using the <$BlogItemTitle$> tag instead. Other weblog systems have special tags for categories related to the post or a post excerpt. You might need to experiment with the context to see which information gives the best related results.
Once you save your template changes and republish your weblog, you should see the Search Related Info link after every post, as shown in Figure 6-10.
When a reader clicks the link, a new window appears within the page, highlights the context, and shows the top few related search results, as shown in Figure 6-11.
At this point, the reader can review the top results, click one to visit another site, close the Related Search Results box, or type his own query in the search field. Even though he types his own search query, Y!Q still retains the context of the post. Figure 6-12 shows the Y!Q Search Results page, along with the keywords extracted from the context text.
The reader can review the keywords and rerun the search with a different context, or he can completely turn off the related search feature to find more general results.
This example has shown the bare minimum needed to implement Y!Q. But there are quite a few options you can customize, most with hidden form elements you can add to the Y!Q HTML. Here are some of the possible customizations:
Figure 6-10. Y!Q Search Related Info links on a weblog

Search Specific Sites
You can use a hidden input tag named siteRestriction to limit Y!Q results to a single web site, including your own site. Set the value attribute of the tag to a list of sites separated by spaces.

Number of Results
By default, you'll see the top three results in a Y!Q box, but you can change this with a hidden input tag named YSTResultsMax.
Figure 6-11. Y!Q Related Search Results box

More Context
If there's some context you'd like to provide beyond what your readers see, you can use a hidden tag named siteContext for a brief paragraph of text, or a hidden tag named p to add specific keywords to the context.

Custom Logo or Text
You can add your own logo or text to the Y!Q box with hidden input tags named c1, c2, and c3. The value of the tags can be plain text or HTML, so you could include the HTML necessary to have your own logo in the Y!Q box, for example.

Look and Feel
You can play with the entire look and feel of the box by creating your own stylesheet. The default stylesheet for Y!Q ( is a good basis for building your own.
Figure 6-12. Y!Q Search Results page

You can find a full list of Y!Q customization options for publishers at
By adding a Y!Q search to your weblog, you'll be giving your readers a smarter search tool that lets you set the context for their research.
Copy + Paste.
No quote tags.
No credit.

If you think I'm wrong in anyway, please inform me.

Related topics
Intra site search...
Firefox...what's the big deal? please enlighten me!
666 - can this be?
What are your Firefox extensions
Firefox Search Engine Bar
How to integrate our site with google search engine ?
the best way to add a search function is?
Frihost Blogs Beta launched!
Smart Pricing
Managing Firefox search engines
Site Search Tool for a Flash Site.
add your link for free (just a little cost)
This topic is locked: you cannot edit posts or make replies.    Frihost Forum Index -> Scripting -> Php and MySQL

© 2005-2011 Frihost, forums powered by phpBB.