LiewCF.com

Have you add LiewCF blog search to your web browser? Many readers are excited by the feature. I will show you how to create an auto discovery blog search for web browsers. WordPress used in this example.

Add LiewCF blog search to your web browser (FireFox 2 in this example)

The OpenSearch technology

We are using OpenSearch technology for the auto discovery blog search. OpenSearch is a collection of simple formats for the sharing of search results. Currently, both Internet Explorer 7 and Firefox 2 support this feature. Please refer to OpenSearch.org for technical documents.

Overview

It is easy to create an autodiscovery search for web browsers. We need to create a simple xml file and add a line of code into your web page's header. That's all. Read on for details.

Note: This tutorial is for WordPRess blog. You might need to modify the code to work with your blogging platform.

Creating OpenSearch XML file

Now, we create a XML file which would be read and added into user's web browsers.

1. Create a new plain text file
2. Paste the following lines of code into it:
   PLAIN TEXT
   XML:

   1. <?xml version="1.0"?>
   2. <OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
   3.     <ShortName>YOUR_BLOG_NAME</ShortName>
   4.     <Description>YOUR_BLOG_DESCRIPTION</Description>
   5.     <Url type="text/html" template="http://YOUR_BLOG/PATH/index.php?s={searchTerms}" />
   6.     <LongName>YOUR_BLOG_LONG_NAME</LongName>
   7. </OpenSearchDescription>

3. Replace these terms in the code with yours:
   • YOUR_BLOG_NAME -- the name of your blog
   • YOUR_BLOG_DESCRIPTION -- tell people about your blog
   • YOUR_BLOG/PATH -- your blog path
   • YOUR_BLOG_LONG_NAME -- a longer blog name
4. Save the file as "myopensearch.xml"
5. Upload "myopensearch.xml" to your WordPress blog root.

Blog search auto discovery

In order to make web browsers auto discover our blog search, we need to add a <link/> tag into page header.

1. Open "header.php" of your WordPress theme.
2. Find:
   PLAIN TEXT
   HTML:

   1. <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />[html]</li>
   2. <li>Add the following line of code immediately after the above line:
   3. [html]<link rel="search" title="LiewCF.com Tech Blog" href="http://www.liewcf.com/blog/liewcf-opensearch.xml" type="application/opensearchdescription+xml" />

3. So, it will look like this:
   PLAIN TEXT
   HTML:

   1. <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
   2. <link rel="search" title="YOUR_BLOG_NAME" href="http://YOUR_BLOG/PATH/myopensearch.xml" type="application/opensearchdescription+xml" />

4. Save "header.php" and upload back to your WordPress theme folder.

You're done! Back to your blog and add the blog search to your web browser.
References: Heath Stewart's Blog and Mozilla Developer Center

Bonus: WordPress OpenSearch plugin -- add OpenSearch RSS feed functionality to a WordPress blog. (Does not include browser AutoDiscovery)

blog, opensearch, search, searchengine, wordpress

Read also:

• Add LiewCF Blog Search to your Web Browser
• Create Opera Widget for Your Blog
• WordPress Improved Image Browser
• Nokia Phone with Apple Safari Inside?
• Bon Echo - Firefox 2 Alpha 2 Review