웹표준(XHTML) 에러 없는 다음뷰 추천 버튼 추가하기

 이달 초에 IE 에서 티스토리 포스팅을 할 경우, 본문에 포함된 특정 태그가 유효성 검사에서 에러 및 경고로 표시된다는 내용을 다룬 바 있습니다.

> 참고 : 웹표준(XHTML)을 지키지 않는 IE8 - LiveREX

 그러면서 말씀드린 것이... 유효성 검사에서 에러 및 경고로 표시되지만 사용자가 직접 태그를 수정할 수 없는 몇몇 내용이 있다고 소개를 하면서, 그 중에 다음뷰 추천 버튼 위젯이 있다고 말씀드린거 기억하시나요?

▲ 다음뷰 추천 위젯 모습

 티스토리에서는 플러그인을 통해 위와 같은 다음뷰 추천 버튼을 본문 하단에 추가할 수 있는데 EMBED 태그를 사용하여 웹표준 검사를 하면 에러가 표시됩니다. 얼추 보니 이 위젯 소스 자체에서 7개 정도의 에러를 표시하더군요. 참고로 EMBED 태그는 OBJECT 태그로 묶어서 사용해야 유효성 검사에서 에러가 나오지 않습니다.

그래서 사실 다음측에 관련 해서 소스를 제공하거나 수정할 것인지 여부를 묻는 메일을 보냈는데... 확인 중이라는 답변만 오고 그 이후로 2주 넘도록 답이 없네요.

 사실 이런데 크게 의미를 부여하지 않는 분이라면 상관 없을 수 있겠지만 사람 마음이라는게 에러가 표시되면 찝찝하고, 어떻게든 권장사항이라는 걸 지키고 싶잖아요? ^^;; 그래서 그냥 제가 소스를 변경해 봤습니다. 변경하여 적용한지는 1주일 조금 넘었는데 익스플로러(IE), 파이어폭스(Firefox), 크롬(Chrome)에서 전혀 이상없이 사용 가능합니다.

웹표준(XHTML)에 맞는 다음뷰 추천 버튼 소스

 위에서도 말씀드렸지만 OBJECT 태그를 사용하면 괜찮다는 건 알고 있었는데 수정하다보니 파폭에서는 작동하는데 IE 에서는 안되고, 혹은 그 반대이거나 등의 상황이 발생하더군요. 그러다가 문득 네이트의 블로그독 추천 위젯 소스를 보고 착안해서 수정을 하니 웹브라우저에 따른 문제없이 제대로 작동했습니다. 하지만 그대로 사용하기에는 소스가 너무 길어서 확~ 줄일 수 있는 팁을 찾다가 발견. 그리고는 다시 손봐서 최종적으로 아래 소스를...

 

Daum View 버튼.txt

▼ 텍스트 파일에 포함된 소스 내용입니다. 노랗게 표시한 부분을 자신의 블로그 주소로 변경하시면 됩니다.

[참고] 위 이미지 혹은 텍스트 파일을 잘 보시면 recombox3 이라고 표시되어 있죠? 왠만하면 다들 아시겠지만 다음뷰 추천 버튼 위젯은 이 recombox 뒤에 붙는 숫자가  1 ~ 3 까지 있습니다. 3 은 제 블로그에 추가되어 있는것처럼 버튼만 있는 거구요. 1 은 위에서 제가 예시로 첨부한 위젯 이미지입니다. 2 는 1 보다 조금 작은 사이즈구요. 만약 다음뷰 추천 위젯 소스를 변경해서 추가하실 경우 그 형태를 원하는 것으로 변경하고 싶다면 1, 2, 3 으로 수정하고 width 와 height 의 수치를 아래 내용을 보고 변경해 주시면 됩니다.

[다음뷰 추천 위젯별 크기]
recombox1 - width : 400, height : 80
recombox2 - width : 400, height : 58
recombox3 - width : 67, height : 80

▼ 위 소스를 스킨에 추가하셨다면 관리자모드의 플러그인 메뉴에서 Daum View 의 view on 박스 설정을 [표시하지 않음]으로 변경하여 저장하고 사용하시면 됩니다. 안그럼 본문에 추천 위젯이 2개 표시되니까 주의하세요.

▼ 제 블로그의 경우 상단의 참고글을 보시면 아시겠지만, 이전까지 10여개의 에러가 고정적으로 표시되었었는데요. 지금은 이렇게 수정한 후 2개의 에러만 표시됩니다. 뭐가 문제인지 알면서도 수정하지 못하는 이 찝찝함 ^^;;;

 자신의 블로그 혹은 홈페에지가 웹표준(XHTML) 유효성 검사에서 몇개의 에러를 포함하고 있는지 확인하고 싶은 분들은 아래 링크를 이용하시면 됩니다.

> 웹표준(XHTML) 유효성 검사 : http://validator.kldp.org/

 웹표준에 대한 관심도도 그렇고 태그를 직접 수정한다하면 막연하게 어렵다고 느껴서 포기하는 분들이 많다보니... 많은 분들이 변경하진 않으실 듯 하네요. 그래도 웹표준에 관심갖고 블로그 관리에 임하는(?) 분들을 위해 소개 했습니다 ^^

[추가] 혹시 블로그 글 주소를 숫자 형식이 아닌 문자 형식으로 사용하시는 분들은 아래 소스를 적용하시면 됩니다. 참고로 숫자 형식이더라도 아래 소스를 사용하셔도 되니 무슨 의미인지 잘 모르겠다는 분들은 아래 소스를 변경해서 사용하세요~ ^^

<object type="application/x-shockwave-flash" data="http://api.v.daum.net/static/recombox3.swf?nurl=http://liverex.tistory.com[샾샾_article_rep_link_샾샾]" width="67" height="80">
<param name="movie" value="http://api.v.daum.net/static/recombox3.swf?nurl=http://liverex.tistory.com[샾샾_article_rep_link_샾샾]" /></object>

※ 제 블로그 주소로 표시된 부분은 자신의 블로그 주소로, 샾샾은 ## 으로 변경하시면 됩니다!