Tuesday, September 26, 2006

Integrated Google AJAX Search API

Google AJAX Search API를 이용하여 블로그 사이드바에 구글 서치를 설치했다. 서치필드에 검색어를 입력하면 지역, 웹, 비디오, 블로그등을 검색하여 사이드바에 결과를 보여준다.

TypePad Based Sample과 Blogger Based Sample이 제공되는데, Google Ajax Search API Key를 얻어서 블로그 템플릿에 붙일 수 있는 코드 샘플을 얻은 다음에 블로그의 템플릿에 붙이고 수정하여 빌드를 하면 되는데, 샘플코드의 head로 둘러싸인 코드는 템플릿의 head사이에, body에 둘러싸인 코드는 템플릿의 사이드바 부분에 붙이고 빌드를 한다.

"Whie House"로 지역검색을 하면 구글 맵스미국 백안관 부근의 지도를 보여주는데, "Blue House"로 검색을 하면 청와대를 보여주지는 않는다.

각 결과들은 더 많은 결과를 보여주거나 하나의 결과만 볼수 있도록 확장 및 축소할 수 있는 단추가 각 지역, 웹, 비디오 및 블로그 주제 옆에 붙어 있으며, 각 주제들도 확장 및 축소가 가능하다.

블로거에는 navbar가 기본적으로 붙어 있어서 블로그 검색을 할 수 있도록 설계되어 있으나, Google Ajax Search API를 통해서 좀 더 확장된 검색을 블로그내에서 할 수 있게 되었다.

All most via AJAX Search API Hackey.


Update-1:
Mr. Catus asked for english translation post as a comment. First of all, Thank you for your comment and concern to my post . :)
As described on my post, all most are known via AJAX Search API Hackey but I thought Mr. Catus want to know how to integrated Google AJAX Search API in my sidebar. I am not familiar with english and Javascript programming and object-oriented programming concepts but I described how to integrated Google AJAX Search API in my sidebar with very very short my english capability as Mr. Catus' request.

First I signed up for Google AJAX Search API to embed Google search in my blog at this place .
Agreed the terms and conditions and written my blog address in My web site URL Field as http://zizukabi.blogspot.com. And generated API Key to click the button.
Next page showed me the My Key, the key is good for all URLs in this directory (http://zizukabi.blogspot.com/), and example code as below;


As descbed first i am not familiar with javascript programming and so on. So I din't know how to this first. So Inserted in my blog template and build and observed my blog appearnace. And thinking again.
I made many attempt because I am not javascript programmer. And thinking again while looking the code. hum.....
So I divided the example code into two piece.

One piece example code is revised and some fuctions in the code that is not needed to me are malfunctioned. And inserted in my blog template before /head as below;


The other is inserted below blogger button in my blog template as below;


That's all.
After that I just build with neglected an error just as invalid key message.
Finally all thing is good.

And I am thanks again to Mr. Eric who gave me terrible traffic as his post like below;

Today is.... Korean Thanks-giving Day. Happy Together :) (2006.10.06)


Update-2: The Google AJAX Search API currently support Firefox 1.5+, IE 6, and Safari, and Opera 9+. (2006.10.10)

Update-3 for Blogger in Beta: In Blogger in beta, Google Ajax Search ApI can be used as described 'The "Hello World!" of Google's Ajax API Search in Beta' by Hoctro's Place but widget shall be edited as below Google Ajax Search Code I did recently figure I did:

<b:widget id='HTML1' locked='false' title='Google AJAX Search' type='HTML'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://www.google.com/uds/api?file=uds.js&v=1.0&key=ABQIAAAA6j4d0
3_0McO_mHyyMwIq1BTTh8T3PYR5NfOcK8cDGLH5MXcz1xQ-6yRwN1rrsTqV0TZDMnL
VBHb7Sw' type='text/javascript'/>
<script language='Javascript' type='text/javascript'>
//<![CDATA[

function OnLoad() {
// Create a search control
var searchControl = new GSearchControl();

// create a drawOptions object
var drawOptions = new GdrawOptions();

// Add in a full set of searchers
var localSearch = new GlocalSearch();
searchControl.addSearcher(localSearch);
searchControl.addSearcher(new GwebSearch());
searchControl.addSearcher(new GvideoSearch());
searchControl.addSearcher(new GblogSearch());
searchControl.addSearcher(new GnewsSearch());

// Set the Local Search center point
localSearch.setCenterPoint("");

// Tell the searcher to draw itself in tabbed mode
drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
// If draw in Lenear Mode, commented above code with "//"
// and de-commented below code
// drawOptions.setDrawMode(GSearchControl.DRAW_MODE_LINEAR);
searchControl.draw(document.getElementById("searchcontrol"),drawOptions);

// Execute an inital search
searchControl.execute("");
}

//]]>
</script>
<body onload='OnLoad()'>
<div id='searchcontrol'/>
</body>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

(2006.10.14)

Update-4: Replaced figure loaded at Oct. 14th with live code. (2006.11.18)

Update-5: 2007년 11월 11일에 이 Google AJAX Search를 사이드바에서 내렸다. (2007.11.11)

11 comments:

  1. Can you add English translation to this post?

    Thanks

    ReplyDelete
  2. nice explanation :)

    i might as well try this Google's AJAX Search ^^

    thanks for sharing :)
    and thanks for the english ;)

    ReplyDelete
  3. Can you post an English translation of the Babelfishese?

    ReplyDelete
  4. hi, very clear explanation! Thank you, but everytime I paste in the Widget code in edit-template mode, the template fails to save and says: "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The reference to entity "v" must end with the ';' delimiter."

    What can I do to fix this problem? I would appreciate an email to wanabehuman@gmail.com.

    Thanks again!

    :)

    ReplyDelete
  5. wanabehuman/ Oh! very nice to hear that you've fixed the problem. :)

    Regarding to tabbed form, please refer to my post "Google Ajax Search Changed in Tabbed Mode"

    Further detailed explanation, refer to GSearcherControl Draw Modes provided by Google AJAX API.

    I hope this helps you. :)

    ReplyDelete
  6. cool! I'm gonna try this one. tnx for post.:)

    ReplyDelete
  7. Alexiel,
    You had better install New feature: Search Box which is also AJAX Search Box for your blog.

    ReplyDelete
  8. I suggest you to come on a site on which there is a lot of information on this question.

    ReplyDelete
  9. Hi Thanks for sharing your thoughts. Take care.

    ReplyDelete
  10. Hello Thanks for such a perfect submit and the evaluation, I'm completely impressed! Maintain stuff like this coming.

    ReplyDelete