티스토리 블로거라면 필수적으로 사용하시는 것중 하나가 다음뷰 일겁니다. 제가 네이버 블로그를 쓸데만해도 글 하나 발행할때마다 다음뷰 홈페이지에 가서 위젯을 퍼오는 과정이 너무 귀찮았는데요, 티스토리는 다음이 관리를 하고 있다보니 다음뷰와의 연동이 아주 잘 되어있습니다. 글의 발행/송고나 이벤트 참여도 클릭 한번으로 가능하며 아주 편리합니다.
가장 큰 장점으로는 다음뷰 추천 위젯을 스킨에 네이티브로 심을 수 있다는 것입니다. 물론 html을 잘 모르시는 분들을 위해서 티스토리에서는 다음 뷰 추천 위젯 플러그인을 제공하고 있습니다. 그래서 이것을 활용하시면 게시글 하단에 별 다른 설정 없이도 추천 위젯을 달 수 있습니다.
그러나 티스토리를 좀 오래 사용하시다 보면 남들 처럼 둥둥떠다니는 호버 버튼도 달아보고 싶고, 글 상단이나 하단등 어디든지 넣어보고 싶으실 겁니다. 사실 다음뷰의 게시글 별 코드에서는 지원하지 않는 기능이지만, 티스토리 플러그인에서 지원하는 코드를 활용하면 어디든지 설치가 가능한 다음 뷰 추천 위젯을 만들 수 있습니다.
<iframe width="100%" height="90" src="http://api.v.daum.net/widget1?nid=53665740" frameborder="no" scrolling="no" allowtransparency="true"></iframe>
기본적으로 다음뷰에서 제공하는 위젯 코드는 이렇게 생겼습니다. 게시글 별로 ID가 부여되어있는데요, 이런 방식은 어디든지 달 수 있다는 장점이 있으나, 게시글을 발행했을때 그 게시글에 맞춰서 위젯이 뜨지 않는다는 단점이 있습니다.
<iframe width="100%" height="90" src="http://api.v.daum.net/widget1?nurl=http://est0que.tistory.com/[ ##_article_rep_id_## ]" frameborder="no" scrolling="no" allowtransparency="true"></iframe>
이것은 플러그인에서 지원하는 코드의 모습인데, 보시다시피 id가 아니라 url로 끌어오고 있습니다. 예제에는 제 블로그 주소가 기제되어있으나, 자신의 티스토리 블로그 주소로 바꾸면 어디든지 달 수 있는 다음뷰 위젯이 됩니다. 더불어 여기에 class를 부여하면, 내용물은 iframe이기 때문에 수정할 수는 없으나, 테두리나 그림자 같은 아주 기본적인 스타일은 지정해줄 수 있습니다.
이제 위젯 스타일을 바꿔보도록 하겠습니다. 다음뷰는 총 4가지 위젯 스타일을 제공합니다. 박스/버튼/일반/미니로 4가지 구성이 되어있습니다. 위젯의 스타일은 주소에서 /widget1? 이라는 부분이 관할을 하며, 이 부분은 id로 인식하는 위젯이나 url로 인식하는 위젯에도 마찬가지로 적용 됩니다. 숫자는 1에서 4까지 쓸 수 있으며 각각의 숫자에 따라 위젯의 스타일이 바뀝니다.
<iframe width="100%" height="90" src="http://api.v.daum.net/widget1?nid=53665740" frameborder="no" scrolling="no" allowtransparency="true"></iframe>
기본타입 = 1
<iframe width="100%" height="90" src="http://api.v.daum.net/widget2?nid=53665740" frameborder="no" scrolling="no" allowtransparency="true"></iframe>
버튼타입 = 2
<iframe width="100%" height="90" src="http://api.v.daum.net/widget3?nid=53665740" frameborder="no" scrolling="no" allowtransparency="true"></iframe>
일반타입 = 3
<iframe width="100%" height="90" src="http://api.v.daum.net/widget4?nid=53665740" frameborder="no" scrolling="no" allowtransparency="true"></iframe>
미니타입 = 4
기본적인 코드 구성은 다음과 같습니다.
<iframe width="100%" height="90" src="http://api.v.daum.net/widget[위젯스타일 1~4]?nurl=http://[티스토리주소].tistory.com/[ ##_article_rep_id_## ]" frameborder="no" scrolling="no" allowtransparency="true"></iframe>
