how to: use google search ap is on your blog
DESCRIPTION
How can you make Google serve you better? Customizing Google search to suit one's needs in a more controlled manner has been a fairly less exploited area - at least by the end-users. Perhaps because there are enough 3rd party widgets available to assist a normal tusker with her Blog to do this work. This slideshow is about getting a little hands-on with Google Search API to put a professional looking search-box on your blog - all the while utilizing existing components available on (what's called) the Google OS.TRANSCRIPT
BROUGHT TO YOU BY WWW.MINDGAP.IN
How To:
Use Google Search API’son your Blog
How To Use Google Search API’s on Your Blog
Step 1
The first step is to have a functional Google account.
HOW CAN YOU MAKE GOOGLE SERVE YOU
BETTER? Customizing Google search to suit
one's needs in a more controlled manner has
been a fairly less exploited area - at least by
the end-users. Perhaps because there are
enough 3rd party widgets available to assist
a normal tusker with her Blog to do this
work.
This slideshow is about getting a little hands-
on with Google Search API to put a
professional looking search-box on your blog
- all the while utilizing existing components
available on (what's called) the Google OS.
2
www.mindgap.in
How To Use Google Search API’s on Your Blog
Step 2
Login into your Google account
Go to your "My Account" page [try here]
Click on "Custom search" to start building your search engine.
3
www.mindgap.in
How To Use Google Search API’s on Your Blog
Step 3
Click to start creating your own Google Custom Search Engine
4
www.mindgap.in
How To Use Google Search API’s on Your Blog
Step 4
Fill out the form with details about your blog.
Choose "Only sites I select" for How do you want to search.
In the "Sites to search:" box, provide the URL of your blog (e.g. myblogsite.blogspot.com).
Click “next” to test your engine
5
www.mindgap.in
How To Use Google Search API’s on Your Blog
Step 5
This second step of the wizard gives you the opportunity of testing out your custom search engine.
You may try searching certain terms from your blog posts and see how it looks.
In this example, "financial crisis" is being searched from my blog which gave the results as shown.
Click “Finish” after reviewing the results.
6
www.mindgap.in
How To Use Google Search API’s on Your Blog
Step 6
Once you have successfully created your customer search engine, it shall feature on the "My search engines" page [try here].
Go to the "control panel" of your search engine.
7
www.mindgap.in
How To Use Google Search API’s on Your Blog
Step 7
Click on the "Code" menu of the control panel. The page shall render configuration options of your search engine.
This page is dynamic, and shall change its appearance and options as you make these selections.
Make the following changes:
Choose "Host results on your website“
Then, choose "Overlay"
Provide the name of your blog url for the "Site URL:" (e.g. http://myblogsite.blogspot.com/search/)
8
www.mindgap.in
How To Use Google Search API’s on Your Blog
Step 8
As you click on "Generate Code" the page shall give you your Customized Google search engine embed code in a text window.
9
www.mindgap.in
Customer Search Engine created10
This is a self-sufficient code, and shall provide you
with all the necessary functionality to provide search
features on your blog site in the result overlay manner.
You may skip to Step 12 below or continue with the
next section that deals with controlling the look-and-
feel of your custom search engine. This heck utilizes
CSS and JavaScript components that Google uses for
the search box on its official websites.
www.mindgap.in
How To Use Google Search API’s on Your Blog
Step 9
To proceed, copy this code and paste it in Notepad.
Note in the above figure the API Keys of your Google Custom search engine are highlighted.
This is a unique API key that helps Google identify your search sites, preferences and parameters.
11
www.mindgap.in
How To Use Google Search API’s on Your Blog
Step 10
The text area below has the code and references to search-box class and js for a custom but professional look for your custom search engine.
Copy the following code, and paste it *above* the code for your search engine that you copied in Step 9.
/*copy the following code to Notepad:*/<style type="text/css">@import url(http://www.google.com/uds/css/gsearch.css);</style><div id="searchcontrol" style="width:180px;"><form id="searchbox_014037880324506594198:n7opl4yythc" action="" style="width:180px;" class="gsc-search-box" onsubmit="return false;" accept-charset="utf-8"><center><table cellspacing="0" cellpadding="0" class="gsc-search-box"><tbody><tr><td class="gsc-input"><input value="014037880324506594198:n7opl4yythc" name="cx" type="hidden"/><input value="UTF-8" name="ie" type="hidden"/><input autocomplete="off" class="gsc-input" name="q" size="10" title="search" type="text"/></td><td class="gsc-search-button"><input value="Search" class="gsc-search-button" name="sa" title="search" type="submit"/></td><td class="gsc-clear-button"><div class="gsc-clear-button" title="clear results"> </div></td></tr></tbody></table><table cellspacing="0" cellpadding="0" class="gsc-branding"><tbody><tr><td class="gsc-branding-user-defined"/><td class="gsc-branding-text"><div class="gsc-branding-text">powered by</div></td><td class="gsc-branding-img"><img src="http://www.google.com/uds/css/small-logo.png" class="gsc-branding-img"/></td></td></tr></tbody></table></center></form>
12
www.mindgap.in
How To Use Google Search API’s on Your Blog
Step 10 (cont)
Your Notepad should have something similar to this now:
13
www.mindgap.in
How To Use Google Search API’s on Your Blog
Step 11
Now, you will identify the API Key of your search engine, and use it to replace the API key given in the example textarea above.
There are two places where the replacement would be done.
In the first place, highlighted in blue, the API Key would have a prefix of "Searchbox_".
In the second instance, highlighted in yellow, you will have to replace only the API Key
14
www.mindgap.in
How To Use Google Search API’s on Your Blog
Step 11 (cont)
Caution: This is critical, any error in this copy+paste operation will render your code useless because Google API servers will not be able to identify your custom search engine without the exact API key.
After the replacements, delete the original Forms block as highlighted below.
The code of your Notepad is now ready to go onto your blog.
15
www.mindgap.in
How To Use Google Search API’s on Your Blog
Step 12
Go to your Blogger Layout settings,
Click on "Add a widget“
From the list of Widget types, select "HTML/JavaScript"
16
www.mindgap.in
How To Use Google Search API’s on Your Blog
Step 13
Paste your Custom search engine code into the text area of the new widget window.
Choose a widget title of your choice.
Click Save when ready.
17
www.mindgap.in
How To Use Google Search API’s on Your Blog
Step 14
Refresh the browser window of your blog.
The your custom search engine should be available on your blog main page as shown.
18
www.mindgap.in
How To Use Google Search API’s on Your Blog
Step 15
Congratulations! Your Custom Search engine is ready to roll.
Try out the search and see the results as an overlay on your blog page.
19
www.mindgap.in
www.mindgap.in20
With a little tweak, this method also works
with TypePad. Now, if you have means of
posting CSS and JavaScript on your
WordPress hosted blog, you can use Step-1
through Step-11 to create your customized
Google Search Engine and plug it into your
personal blog.
www.mindgap.in
PLEASE VISIT US AND DROP IN YOUR COMMENTS AT:WWW.MINDGAP.IN
© 2009 WWW.MINDGAP.IN
Thank you