Google Ajax Search API 이용하기.
2006년 8월 11일 by 김 승엽 View blog reactions
나중에 블로그에 추가해 보면 좋겠다고 생각한 구글의 서비스가 두 가지 있는데, 바로 Google Related Links와 Google Ajax Search 였습니다. 하지만 Google Related Links 의 경우, 올블릿에 비해 그 효용이 떨어진다고 생각해서 그만두고 Google Ajax Search 의 경우만 사이드 바에 한 번 구현해 보기로 했는데 이용법에 대해 검색을 해봤더니 도움이 될 만한 글이 별로 없더군요. 제대로 구현되면 지금 부착하고 있는 Adsense의 검색을 대신하려고 생각 했었습니다.
그래도 아래 두 사이트를 참조해 테스트는 해 봤습니다.
Get A New Browser
MovableType Korea Publishing Platform
두 사이트의 내용을 워드프레스의 경우에 맞추어 정리를 해보면 다음과 같습니다.
먼저 Google Ajax Search 사이트에 접속해 API key를 얻습니다. 키를 발급 받은 뒤에는 아래쪽에 샘플 코드가 나오는데 메모장 같은 곳에 복사해 저장해 놓으시는 것이 나중에 작업하기 편합니다.
이제 자신이 사용하고 있는 워드프레스 테마의 header.php 템플릿을 열어 아래의 코드들을 삽입합니다.
//<![CDATA[
function OnLoad() {
// Create a search control
var searchControl = new GSearchControl();
// add search controls in order you want them to appear
searchControl.addSearcher(new GblogSearch());
searchControl.addSearcher(new GwebSearch());
// add local search option
var localSearch = new GlocalSearch();
searchControl.addSearcher(localSearch);
// set starting point for local search
localSearch.setCenterPoint("Des Moines, IA");
// video search
searchControl.addSearcher(new GvideoSearch());
//set size of dataset you want returned
searchControl.setResultSetSize(GSearch.LARGE_RESULTSET);
//search options
var searchOptions = new GsearcherOptions();
searchOptions.setExpandMode(GSearchControl.EXPAND_MODE_PARTIAL);
// draw options determine how results are displayed
var drawOptions = new GdrawOptions();
drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);
// Tell the searcher to draw itself and tell it where to attach
searchControl.draw(document.getElementById("searchcontrol"), drawOptions);
// Execute an inital search
// optional - you can remove this line if you dont want it to auto search
searchControl.execute("Get A New Browser");
}
window.onload = OnLoad;
//]]>
</script>
@import url(http://www.google.com/uds/css/gsearch.css);
.gsc-control { width: auto; }
</style>
CSS를 수정하고 싶으시다면 http://www.google.com/uds/css/gsearch.css 를 다운로드해 수정하신 뒤에 테마 디렉토리에 업로드 하신 뒤 사용하시면 됩니다. 이 경우에는 스타일과 관련된 코드 대신 아래 코드를 넣어 주시면 됩니다.
header.php 템플릿의 수정은 이것으로 끝이고 이제 검색폼을 집어 넣을 부분에 (사이드바 템플릿 같은) 아래의 코드만 삽입하면 됩니다.
위의 코드를 사용하면 탭으로 구분된 결과가 나오는데 기본 설정 대로 사용하시려면 API key 발급 시에 나왔던 예제코드를 참조해 수정하시면 됩니다. 제 경우, 사이트 바에 넣었더니 검색 결과가 아래로 쭈욱 내려가서 테마가 일그러지는 문제와 속도 문제 등으로 테스트만 해보고 말았는데 CSS를 수정하거나 다른 곳에 삽입하시면 해결될 것 같습니다. (API 사용 예제에는 Comment form 옆에 삽입해 검색 결과를 코멘트에 바로 삽입하는 예제도 나와 있더군요.)
사이드 바에 삽입 했을 때의 CSS 수정 방법이나 다른 활용에 대해 아시는 분 계시면 조언 부탁 드립니다.
: ajax, Google, search
: ajax, Google, search
: ajax, Google, search
Current post already pinged to:
http://www.tiiop.pe.kr/mt/mt-tb.cgi/5.1310913107
tiiop// 확인하고 수정했습니다. 트랙백 주소도 수정했는데 다시 보내졌는지 모르겠네요.
실수로 블로그를 삭제하는 바람에 (FTP에서 폴더정리하다 그만..) 이것저것 새로 하다보니 URL이 변경됐습니다. 링크와 트랙백을 수정해 주시면 좋겠습니다. 꾸준히 절망클럽에서 제 블로그로 접속하시는 분들이 계시네요. 몇몇 분들이 에러 페이지에 접속을 하시니 수정 부탁드리겠습니다.
Google Ajax Search API…
Google Ajax Search API는 자신의 사이트부터 검색해줍니다. 무버블타입을 사용한다면 알아서 검색 최상위에 노출 되겠지만 동일 키워드로도 자신의 사이트부터 검색해준다는 것 때문에 꽤 쓸만 …