본문 바로가기

TIP&TECHNICAL

티스토리에서 다음 뷰 온(Daum View On), 내 맘대로 옮기기.

이번 스킨 편집에서, 가장 만족스러운 결과물을 내었던 다음 뷰 온 위치 수정입니다. 티스토리나 이글루스와 같은 설치 가입형 블로그를 하면 기본적인 베이스는 블로거가 수정이 불가능하지요. 뭐, 테터툴즈 기반의 블로그들은 HTML/CSS 수정이 제약적으로나마 가능하지만, 일부 플러그인들은 위치가 고정되어 있어서, 혹은 자리를 플러그인 맘대로 차지해 버리는 문제가 있어서 마음에 안 드는 경우 많지요.


제가 이때까지 다음 뷰 애드와 다음 뷰 온을, 플러그인은 설치해 두고 쓰지 않았던 이유입니다. 다음 뷰 애드는 본문 오른쪽에 자기 맘대로 자리를 차지하고 있고, 다음 뷰 온은 본문 바로 밑부분에 자리를 차지해 두고 있지요. 마찬가지 이유로 믹시도 그렇게 좋아하지 않습니다. 이렇게 자리를 차지하면 위 스크린샷에서 빨간 자리와 같이 저따구가 됩니다.

물론, 믹시의 경우 제한적이긴 하지만 티스토리 내에서 원하는 위치에 달 수 있도록 할 수 있지요. 이게 다 티스토리 블로그 시스템이 생각보다 너무 좋아서 가능한것이더라구요. 이 시스템을 조금만 활용해도 다음 뷰온을 아무 위치에 달 수 있지 않을까, 했지만 관련 지원이 전혀 없었어요. 물론 이리저리 긁어오고 네이버 블로그에서 다음 뷰 온 끌어오는 방법등으로 대충 꾸미면 나타나게 할 순 있지만 저 뷰 온이 가리키는 글이 본문과 달라질 수 밖에 없습니다.(이 부분에 대한 설명은 잠시후에 할게요.)

결국 여러가지 찾아보고 해서 아래 파란 자리와 같이 본문 아래에, 그러니까 다음 뷰 온이 원래 위치할 수 없는 위치에 정상적으로 작동하는 뷰 온을 집어넣을 수 있었습니다. 믹시야 애초에 지원되는거니까 쉽게 같이 넣을 수 있구요.




사실, 이 방법이 제가 완전 고안해낸 방법은 아니고, 어떤 아리따운 미모의 블로거가 고안해낸 방법입니다. 물론 저는 저 블로거와는 아무 관련없습니다. 그저 이거 때문에 3시간동안 인터넷을 뒤지다가 발견하였습니다. 아래 링크는 제가 찾은 그 블로거의 포스팅이고, 사실상 이 포스팅은 저 포스팅의 응용입니다.

http://minisoda.tistory.com/23




사실, 이게 제대로 작동할지 의문이였습니다만, 크게 문제 없이 잘 작동되더라구요. 믹시코드 구성이랑 다음뷰온코드 구성이랑 비교해 가면서, 이미 달려있는 다음뷰온은 어떻게 되었는지 이리저리 뜯다보니 작동되었네요. 어찌됬든, 일단 과정 기니까 생략하고 싶으신 분들을 위해서 제가 미리 코드 올립니다. 조금 수정해주고(주소부분과 사이즈) {}를 []으로 바꿔주신 후, 티스토리 블로그 내에 원하는 위치에 붙혀넣으시면 됩니다.

<!-- 다음뷰온-->
<embed src=http://api.v.daum.net/static/recombox1.swf?nurl='자신의 블로그 주소'/{##_article_rep_id_##} quality="high" bgcolor="#ffffff" width="400" height="91" type="application/x-shockwave-flash" </embed>

<!-- 믹시업-->
<iframe src='http://mixsh.com/widget/new_mixup/loader.html?muid='자신의 믹시 코드'&guid='자신의 블로그 주소'{##_article_rep_id_##}&rdate={##_article_rep_date_##}&rawhtml=&skin=1&showhitcnt='조회수 보고 싶으면 1, 안 보고 싶으면 0'&platform=1' frameBorder='0' scrolling='no' allowTransparency='true' width='402' height='91'></iframe>

자신의 믹시 코드를 알아낼 방법은,,, 뭐 있긴 한데요. 근데 저거 가져가지 마시고 그냥 믹시에서 제공해 주는걸로 가져가는게 속편합니다.

위에 링크 건 포스팅을 읽고 오신 분들은, 차이점 단 하나만 보이실 겁니다. {##_article_rep_id_##} 이 치환자 말입니다. 만약 위의 링크의 포스팅 내용을 그대로 적용하면, 다음 뷰온이 보이긴 하지만 일시적인 시스템 장애라고 에러가 뜹니다. 실제로 저분의 블로그 포스팅 밑부분에도 계속 저 에러가 떠 있습니다.

이 에러가, 서버에서 포스팅을 제대로 수집하지 못하였을때, 그리고 포스팅이 삭제되었을때 나오는 겁니다. 만약 그 글을 다음뷰온으로 제대로 보냈다면 본문에 있는 다음 뷰온은 정상적으로 작동하는데 아래 직접 넣은 다음뷰온은 작동 안되겠지요. 여기서 다음뷰온 플러그인 위젯의 작동방식을 알 수 있는데, 다음뷰온 코드에서 해당 포스팅 주소를 알아내도록 되어 있던 거였죠. 참고로 믹시의 경우, 블로거의 본인확인 코드도 필요하기 때문에 믹시코드도 받고, 글의 시간도 받아가도록 구성되어 있습니다.

그러다면, 161 이놈이 도대체 무엇인가를 알아야지요?, 이부분에 대해서 조금 길게 썼는데 글이 지겨워질것 같은데다가 귀찮기도 하고, 애초에 저는 이쪽으로 전문지식이 전혀 없으 므로 걍 잘 설명되어 있는 티스토리 스킨 가이드의 치환자 부분을 링크 겁니다.

http://www.tistory.com/manual/skin/?_top_tistory=navi_manual_skin&page=4

다만, 저녀석 설명이 댓글의 고유 주소라고 잘못되어 있어서 제가 감히(!?) 정정하면, 글의 고유 주소의 뒷부분입니다. 즉, 제 블로그 같은 경우는 ahblog.tistory.com/*** 에서 *** 부분이겠지요. 즉, HTML 수정할때 저걸 넣으면 *** 으로 바껴서 출력되거나 다른 코드에 입력됩니다. 어찌됬든, 이렇게 해두면 다음뷰온이 현재 열려있는 포스팅이 어떤 포스팅인지 알아낼 수 있겠지요. 그리고 작동이 성공하는 모습을 보실 수 있습니다.

네이버 블로그에 다음뷰온 다는 방법으로도 비슷하게 효과를 볼 수 있지만, 그 방법은 해당 포스팅 하나에 대해서 뷰온 코드를 만드는 방법이라, 어느 포스팅, 어느 블로그, 어느 사이트든지 한가지의 포스팅을 가리킵니다. 만약 그 코드로 스킨 밑에 놔둬본다 생각해 보세요. 다음 뷰온이 제대로 작동하지 않겠지요?

이건 사족이지만, 티스토리를 이용하는 사람들중에 다음뷰온 에 상당히 만족하시는 분들이 많으신데, 그 이유는 글을 다음뷰에 보내기만 하면 코드 생성과 등록, 그리고 바로 위젯형태로의 작동 때문이죠. 네이버에서는 글 보내고, 보낸 글 들어와서 코드 생성, 받은 코드로 다시 글 수정해서 코드를 붙이는 방법, 즉 모든게 수동인 반면에 말이죠. 이런 훌륭한 시스템을 가진 티스토리 + 다은뷰온을 스킨에서 이용하기 위해서 왜 이렇게 어려워야 하는지 이해를 못하겠습니다.



참고로, 이전까지 본문 밑에 있는 뷰온과 믹시업을 이용하신 분들께서 이 팁 적용시 뷰온과 믹시업이 각각 두개씩 나옵니다. 당연하죠. 본문 나오게 한 상태에서 스킨에 한번 더 나오니까요. 별달리 크게 건드릴건 없구요. 아래와 같이 플러그인에서 표시안함 설정 해 주시면 됩니다. 원래, 뷰온의 경우 페이지에 하나만 나오도록 설정되어 있는데 코드를 임의 수정해보니 그 기능이 작동 안하는걸로 보이네요.




어쨌거나 마칩니다. 그리고, 이런 부탁 잘 안하는데,,, 저거 수정해서 만든 김에, 두개다 좀 클릭 부탁드려요~

 

 

 글을 다듬고, 추가할 부분을 추가한 새로운 포스팅을 하였습니다.

2012/06/04 - [TIP/(P)REVIEW] - 다음 뷰 온(Daum View On), 티스토리에서 내가 원하는 위젯을 내 맘대로 옮기기