If you noticed the nice Google AJAX Search widget on my main blog CleverClogs and you are a TypePad user yourself, you may wonder how to implement this on your own blog. Because I realized over time CleverClogs had been updated with all kinds of customized templates and quite a few snippets of Javascript, I decided to create a new blog from scratch just for this project. The Google AJAX Search blog that you read now is public and serves two purposes: to explain to other TypePad users how to implement Google AJAX Search, and to experiment with the code so that it works on all pages with an optimum of features and under all desired circumstances.
Another reason for me to create this blog is so that Six Apart support representatives (like Jen, for example), the Google AJAX Search development team and fellow TypePad hackers can follow along and perhaps provide suggestions for improvement. The ideal ultimate outcome of this exercise is that will become easier to implement Google AJAX Search on anyone's TypePad blog.
Summarized Instructions:
- Prepare (Google AJAX Search API key; backup; choose weblog)
- Convert to Advanced Templates
- Modify the <body> tag
- Clone three default Template Modules
- Add Google style sheet to "head-common" Template Module
- Modify the Index Templates and Template Modules that depend on "head-common"
- Create a new TypeList for the search box
- Add TypeList to "sidebar" Index Template
- Publish your blog
Detailed Instructions
Apply for a Google AJAX Search API key. It's a simple process with immediate gratification and requires that you agree to the license terms displayed. On the same screen where you get your Google AJAX Search API key rudimentary HTML code is displayed to try out your new key.
Before you start amending your TypePad configuration: make a backup of your templates or start a new blog from scratch just like I did. I suggest you read all of the instructions through in advance and then carry the steps out in sequence. It might take you about one to two hours to finish this, depending on your level of experience dealing with Advanced Templates in TypePad.
STEP 2: Convert to Advanced Templates
Convert your blog templates to Advanced Templates. Apply the Advanced Templates design to your blog.
Choose the "Edit Design" option for your weblog and open the Main Index Template for editing. Then add the following attribute to the <body> tag: onload="onLoad();"
So in my case, the body tag looks like this:
<body class="layout-two-column-right" onload="onLoad();">
Save your template and apply the same change to the Individual Archive Index Template.
STEP 4: Clone three default Template Modules
Head over to TypePad Knowledge Base Answer 137 and clone the default TypePad Template Modules head-common, head-index and head-individual by copying the source code from each module and creating new ones. Save each Template Module. If you haven't worked with Template Modules before, then do read and follow the instructions at the TypePad Knowledge page about Template Modules carefully so that you know what you're doing.
The idea is that you force the TypePad system to apply the new Template Modules on your blog instead of the default ones.
STEP 5: Add Google stylesheet to the "head-common" Template Module
Add the following line to the bottom of the <head> section of your "head-common" Template Module:
<link href="http://www.google.com/uds/css/gsearch.css" type="text/css" rel="stylesheet"/>
This line loads the default set of Google AJAX Search styles. It's quite a list of all kinds of settings. One of them determines the width of the seach box. I had to override the default value because it was too wide for my sidebar, so I added this:
<style type="text/css">
.gsc-control {
width: 200px;
}
</style>
STEP 6: Modify the index templates and template modules that depend on "head-common"
Apply the following changes to the templates created in step 4:
in the "head-index" Template Module change the line that reads <$MTWeblogIncludeModule module="head-common"$> into <$MTInclude module="head-common"$>
save the template module
in the "head-individual" Template Module again change the line that reads
<$MTWeblogIncludeModule module="head-common"$> into <$MTInclude module="head-common"$>
save the template module
in the "Individual Archives" Index Template change the line that reads
<$MTWeblogIncludeModule module="head-individual"$> into <$MTInclude module="head-individual"$>
save the template module
in the "Main Index Template" Index Template change the line that reads
<$MTWeblogIncludeModule module="head-index"$> into <$MTInclude module="head-index"$>
save the template module
STEP 7: Create a new TypeList for the search box
Create a new TypeList of the type Notes, name it "Google AJAX Search", click on Add a new Item, leave the Label field empty and add the following code to the Note field:
<div id="searchControl"></div>
<script src="http://www.google.com/uds/api?file=uds.js&v=0.1
&key=Put_Your_Google_AJAX_Search_API_key_here"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var searchControl;
function onLoad()
{
searchControl = new GSearchControl();
searchControl.setLinkTarget( GSearch.LINK_TARGET_SELF );
var blogSearch=new GblogSearch();
blogSearch.setUserDefinedLabel("LabelYourSearch");
blogSearch.setUserDefinedClassSuffix("siteSearch");
blogSearch.setSiteRestriction ("url/ to your blog"); //e.g. "http://www.cleverclogs.org/"
searchControl.addSearcher(blogSearch);
searchControl.draw(document.getElementById("searchControl"));
}
function searchControlClear()
{
searchControl.clearAllResults();
}
//]]>
</script>
STEP 8: Add TypeList to "sidebar" Index Template
Add the this line to top of your "sidebar" Index Template:
<!--#include virtual="/lists/google_ajax_search/module.inc"-->
Save the template.
Make sure you publish all of your templates by choosing Publish All Files from the dropdown box.
This is the first version of my instructions. Please help me by providing feedback. I'll incorporate your suggestions in my text if they are appropriate.For the time being I'm going to leave this post as a featured one on the homepage of this blog. Follow-up posts will be listed in the sidebar.
UPDATE: Sept 15th, 2006: In a public comment Marc Lucovsky, architect of Google AJAX Search, provided feedback to simplify the script. I gratefully incorporated his suggestions. They definitely make the script easier to follow. Note that there's now also a tab above the search results that indicates from which site the results are retrieved.
