블로거뉴스 인기 뉴스를 위젯으로 만들기
티스토리의 업데이트 소식을 보다가 댓글 중에 이런 글이 있더라고요. 블로거뉴스 인기 리스트 같은 것을 블로그에 달 수 있으면 어떨까 하는 그런 이야기였습니다. 블로거뉴스 위젯으로 내 인기 뉴스, 내 최신 뉴스, 내가 추천한 뉴스 등을 뽑을 수 있지만 인기 뉴스만을 뽑아서 보는 등의 기능은 없으니까요.
그런데, 이게 가능합니다. 아주 간단하게.
2008/12/07 - 블로거뉴스, 인기글과 새글 한방에 보기
이전 블로거뉴스 인기글과 새글 한방에 보기에서 이야기했지만, 아주 간단하게 됩니다. 그것은 블로거뉴스가 구조상 iframe으로 호출하는 모듈로 구성되어 있기 때문입니다.
자, 그럼 순서대로 이야기를 해보도록 하죠. 구글 크롬과 인터넷 익스플로러를 기준으로 설명 드리겠습니다.
블로거뉴스 인기글 위젯을 만들어 보자
우선 블로거뉴스 페이지로 찾아갑니다. 그 다음, 적절한 분류를 고릅니다. 저는 전체보기에서 실시간 인기글을 선택했습니다.
구글 크롬의 예시
구글 크롬의 경우 제가 표시한 주황색 영역에서 우 클릭을 한 다음 “새 탭에서 프레임 열기”를 하면 새 탭에서 그 영역만 나오는 주소가 표시될 것입니다.
인터넷 익스플로러의 경우
인터넷 익스플로러의 경우 오른쪽 마우스를 클릭하여 메뉴에서 “속성” 메뉴를 선택하면 등록정보가 표시됩니다. 여기에서 주소 부분을 마우스로 드랙하여 선택한 것을 복사하여 붙여놓으면 됩니다.
밑줄 친 부분이 키 포인트입니다. 앞에서 category_name 다음에 있는 all이 보고 있는 채널이며, page_size 다음의 숫자가 한 페이지에 표시될 목록의 개수, type 다음에 있는 것이 정렬되는 방식입니다.
이렇게 뽑아낸 주소를 iframe에 넣고 담으면 됩니다만, 15줄이나 되기 때문에 너무 깁니다. 그렇기에 이 숫자를 조절하면 높이가 조절됩니다.
블로그에 위젯으로 만들어 넣기
자 이렇게 확보한 주소를 갖고, 블로그에 담아 봐야겠죠? 넣을 때는 iframe을 사용해야 합니다.
<iframe src='[주소]' width='[넓이]' height='[높이]' scrolling='no' allowtransparency='true'></iframe>
주소에는 아까 확보한 주소를 놓습니다. 넓이는 블로그 사이즈에 맞게 조절하시면 됩니다. 그 다음 높이가 중요한데, 이것은 앞서 주소에서 page_size에서 잡은 숫자 x 60을 하면 됩니다.
예를 들어 모든 채널의 인기순으로 5개를 표시하고 싶다면 다음과 같이 넣으면 됩니다.
<iframe src='http://bloggernews.media.daum.net/iframe/list?cls=ch&category_name=all&page_size=5&type=recommend_point' width='340' height='300' scrolling='no' allowtransparency='true'></iframe>
더불어 좀 더 꾸미고 싶다면 style 태그를 써서 꾸미면 되죠.
<iframe src='http://bloggernews.media.daum.net/iframe/list?cls=ch&category_name=all&page_size=5&type=recommend_point' width='340' height='300' scrolling='no' allowtransparency='true' style='border:1px solid #D2D2D2;'></iframe>
스타일을 써서 마음껏 외곽선을 꾸며주면 됩니다. 그 다음엔 블로그의 필요한 위치에 넣으면 끝. 간단하죠?
이글루스 사용자를 위한 팁
그런데, 이글루스의 경우 iframe 태그를 쓸 수 없습니다.
2009/04/16 - 하지 말라면 하고 싶다! 이글루스에서 못 쓰는 HTML 태그 쓰기
<iframe a="<>" src='http://bloggernews.media.daum.net/iframe/list?cls=ch&category_name=all&page_size=5&type=recommend_point' width='340' height='300' scrolling='no' allowtransparency='true' style='border:1px solid #D2D2D2;'></iframe a="<>">
그러나 방법은 다 있지요. 마법의 코드 a="<>"!! 간단하게 iframe을 사용해서 블로거뉴스 위젯을 설치할 수 있답니다.