웹마스터 팁

네이버 검색 결과를 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}

 

끝입니다. 도움이 되셨으면 좋겠습니다. ^^

 

제목 글쓴이 날짜
메뉴가 많을때 레이아웃 쉽게 변경하기 웹빌드ver2 2014.05.23
XE 코어 1.7 버전에서 최근이미지 출력하기 [1] file 때린데 또때려 2013.12.14
스팸 회원 삭제시 동시에 관련 글 / 댓글 자동 삭제 + 스팸IP 등록기능 구현방법입니다 [20] sejin7940 2013.05.22
1.7.5에서 추가된 게시물당 최신댓글 불러오기 스킨에서 활용법 [2] file mAKEkr 2014.05.20
xe_documents DB 테이블이 깨져서 게시판이 엉망이 됄경우 file 지으니 2014.05.17
스케치북 추천+등록을 활용한 비추천+등록 버튼 만들기 [2] file oscarmike 2014.05.16
1.7.3.4 + sketchbook5 에서 대댓글 에디터 사용불가문제 [4] 뒤뒤 2013.08.07
XE CDN 서비스 중단에 대응하는 CDN 주소 변경법 (자신의 CDN서버로) [2] Stellar 2013.11.08
스케치북 게시판에 로그인/로그아웃 버튼 만들기 [1] Arp. 2013.09.22
최근문서 or 콘텐츠 위젯 공지글 뽑아오기 [8] Xiso 2010.11.29
제이쿼리 최신 버전 사용하기 [8] Lansi 2013.10.08
네이버 검색 API XE하고 연동하기 [3] mindpainter 2013.01.09
본문 링크 새창으로 띄우기.. [9] 멀티비타민 2013.11.11
푸시윙 댓글푸쉬서비스 소셜댓글 모드도 추가하기 [2] file XE힘들당휴 2014.05.11
이메일 주소로 계정 찾기시 잘못된 계정 인증요청이라고 뜰때 임시 대처법 file 루비스코 2014.05.10
출석부 모바일에서 출석이 혹시 안될경우. [6] BJ람보 2014.05.06
비회원 GPS 정보 처리 웹빌드ver2 2014.05.09
[주옥시리즈] [1.7.4] 로그인창 옆에 신규 쪽지 수 보여주기 [3] socialskyo 2013.09.09
XE를 사용중 백지현상이 있을경우 체크해볼 요소 [2] jambox 2014.02.08
무한 스크롤 스크립트 [4] 웹빌드 2014.04.16