트위터 버튼 때문에 페이지 오류가 발생한다면

트위터(Twitter) 공식 버튼인데 페이지 오류?!

 오랜만에 블로그 관련 팁을 다루네요. 최근 블로그 스킨을 변경하면서 예전 스킨에서 사용하던 SNS 추천 버튼을 정리하고 새로 정렬하는 등 수정 작업을 하고 있는데요. 스킨 수정 작업을 하면서 각종 브라우저에서 이상 유무를 확인하다보니 익스플로러(IE) 상태표시줄에서 "페이지 오류" 를 뿜어내고 있더군요. 다른 때도 아니고 스킨 작업하는데 에러니 뭐니 하면서 표시되면 괜시리 더 짜증이 나죠?! ^^;;
 그래서 뭔가 싶어 내용을 살펴보니 공식적으로 트위터에서 제공하는 리트윗(RT) 버튼이 문제였습니다. 그냥 떼어버리고 다른 버튼으로 대체할까 하다고 개인적으로 해당 버튼이 가장 마음에 드는지라...

 역시 필요하면 어떻게든 방법을 찾아내게 되더군요 ^^ 그래서 혹시 같은 문제로 페이지 오류가 발생하는 분들에게 도움이 될까 싶어 포스팅을 합니다.

트위터 버튼, 페이지 오류 수정하기

 참고로 위 이미지에서 표시한 트위터 RT 버튼을 블로그 등에 달았다고 무조건 IE 에서 페이지 오류가 발생하진 않습니다. 또한, 페이지 오류가 표시된다고 무조건 트위터 버튼이 문제인 것도 아니구요.

▼ 상태표시줄에서 "페이지에 오류가 있습니다" 문구를 더블클릭하면 어떤 부분에서 문제가 발생하는지 확인할 수 있으니 오류가 발생한다면 확인 후 대처하시면 되겠네요.

 다시 본론으로 돌아와서... 예상은 했지만 확인을 해보니 역시나 자바스크립트(.js)가 문제더군요. 만약 위와 같이 문제가 발생한다면 아래 소스로 버튼을 추가하시면 문제가 해결됩니다.

> 소스 참고 : http://dev.twitter.com/pages/tweet_button

<iframe frameborder="0" scrolling="no" class="twitter-share-button twitter-count-vertical" src="http://platform.twitter.com/widgets/tweet_button.html?_=&amp;count=vertical&amp;lang=ko&amp;url=liverex.tistory.com[샾샾_article_rep_link_샾샾]&amp;via=LiveREX&amp;text=RT [샾샾_page_title_샾샾] liverex.tistory.com[샾샾_article_rep_link_샾샾]" style="width:55px; height:62px;"></iframe>

 빨간색 부분만 자신에게 맞춰서 변경해 주시면 됩니다. 참고로 URL 부분은 자신의 블로그나 홈페이지를, LiveREX 라고 적힌 부분은 자신의 트위터 계정명을 입력하세요. 또한, 노란색 부분에 '샾' 이라고 한글로 적은 부분은 # 로 변경해서 추가하세요.

▼ 위 소스를 이용해서 트위터 RT 버튼을 추가하면 페이지 오류가 표시되지 않는 것을 확인할 수 있습니다.

 그런데, 트위터 공식버튼이 현재 제 블로그에 추가되어 있는 형태 외에도 2가지가 더 있죠? 만약 Horizontal count 를 이용하시는 분이라면...

▼ 위에서 링크 걸어 놓은 "소스 참고" 사이트에 있는 소스를 기반으로 추가할 부분은 추가하면서 활용하시면 됩니다.

 몇 개월만에 스킨 수정 작업을 하다보니 새로운 것들도 많이 보이고 활용하고 싶은 것들도 상당히 많네요. 왠지 블로그 소스 관련해서 포스팅을 몇개 더 할 것 같은 느낌이 ^^

 이제 트위터 RT 버튼으로 인해 페이지 오류가 발생한다면 위 소스를 이용해서 해결해 보세요. 이 포스팅은 여기까지 입니다.