티스토리 블로그에 구글 맞춤검색 달기 (iframe 방식)

들어가며

티스토리 블로그에 구글 맞춤검색을 적용하는 방법에 대한 포스팅입니다.
들어가기에 앞서 미리 블로그의 포스트들에 대한 정보가 구글에 등록되어 있어야 검색이 이루어지므로, 사이트맵의 정보가 담긴 XML을 제작하시거나, 간편히 구글에 RSS 피드를 등록해 주시기 바랍니다.

블로그 RSS 피드 등록 - http://blogsearch.google.co.kr/ping

이 포스트를 작성하면서 보니, iframe 을 이용한 호스팅 방식이 사라지고, '2페이지', 혹은 '검색 결과만'으로 변경된 모양입니다.
덕분에 어거지로 기존에 생성되었던 코드를 이용하여 적용시키는 식으로 포스트를 작성하게 되어 전체적인 내용이 다소 지저분해진 점 미리 양해 부탁드립니다.

구글 맞춤 검색엔진 생성

구글 맞춤 검색엔진은 다음 링크에서 만들 수 있습니다.
구글 맞춤검색 - http://www.google.co.kr/cse/

맞춤검색 엔진 만들기를 클릭하세요.

이름, 설명, 검색할 사이트를 알맞게 채우시고, 버전은 표준형을 선택한 뒤 다음 단계로 넘어갑니다.

디자인을 설정하는 단계입니다.
검색창은 어차피 스킨의 검색창 디자인을 사용할 것이기 때문에 검색 결과의 디자인만 보고 다음으로 넘어가도록 합니다.

코드 생성이 완료되었다고 나오는데 무시하고 '디자인'을 클릭합니다.

제가 예전에 만들었을 때에는 iframe 설정 옵션이 있었는데, 이번에 포스팅을 하면서 보니 iframe 옵션이 사라졌다고 합니다. 하지만 기존에 생성되었던 코드를 이용하면 되므로 별 상관은 없습니다.
여기서는 일단 '2페이지'나 '검색결과만'을 선택하고 저장하도록 합니다.

아직 블로그에 삽입 할 맞춤 검색엔진 코드가 완성이 된 것이 아니므로, 구글 맞춤검색 페이지를 닫지 말아주시기 바랍니다.

티스토리 스킨 수정

맞춤 검색엔진의 코드는 티스토리의 스킨을 수정하면서 완성시키도록 하겠습니다.

검색 결과를 출력할 부분

찾기를 이용하여 부분을 찾도록 합니다.

찾았다면 HTML 구조에 유의하여 </div> 위에다가 다음 코드를 붙여 넣습니다.

<!-- Google CSE 검색결과 부분 시작 -->
<div id="cse-search-results"></div>
<script type="text/javascript">
    var googleSearchIframeName = "cse-search-results";
    var googleSearchFormName = "cse-search-box";
    var googleSearchFrameWidth = 가로너비; // 반드시 자신의 블로그 너비에 맞게 수정해 주세요!!
    var googleSearchDomain = "www.google.co.kr";
    var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>
<!-- Google CSE 검색결과 부분 끝 -->

위 코드를 붙여넣은 다음, 반드시 googleSearchFrameWidth 의 값을 자신의 블로그 너비에 맞도록 수정해 주시기 바랍니다.

붙여넣은 코드 예시

여기서 주의하실 것은, 기존에 존재하는 검색 결과 출력 부분의 코드를 지워버리면 태그가 정상 작동하지 않는다는 문제점이 존재합니다.

만약, 구글 검색시마다 나오는 ""에 해당하는 글 0건이라는 글귀가 보기 싫다면, 이 부분을 다음과 같이 변경해 주시기 바랍니다.

[변경 전]
<div class="searchList"> <!-- 본문 검색 결과 리스트 -->
    <h3>&quot;&quot;에 해당되는 글 건</h3>
    <ol>
        <s_list_rep>

[변경 후]
<div class="searchList"> <!-- 본문 검색 결과 리스트 -->
    <script language="javascript">
        var str = "";
        if (str != "") { document.write("                    <h3>&quot;&quot;에 해당되는 글 건</h3>"); }
    </script>
    <ol>
        <s_list_rep>

※ 이 부분은 스킨의 구조에 따라 약간씩 차이가 있을 수 있습니다.

이는 검색 단어를 나타내주는 치환자인 이 존재할 경우에만 해당 문구를 출력해 주는 스크립트로, 이 상태에서는 태그를 선택했을 경우에만 "~"에 해당하는 글 X건이라는 글귀가 보여지게 됩니다.

검색창 부분

찾기를 이용하여 <s_search>를 찾도록 합니다.

찾으셨다면 기존에 존재하는 검색창은 주석처리( <!-- 와 --> 로 감싸면 됩니다.) 해 버리시고, 다음의 코드를 붙여 넣도록 합니다.

<!-- Google CSE 검색창 부분 시작 -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load('search', '1');
    google.setOnLoadCallback(function() {
        google.search.CustomSearchControl.attachAutoCompletion(
        '검색엔진 고유 ID',
        document.getElementById('q'),
        'cse-search-box');
    });
</script>
<form action="http://blog.shar.kr/search" id="cse-search-box">
    <input type="hidden" name="cx" value="검색엔진 고유 ID" />
    <input type="hidden" name="cof" value="FORID:11" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input id="스킨의 검색창 id" class="스킨의 검색창 스타일 클래스" type="text" name="q" />
</form>
<!-- Google CSE 검색창 부분 끝 -->

검색엔진의 고유 ID는 구글 맞춤검색 제어판의 '기본사항'에서 확인하실 수 있습니다.
다음 이미지를 참조하셔서 '기본사항' 하의 검색엔진 고유 ID 를 복사하여 위 코드를 적절히 수정하도록 합니다.

이제 블로그에 설치가 완료되었습니다.
새로 변경된 방식으로 설치하는 것은 먼저 적용해 본 후에 추가하도록 하겠습니다.