본문 바로가기

Tech-tips/How to blog

다음뷰 글 목록 위젯 수정하기

다음뷰 글 목록 위젯 수정하기


다음뷰가 2013년 초에 개편을 하면서 위젯 디자인이 세련되게 바뀌었습니다. 그러나 이전까지는 최신글/인기글/추천글 목록위젯을 구할수가 있었으나, 현재는 지원을 하지 않고 있습니다. 디자인이 개편한 다음 뷰와 어울리지 않아 더 이상 제공을 하지 않는 것 같습니다. 그래도 대부분 이런 서비스들이 구식코드를 완전히 사용할 수 없게 만들지 않고 어느 정도는 계속 사용할 수 있게 유지를 해주는 편인데요, 그래서 예전에 발급 받아놓은 코드를 십분 활용하면 다음뷰 글 목록 위젯을 사용 할 수 있습니다. 



<iframe src='http://api.v.daum.net/iframe/my_widget?skin=5&page_size=7&init_type=point&daumid=incusx' width='270' height='280' frameborder='0' scrolling='no' allowtransparency='true'></iframe>


다음뷰 글 목록 위젯은 이렇게 생겼습니다. 여기서 api가 나타내 주는 부분을 조정해주면 아주 간단하게 수정을 할 수 있습니다. 위쪽의 주소가 나타내는 부분을 대충 해석해보자면, 5번 스킨(검정)이 적용되고, 목록에는 해당 다음뷰 아이디의 인기글 목록이 뜨도록 되어있습니다. 


어떻게 이것을 알 수 있는지 코드를 한번 뜯어보겠습니다. 우선, “skin= “ 이 부분이 스킨을 고르는 부분입니다. 1번부터 5번까지 선택이 가능합니다.  “init_type=” 이 부분이 위젯이 뜰 때 무엇을 가장 처음에 보여줄지 나타나는 부분입니다. 뒤에 아무 값이 없으면 최신 글이 로드가 되며, point 일 경우 인기글, recommend 일 경우에는 추천 글이 뜨게 됩니다. “daumid=” 뒤에는 자신의 다음 ID를 입력하면 됩니다.



<iframe src='http://api.v.daum.net/iframe/my_widget?skin=5&page_size=7&init_type=&daumid=incusx' width='270' height='280' frameborder='0' scrolling='no' allowtransparency='true'></iframe>


가장 기본인 최신글 위젯입니다. 



<iframe src='http://api.v.daum.net/iframe/my_widget?skin=5&page_size=7&init_type=point&daumid=incusx' width='270' height='280' frameborder='0' scrolling='no' allowtransparency='true'></iframe>


인기글 위젯입니다. 



<iframe src='http://api.v.daum.net/iframe/my_widget?skin=5&page_size=7&init_type=recommend&daumid=incusx' width='270' height='280' frameborder='0' scrolling='no' allowtransparency='true'></iframe>


추천글 위젯입니다. 

이제 스킨을 바꿔보도록 하겠습니다. 스킨은 총 5가지 색상을 제공하며, 1번은 기본인 보라색, 2번은 회색, 3번은 청록, 4번은 갈색, 5번은 검정입니다. 


1번 색상


<iframe src='http://api.v.daum.net/iframe/my_widget?skin=1&page_size=7&init_type=&daumid=incusx' width='270' height='280' frameborder='0' scrolling='no' allowtransparency='true'></iframe>


2번 색상


<iframe src='http://api.v.daum.net/iframe/my_widget?skin=2&page_size=7&init_type=&daumid=incusx' width='270' height='280' frameborder='0' scrolling='no' allowtransparency='true'></iframe>


3번 색상


<iframe src='http://api.v.daum.net/iframe/my_widget?skin=3&page_size=7&init_type=&daumid=incusx' width='270' height='280' frameborder='0' scrolling='no' allowtransparency='true'></iframe>


4번 색상


<iframe src='http://api.v.daum.net/iframe/my_widget?skin=4&page_size=7&init_type=&daumid=incusx' width='270' height='280' frameborder='0' scrolling='no' allowtransparency='true'></iframe>


5번 색상


<iframe src='http://api.v.daum.net/iframe/my_widget?skin=5&page_size=7&init_type=&daumid=incusx' width='270' height='280' frameborder='0' scrolling='no' allowtransparency='true'></iframe>



기본적인 코드 구성은 다음과 같습니다. 


<iframe src='http://api.v.daum.net/iframe/my_widget?skin=[스킨번호 1~5]&page_size=7&init_type=[위젯 첫화면 지정]&daumid=[자신의 다음 아이디]' width='[가로 넓이]' height='[세로 높이]' frameborder='0' scrolling='no' allowtransparency='true'></iframe>