웹마스터 팁
네이버 검색 API XE하고 연동하기
2013.01.09 14:01
네이버 검색 결과를 XE로 만든 자기 홈페이지에 뿌리는 방법입니다.
미리보기: http://www.layoutskin.com/naverSearch
시작하기에 앞서 저는 개발자가 아님을 말씀드립니다. ^^;;
따라서 로직이 아니라 비주얼로 접근하였기 때문에 겉보기에는 멀쩡하지만 내부적인 안정성, 효율성 등은 장담 못하니 참고해주세요.
하지만 아주 간단하게 적용이 되는 장점은 있습니다.
1. 네이버 회원 가입 후 로그인
2. 네이버 개발자 센터> 오픈API (http://dev.naver.com/openapi/) 좌측메뉴에서 키등록
3. http://openapi.naver.com/search?key=등록한키값&query=검색어display=검색결과갯수&start=1&target=검색대상
위와 같은 형식에 키값을 제외하고 본인이 원하는 대로 값을 넣어 주소를 생성합니다.
검색결과갯수는 100가 한계라고 되어있습니다.
검색대상은 http://dev.naver.com/openapi/apis/search/rank을 보시면 다양하게 있습니다.
예: 실시간 급상승은 rank, 블로그는 blog, 웹문서는 webkr 등등
생성된 주소가 정상적으로 링크 되는지 꼭 확인하셔야 합니다! 정상이면 정돈된 문서가 나오고 비정상이면 태그들이 나옵니다.
4. 생성된 주소로 외부페이지 만들기
5. 전용레이아웃 만들기
레이아웃스킨은 무엇이든 상관없고, 레이아웃 편집을 이용하기 위해 따로 만드는 것이므로 문제가 없다는 확신이 있으면 레이아웃스킨에 다음에 나오는 코드를 넣어도 상관없습니다.
6. 코드삽입
HTML 편집영역
붉은색 표시부분은 본인레이아웃의 컨텐츠영역을 감싸고 있는 div의 아이디나 클래스 이름을 넣어주세요. 정확해야 합니다!!!
<div id="AAA">이면 #AAA, <div class="AAA">이면 .AAA 입니다.
녹색표시부분은 그냥 텍스트 이므로 선택사항입니다.
<script>
jQuery(function($){
var xmlTotal = $('#drawerContentsBox').find('total').text();
var xmlDate = $('#drawerContentsBox').find('lastBuildDate').text();
var linkData = $('#drawerContentsBox').find('rss').find('channel').find('item').find('link').html();
$('#drawerContentsBox').append('<p class="xmlSummary">네이버 웹문서에서 "layoutskin"으로 검색한 결과: '+xmlDate+' 현재 '+xmlTotal+'건이 검색됨</p>');
$('#drawerContentsBox').find('rss').find('channel').find('item').each(function(idx) {
var xmlTitle = $(this).find('title').text();
var itemData = $(this).html();
var itemDataSplit = itemData.split('<link>');
var itemDataSplit2 = itemDataSplit[itemDataSplit.length-1];
var itemDataSplit3 = itemDataSplit2.split('<description>');
var xmlLink = itemDataSplit3[itemDataSplit3.length-2];
var xmlDescription = $(this).find('description').text();
$('#drawerContentsBox').append('<div class="xmlDataRow"><p class="xmlTitle"><a href="'+xmlLink+'" target="_blank">' + xmlTitle+'</a></p><p class="xmlDescription">'+xmlDescription+'</p></div>');
});
$('rss').hide();
$('.xmlDataRow').hover(function () {
$(this).css('background','#f4f4f4');
}, function () {
$(this).css('background','none');
});
var rows = $('.xmlDataRow').length;
var per_page = 5;
var no_pages = Math.ceil(rows / per_page);
var pageNumbers = $('<div id="pages"></div>');
for ( var i = 0; i < no_pages; i++) {
$('<span class="page">' + (i+1) + '</span>').appendTo(pageNumbers);
}
$('#drawerContentsBox').append(pageNumbers);
$('.xmlDataRow').hide();
var t = $('.xmlDataRow');
for ( var j = 0; j <= per_page - 1; j++) {
$(t[j]).show();
}
$('.page:eq(0)').addClass('bold');
$('span').click(function() {
$('.page').removeClass('bold');
$(this).addClass('bold');
$('.xmlDataRow').hide();
for ( var k = ($(this).text() - 1) * per_page;
k <= $(this).text() * per_page - 1;
k++) {
$(t[k]).show();
}
});
});
</script>
CSS 편집 영역
.xmlDataRow {border-top: 1px solid #ccc; height: 55px; padding: 15px}
.xmlSummary {padding-bottom: 20px; font-size: 13px; border-bottom: 1px solid #ccc}
.xmlTitle {margin-bottom: 10px; font-weight: bold}
.xmlTitle a {text-decoration: none; color: #000}
.xmlTitle a:hover {text-decoration: underline}
.xmlDescription {width: 100%; color: #999}
#pages {padding-top: 20px; width: 100%; border-top: 2px solid #ccc; text-align: center}
.page{margin: 0 5px;cursor: pointer}
.page.bold{font-weight: bold}
끝입니다. 도움이 되셨으면 좋겠습니다. ^^
댓글 3
-
HB
2013.01.09 21:07
-
mindpainter
2013.01.10 10:44
제보 감사합니다! ^^
역시 껍데기 위주라 문제가 있네요.. 확인해 보니 ie9이나 그외 브라우저는 정상작동하고 ie8이하에서 문제인것 같습니다.
ie8이하에서는 xml태그를 jQuery실렉터로 사용할 수가 없는건 아닌가하는 생각과 함께 해결하는데 시간이 걸릴수도 혹은 아예 안될지도 모른다는 생각이 드네요.. 어쨌던 계속 테스트해 보겠습니다!!
-
엘엘
2014.05.12 18:18
알려주신 내용대로 키발급받아서 HTML영역이랑 CSS영역 수정하고 레이아웃에 적용시켰는데.. 안되네요.ㅠㅠ
제가 사용중인 레이아웃스킨에는 컨텐트영역이
<div id="content" style="max-width:{$layout_info->content_width}px"|cond="$layout_info->frame=='ce' || $layout_info->frame=='ece'"><div id="gap"> {$content} </div></div>
이렇게 되어 있길래 해당부분만 gap으로 수정하고 다른 부분은 모두 위 내용그대로 적용시켰습니다. 생성한 외부페이지 주소로 접속했더니 레이아웃스킨은 적용이 안되고..xml형식이 사라지고 텍스트형식으로 출력되네요. 제가 뭔가 빠트린 걸까요? :(
예시에 있는 사이트에서 제대로 나오지않는것같습니다.IE9입니다.
+추가
IE9호환성보기 모드여서 오류가 난듯하네요.순수IE9모드에서는 잘나옵니다.ㅋㅋ