구글 CSE 붙이기 I(홈페이지)
게시일: 2007/08/23 | 글쓴이: doa | 10839 번 | 프린트 | 메일


구글 CSE(Custom Search Engine)를 설정했다면 이제 구글 CSE를 홈페이지나 블로그에 붙이면 된다. 구글 CSE를 붙이는 방법은 여러 가지가 있다. 각각의 방법을 보면 다음과 같다.

  • 구글 CSE 검색 홈페이지 사용
  • 홈페이지나 블로그에 검색창을 달고 검색 결과는 구글 페이지 사용
  • 홈페이지나 블로그에 검색창을 달고 검색 결과까지 로컬 페이지 사용
    • 추가적인 파일을 만들 수 있을 때(예: 홈페이지)
    • 추가적인 파일을 만들 수 없을 때(예: 티스토리)


구글 CSE 검색 홈페지를 사용하는 방법구글 CSE를 사용하는 가장 간단한 방법이다. 구글 CSE 페이지 에서 제공하고 있는 홈페이지 링크 를 클릭하면 사용할 수 있는 방법으로 검색창과 결과창 모두 구글 페이지를 사용한다.

검색창 결과창
구글 CSE를 이용하는 가장 간단한 방법이다. 검색창은 꾸미기에 따라 얼마든지 구글과 비슷하게 꾸밀 수 있다. 결과창 역시 구글을 사용하기 때문에 따로 설정할 부분이 거의 없는 편이다.


두번째는 홈페이지나 블로그에 검색창을 달고 검색 결과는 구글 페이지를 사용할 수 있다. 구글 CSE(Custom Search Engine)를 이용하는 사람 중 상당수가 이 방법을 사용하고 있으며 가장 좋은 사용 예는 토이 님의 Fierfox OUTSiDE 이다. 검색창은 토이님이 만든 구글스러운 Fierfox OUTSiDE에 달아 두고 결과 창은 구글 페이지를 이용하는 방법이다.

검색창 결과창
토이님의 이 페이지를 보고 처음에는 어떻게 티스토리에 구현했는지 의아했다. 그러다가 이 사이트의 주소가 firefoxinside.tistory.com가 아니라 firefoxoutside.tistory.com라는 것을 알고 별도의 페이지를 만든 것을 알았다. 디자인도 구글스럽지만 아이디어도 괜찮은 것 같았다.


마지막 방법은 CSE를 정말 로컬 검색엔진처럼 꾸밀 수 있는 방법이다. 검색창도 로컬 사이트에 두고, 검색 결과도 로컬 사이트에서 표시되기 때문이다. 가장 대표적인 예는 역시 QAOS.com이다.

검색창 결과창
그림을 보면 알 수 있지만 검색창도 QAOS.com에 있고 결과도 QAOS.com 내에서 표시된다. 따라서 Google 맞춤검색이라는 문구만 없다면 구글로 검색한 것인지 로컬 검색엔진을 사용한 것인지 알기 어렵다.


첫번째 방법과 두번째 방법은 따로 설명할 필요가 없을 정도로 쉽기 때문에 이 팁에서는 세번째 방법만 설명하도록 하겠다. 문제는 세번째 검색창과 결과창 모두 로컬 페이지에 출력하기 위해서는 웹 사이트에 별도의 페이지를 업로드해야 한다는 점이다. 따라서 필자의 홈페이지처럼 설치형 CMS설치형 블로그를 사용하는 경우에는 문제없이 이 팁을 적용할 수 있다.

티스토리 처럼 설치형이 아닌 가입형, 태터툴즈처럼 설치형이지만 스킨때문에 별도의 파일을 추가하는 것이 무용지물인 사람은 구글 CSE 붙이기 II(블로그)을 적용하기 바란다.

검색창 달기
검색창은 다는 방법은 쉽다. 기존의 로컬 검색창이 있던 자리를 CSE 검색창으로 바꾸면되기 때문이다. 방법은 다음과 같다.
  1. 설정하려는 검색 엔진(QAOS)의 control pannel을 클릭한 뒤 Code를 클릭한다.
  2. Search box and search results code for your website+ 기호를 클릭한다.
  3. Please select a branding style for your search box.에서 검색창의 모양을 선택하고 Save Changes 단추를 클릭한다. 필자는 구글 로고가 검색창 안에 나오는 마지막 항목을 선택했다.
  4. Specify the URL of the page on your site where you want the search results to appear에 검색 결과를 내보낼 파일의 이름을 지정한다. 서버에 없는 적당한 URL을 지정한다.
    http://qaos.com/gsearch.php
  5. Specify where in the results you want advertising to be placed에서 적당한 광고 위치(예: Top and Bottom)를 선택한 뒤 Save Changes 단추를 클릭한다.
  6. Paste this code in the page where you'd like your search box to appear. 아래의 내용을 복사한 뒤 기존의 검색창을 이 코드로 대치한 뒤 저정한다.
    클릭하면 자동으로 선택되므로 Ctrl-C를 눌러 클립보드로 복사한 뒤 붙여넣으면 된다. QAOS.comheader.php에 다음과 같은 코드를 삽입해서 검색창을 구현했다.
    검색창의 크기는 기본이 40이고 검색 버튼의 이름이 Search로 되어 있다. 그러나 이 크기와 단추의 이름은 사용자가 바꾸어도 된다. 애드센스의 검색 상품이 아니기 때문이다.


결과창 달기
검색 결과 창을 달기위해서는 새로운 파일을 서버로 업로드해야 한다. 검색창 달기에서 검색 결과 창의 URL을 http://qaos.com/gsearch.php로 했다면 gsearch.php를 만들어서 업로드하면된다.
  1. 좋아하는 편집기(예: EditPlus)를 실행한다.
  2. Place this code in the page you'd like your search results to appear. 아래의 코드를 편집기에 붙여 넣는다.
  3. 이 파일을 검색창 달기에서 지정한 파일 이름(예: gsearch.php)로 저장한 뒤 이 파일을 서버로 업로드한다. 참고로 다음은 필자가 사용하고 있는 검색 결과창의 내용이다.
    gsearch.php
    <?
    // 다음 두 줄은 홈페이지의 배치를 가져오기 위해 Include하는 파일
    include('mainfile.php');
    include('header.php');
    <P>
    // 테이블 열기
    echo <<<___PREV___
    <TABLE border=0 cellpadding=1 cellspacing=0 width=100%>
    <TR><TD bgcolor='#B5E2FE'>
    <TABLE border=0 cellpadding=5 cellspacing=0 width=100%>
    <TR bgcolor='#FFFFFF'><TD align=center>
    ___PREV___;
    ?>
    // CSE 코드의 시작
    <!-- Google Search Result Snippet Begins -->
      <div id="results_013201085123733714985:lbrmfjer-yw"></div>
      <script type="text/javascript">
        var googleSearchIframeName = "results_013201085123733714985:lbrmfjer-yw";
        var googleSearchFormName = "searchbox_013201085123733714985:lbrmfjer-yw";
        var googleSearchFrameWidth = 600;
        var googleSearchFrameborder = 0;
        var googleSearchDomain = "google.com";
        var googleSearchPath = "/cse";
      </script>
      <script type="text/javascript" 
      src="http://www.google.com/afsonline/show_afs_search.js"></script>
    <!-- Google Search Result Snippet Ends -->
    // CSE 코드의 끝
    <?
    // 테이블 닫기
    echo <<<___PREV___
    </TD></TR>
    </TABLE>
    </TD></TR></TABLE>
    ___PREV___;
    <P>
    // 마지막으로 저작권 정보를 출력하는 파일 include
    include('footer.php');
    ?>


이렇게 한뒤 홈페이지에 붙인 검색창에서 검색하면 그림처럼 검색 결과가 로컬 페이지안에 들어오는 것을 알 수 있다.

검색창 결과창


구글 CSE 붙이기 II(티스토리) 구글 CSE(Custom Search Engine)는 이전 팁에서 설명한 ... (9274) 2007-08-23
구글 CSE 설정 따라하기 구글 CSE를 설정하는 자세한 방법은 뒤에서 설명하고 이번 팁... (9667)2007-08-23

QAOS.com에 게시된지 1년 이상된 자료와 관리자가 공개한 자료는 누구나 제한없이 읽을 수 있습니다.
그러나 QAOS.com의 자료를 퍼가는 것은 금지하고 있습니다.

이 정보가 유용하다고 생각되시면 QAOS.com과 많은 다른 사람들을 위해 퍼가기 보다는 링크로 알려주시기 바랍니다.

세상사는 이야기

  • 컴맹도 할 수 있는 War >
  • 너희를 자유롭게 하리 >
  • 찾아라! 아이폰 순정용 >
  • 만원대 피젯 스피너를 >
  • 망하는 길을 택한 쿠팡 >
  • 물놀이에 적당한 가성 >
  • 컴퓨터를 IPTV로 2, po >
  • 컴퓨터를 IPTV로 만들 >
  • Warning.or.kr도 우회 >
  • 한국의 100대 부자, 어 >


  • RSS 구독 (익명 | 회원 | 강좌 | 포럼)
    (C) 1996 ~ 2017 QAOS.com All rights reserved.