디스커스(Disqus)에 댓글 숫자를 달아주자
몽리 블로그에서 페이스북 댓글 플러그인을 제거하고 소셜(SNS) 댓글 서비스 디스커스(Disqus)로 바꾸어 달았습니다. 스킨에 디스커스(Disqus) 댓글을 장착하고 보니 약간 뚱뚱하더군요. 페이스북 댓글과 티스토리 댓글을 합친 정도로 말이죠. 그래서 다이어트를 시켜주기 위해 탭 방식으로 구현하였습니다.
사실 멋드러진 탭 버튼을 직접 만들어 블로그 스킨에 적용하려 했었는데요. 그런데 이게 너무 귀찮더라고요. 내가 이 나이에도 스킨 귀퉁이 만지작 해야 하나 싶고, 탭 버튼 만들 시간이면 게임 한 판을 더 할 수 있는데 싶고 말이죠. 그래서 구글신께 여쭤보았더니 이런 너무 감사하게도 고마우신 분께서 이미 CSS 탭을 구현하셨고 소스까지 공유해 주셨더군요.
티스토리 댓글과 디스커스(Disqus) 댓글을 탭으로 구현하고 싶으신 분들은 뭐하라 블로거님의 '티스토리 댓글 탭으로 보기 - CSS만으로! 업데이트' 글을 참고하시고 멋지게 꾸며 주시면 되겠습니다. 친절하게 소스까지 몽창 다 올려 주셨으니 천천히 잘 따라 하시면 될 것이네요. '블로그 속도 개선- Disqus탭 클릭했을 때 로딩되게 하기' 글도 참고하시고요. 뭐하라 블로거님의 블로그에는 구글 애드센스 관련된 고퀄팁이 많습니다. 이에 즐겨찾기 해두고 공유해주신 고퀄팁을 자신의 뇌로 흡수하시길 권장드립니다. 제 뇌는 한계가 있어 아직 다 흡수하지 못했지만 즐겨찾기 해놓고 틈틈히 흡수해주고 있네요.
참고로 CSS 탭의 색상 및 크기 등은 원하는 대로 변경 하시면 됩니다. 너무 감사하게도 codepen에 결과물을 올려 두셨으니 https://codepen.io/nubiz/pen/vcAkm 페이지에서 직접 색상 등을 변경해보고 마음에 드는 형태로 CSS에 적용 하시면 되겠습니다.
저는 뭐하라님께서 다 차려 놓은 밥상에 밥 주걱 얹어 보았습니다. CSS 탭에 댓글 숫자가 표시될 수 있도록 엄청난 수고를 하여 소스를 추가해 주었습니다. 제가 추가한 것은 딱 3줄이지만 고급 마우스로 복사 붙여 넣기 하였기에 고퀄 소스라고 볼 수 있습니다. 응? html 그러니까 뭐하라님 소스에 2줄 그리고 CSS에 1줄 추가해 주면 CSS 탭에 각각의 댓글 숫자가 표시 됩니다.
마크쿼리 스킨에 있던 소스 그대로 옮겨 넣은 것이니 마크쿼리 스킨 사용하신다면 그대로 추가해주면 될 것이네요. 다른 스킨에도 뭐 문제 생길 껀덕지는 없으니 그대로 적용하셔도 될 것 같습니다. 혹시 모르니 반드시 스킨 백업 후 작업 하시기 바랍니다.
티스토리와 디스커스(Disqus) 댓글 숫자 표시 방법은 아래와 같습니다. 뭐하라님 소스에 파란색 부분을 추가해주면 됩니다. 그리고 CSS 하단에 빨간색 한 줄 넣어 주면 끝나네요.
<div class="labels">
<label id="tab1L" for="tab1">SNS 댓글 <a href="http://블로그주소/entry/%EB%94%94%EC%8A%A4%EC%BB%A4%EC%8A%A4Disqus-%EB%8C%93%EA%B8%80-%EC%88%AB%EC%9E%90-%ED%91%9C%EC%8B%9C-%EB%B0%A9%EB%B2%95#disqus_thread"></a></label>
<label id="tab2L" for="tab2">티스토리 댓글 <span style="display:inline" class="cnt">0</span></label>
</div>
몽리 블로그는 우클릭 및 복사가 막혀 있으니 아래 '댓글 숫자 표시 소스'를 이용하여 복사하시면 되겠습니다.
댓글 숫자 표시 소스
잘 모르시는 분들을 위해 추가로 설명드리자면, 티스토리 관리페이지에서 HTML/CSS 편집으로 들어가 Ctrl + F 키를 누른 후 tab1L로 검색하면 해당 소스 위치를 빠르게 찾아 갈 수 있습니다. <label id="tab1L" for="tab1">댓글 뒤쪽에 <a href="http://블로그주소/entry/%EB%94%94%EC%8A%A4%EC%BB%A4%EC%8A%A4Disqus-%EB%8C%93%EA%B8%80-%EC%88%AB%EC%9E%90-%ED%91%9C%EC%8B%9C-%EB%B0%A9%EB%B2%95#disqus_thread"></a>를 추가해 주면 됩니다. 블로그주소 부분은 본인의 블로그 주소로 변경하셔야 하고요. 예시 <a href="http://mongri.net/entry/%EB%94%94%EC%8A%A4%EC%BB%A4%EC%8A%A4Disqus-%EB%8C%93%EA%B8%80-%EC%88%AB%EC%9E%90-%ED%91%9C%EC%8B%9C-%EB%B0%A9%EB%B2%95#disqus_thread"></a>
<label id="tab2L" for="tab2">댓글 뒤쪽에는 <span style="display:inline" class="cnt">0</span>를 추가해 주면 되고요.
CSS 탭으로 이동하여 마지막 줄 아래에 #tab2L {white-space:nowrap;}를 추가해 주고 일단 저장 버튼 클릭합니다.
스킨에 소스를 추가한 후에는 디스커스(Disqus) 댓글 소스 위치로 이동합니다. 이동한 후 위와 같은 부분을 찾습니다.
var disqus_config = function () { 윗 줄과 page's unique identifier variable }; 아랫 줄에 /* */ 요렇게 생긴 것들이 있을 겁니다. 주석이라고 하는 것인데요
두 개의 주석을 제거하면 중간의 소스 색상이 변경될 것입니다. 저장 버튼을 클릭하여 변경된 내용을 스킨에 적용 시켜줍니다. 이후부터는 탭에 댓글 숫자가 표시됩니다. 디스커스(Disqus) 댓글 숫자는 즉시 반영되지 않고 약간의 시간이 필요 합니다.
참고로 주석은 소스 설명 혹은 메모 용도로 사용합니다. 단 줄 주석은 //, 복수 줄 주석은 /* */이고요. C, C++, 자바스크립트, CSS 등에서 사용 가능합니다. html 주석은 <!-- -->입니다.
디스커스(Disqus) 댓글과 티스토리 댓글을 탭으로 구현하면 그리고 댓글 숫자가 표시되게 해주면 위와 같은 형태로 됩니다. 여기까지 완료하셨다면 블로거들을 위한 디스커스(Disqus) 가입부터 활용까지 중간 종착지에 도착하신 겁니다. 참고로 디스커스(Disqus) 댓글 숫자 표기 방식은 설정에서 변경할 수 있습니다. '소셜(SNS) 댓글 서비스, 디스커스(Disqus) 설정 방법' 글에 설명해 두었으니 참고하시고 설정을 변경하시면 되겠습니다. 끝~
