구글 블로거, 결국 구현한 대화식 댓글 - 코드 수정 방법

구글 Blogger 서비스를 이용하면 답답한 점이 많은데, 특히 한국 사용자들이 젤로 속터져 하던 부분이 댓글달기의 어려움이었습니다.

처음 등장했을 때에는 구글 아이디나 오픈아이디가 없으면 아예 답글을 달지 못하게도 해놨었는데, 이제는 익명이나 다른 방법으로도 달 수도 있습니다. 그런데 그 문제보다 엄청난 불편은 댓글에 댓글을 못다는 것이었지요. 한국 블로거들은 보통 댓글에 댓글을 달아주고 다른 사람들도 댓글을 답니다. 믈론 한국사람들 뿐 아니라 미국 유럽 블로거들도 보통 그런식입니다.

불만도 엄청 많았지요. 지난번에 말한것처럼 미국에서 Blogger는 단순 개인 목적의 블로그뿐 아니라 트랙픽이 엄청나고 그만큼 'Money'와 관련된 블로그들도 많습니다. 그래서 그 사람들의 불만이 장난 아니었지요.

그런데 구글은 몇년이라는 시간동안 콧방귀도 안뀌데요. 이건 기술상으로 구현의 문제는 절대 아닐 겁니다. 당연히 그렇겠지요. 여기 저기 널려있는 그런 대화식 댓글을 그 구글이 못한다는 것은 말이 안되지요. Blogger팀의 철학이었을 수도 있고, 고집이었을 수도 있지요.

어쨌든 오늘 대화식 댓글이 공개되었습니다. 전혀 신기술은 아닙니다. 그런데 속이 다 시원합니다.아래는 구글 버즈에서 공식적으로 발표한 내용.

Google Buzz - Engage with your readers through threaded commenting

내용을 보자면 할일은 없고, 블로그 Feed를 전체 공개하고, 댓글을 Embedded (글 아래 삽입)이라고 나와있네요. (한국어 도움말)

그런데 저렇게 해도 안됩니다. 새로 블로그를 만들면 되는데, 기존의 블로그는 안됩니다. 코드를 뚫어져라 보니 소스가 일부만 업데이트 시켜놓았네요.

코드 수정 방법입니다.

1. 로그인 합니다. 템플릿 메뉴에서 HTML 편집, 반드시 백업.

2. 아래 코드를 찾습니다.
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <b:include data='post' name='comments'/>
</b:if> 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
  <b:include data='post' name='comments'/> 
</b:if>

3. 위 코드를 아래 코드로 대체합니다. 지우고 붙여넣기.
  <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
     <b:if cond='data:post.showThreadedComments'>
        <b:include data='post' name='threaded_comments'/>
     <b:else/>
        <b:include data='post' name='comments'/>
     </b:if>
  </b:if>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <b:if cond='data:post.showThreadedComments'>
         <b:include data='post' name='threaded_comments'/>
      <b:else/>
         <b:include data='post' name='comments'/>
      </b:if>
   </b:if>

4. 경우에 따라서는 (템플릿을 수정해서 쓰시는 분들) 저 코드가 2번 나올수도 있으니 나오는 족족 바꿔넣으십시오.

5. 저장. 끝.

혹시 댓글에 댓글달기 안되면 신고바람.


댓글 18개:

  1. 겨우 님의 글을 찾았습니다 정말도움이되는글인데 찾기가 쉽지않군요.
    님덕분에 빛을 잃어가던저에게 광명을 열어주셨습니다.
    두번정도가 나오는군요 한번만 수정해서는안되는거였군요.덕분에 답글이라는버튼이보이게되었습니다.대단히감사합니다

    답글삭제
  2. 두가지질문입니다.
    1.답글버튼은 만들었는데 익명으로 작성한자가 자신이작성한 댓글을 삭제할수있는 버튼은 어찌만드는지요.
    보통 다른분들보면 답글옆에 삭제버튼이나 휴지통 아이콘이 있던데 말입니다.
    물론 관리자는 삭제가 가능하지만 익명의 사용자는어찌 자신의글을 삭제하는지 궁금합니다.
    2.이주소로들어가시면 제가몇가지질문을 한것이있습니다.안바쁘시다면 이주소로들어가셔서 질문을 보시고 방법을 알려주시면 감사하겟습니다.http://windowsforum.kr/3153383

    답글삭제
    답글
    1. 블로그 관리자가 댓글을 삭제했습니다.

      삭제
    2. 블로그 관리자가 댓글을 삭제했습니다.

      삭제
    3. 1번 질문은 지원을 안하는것인지 저도 그러는줄 몰랐네요^^;;

      2번에서
      1번 날짜가 제대로 안나오는 것은 가져온 템플릿에서 날짜를 자바스크립트로 처리해서 날짜와 월을 따로 떼어오는데 그것이 작동을 안하는군요. 템플릿 수정창에서 var timestamp = "오전 6:37"; 요 부분을 찾으세요. 그러면 그 함수안에 timesplit[2].substr(3,2); 이놈이 있는데 이것을 timesplit[2].substring(3,2); 으로 바꾸세요. 아마 될껍니다.


      2번은 큰 1번하고 같은 것이고

      3번은 템플릿 수정창에서
      .comments .comments-content .comment-thread {
      margin: 8px 0;
      }

      요런 부분이 CSS 정의되있을 겁니다. 저 스타일 안에다가 font-size:12px;요렇게 끼어넣으세요. 원하는 크기로 하시면 되고요. 아래와 같이.

      .comments .comments-content .comment-thread {
      margin: 8px 0;
      font-size:12px;
      }

      끝.

      삭제
    4. 작성자가 댓글을 삭제했습니다.

      삭제
    5. 이항목을 찾았습니다
      var timestamp = &qquot;&qquot;;
      if (timestamp != #39;#39;) {
      var timesplit = timestamp.split(&qquot;,&qquot;);
      var date_yyyy = timesplit[2];
      var date_yy = timesplit[2].substr(3,2);
      var timesplit = timesplit[1].split(&qquot; &qquot;);
      var date_dd = timesplit[2];
      var date_mmm = timesplit[1].substring(0, 3);
      하지만 "오전 6:37"라는부분은 없더군요.그래서 일단 그부분은 무시하고 님이 알려주신데로 수정했습니다.
      그래도 여전히 안됩니다.언디파인드라고만 계속나오는군요.
      제가원하는것은 스샷을 보셔서 아시겠지만 다른것은 안나오고 월하고 날짜만 나오는것이거든요.
      제블로그 http://hoitallica.blogspot.com/ 에 보시면 글제목 오른쪽옆에 언디파인드 언디파인드 라고 영어로 나오는것을 보실수있을겁니다.안되는군요 여전히
      암튼 그래서 일단 언디파인드라는단어가 지저분해서 코드중에서 #39;#39;부분을 아예삭제를 했더니 블로그에 지저분하던 언디파인드라는것은 아예없어지고 빈칸으로남더군요.

      아 방법이없나요..혹시 제가 블로그설정에서 날짜하고 뭔가 관련된 설정을 잘못해서 그런것이아닐까요.
      한마디로 님은 제대로 알려주셨는데 저의블로그 설정자체가안되서 그러는것이아닐찌...ㅠㅠㅠ


      추신-댓글을 다는데 이상하게 코드중에 일부가 삭제가 된채 댓글이달리는군요.그래서 할수없이 님은 잘아실거같아서 코드단어중에 &qquot는 q를 하나더집어넣으니 삭제가안되서 그렇게 한거구요.#39는 원래 #39 맨앞에 &가 뺐습니다.그래야 댓글이 달리네요

      삭제
    6. 그리고
      .comments .comments-content .comment-thread {
      margin: 8px 0;
      }
      부분은 도저히 못찾겠습니다 검색을 해도안되서comments로 검색을 했더니 꽤많이나오는데 어디다가 넣을지모르겠구요.comments-content로감색해도마찬가지고 margin: 8px 0;부분은 아예없고
      어렵네요 css가뭔지모르겠지만 css하고 자바의세계는어렵습니다..ㅠㅠㅠㅠ

      삭제
    7. 먼저 댓글 폰트 크기에 대해서는 아래코드는 분명히 있을겁니다.
      div id='comment-holder'
      이 부분을 찾아서 아래와 같이 바꾸세요
      div id='comment-holder' style='font-size:12px'
      이렇게요. 그러면 바뀝니다. font-size 다음에 원하는 크리고하고요 12px이 제일 적당해 보이네요.

      그리고 시간나오는 부분은 찾은 부분이 맞구요.찾은 부분에서
      var date_yy = timesplit[2].substr(3,2);

      여기요. 이것 마지막 부분에 substr(3,2)를 substring(3,2)로 바꿔보세요. 지금 보니 아직 안바꿔진것 같네요.

      &quot;는 특수문자를 대치하는 것인데, 댓글창에서는 & 글자가 다르게 읽혀서 안되는 것이니 걱정하지 않아도 됩니다.

      삭제
    8. 대단하십니다.일단 댓글폰트 크기는 해결됬습니다 정말 고맙습니다.그러나 월하고 날짜나오게하는것은(시간은 필요없구요)안돼는군요.
      날자하고 월문제는 어느분이 ......블로그가서 화면 소스보기를 했더니
      var timestamp = "";
      부분의 값이 var timestamp = "오전 5:25";식으로 출력된다고
      원하는 포맷으로 출력하시려면 대신 다른 걸 찾아보셔야 할 듯 합니다.라고 하시더군요.
      이런문제도잇나요? 전 이해가잘안가서요..

      아무튼 댓글폰트문제는 해결되서 정말 기쁨니다.감사드립니다

      삭제
    9. 님의정보를 토대로 분명이 잘알려주시는데도 아예안되는게 이상해서 블로그 기본설정에서 시간설정을 바꾸었더니 그제서야 월하고 날자가 나옵니다.제가멍청했습니다..죄송합니다....그리고 정말고맙습니다.그런데 좀약간틀린것은 09일 3월 이렇게나와야하는데 신기하게
      09일 하고 3만나옵니다 월은 3다음에 나오지않고 3밑줄에 월이라고 나오는군요.
      더군다나 10일 3월은 제대로 나옵니다 05일 3월도잘나오구요.지금보면 9일이 문제더군요.
      정리하자면 일단 되긴합니다 다만 09일 3월 아니고 09일 3 하고 월은 3의밑에줄에나오죠.... .그러나 다른요일은 잘나옵니다
      아무튼 정말 많은도움감사드려요.정보를 주심으로 해서 그정보로 수정하고수정하면서 비슷하게되가는것을 보니 기분이 좋고 님에게감사드립니다
      다시한번감사드립니다

      삭제
    10. 해결했습니다.이것도 님이그동안 알려주신것을 토대로 date란 코드를 다찾아서 하나하나바꾸어보니 글자크기가줄어서 월이란 단어가 밀려서 내려가지않는군요.대단히고맙습니다.

      삭제
  3. 이것 때문에 다른 블로그 엔진 고려하는 중이었는데, 정말 감사합니다.

    답글삭제
  4. 작성자가 댓글을 삭제했습니다.

    답글삭제
  5. 템플릿 html 수정에






    이게 없네요 ㅜ 어떻게해야하나요?

    답글삭제
  6. 장난아니네요. 안그래도 DISQUS로 갈아타야 하나 했는데...
    템플릿에 따라서 옵션에서 댓글비허용으로 했는데도 가젯이다보니...DISQUS는 그대로
    계속 나오더라구요. 번거로워서 찾던 중에...정말 많이 도움이 되었습니다. 감사합니다.

    답글삭제
  7. 안녕하세요 ~ 글을 잘 보고 하나씩 따라하고 있습니다 ~
    그런데 제가 지금 사용하는 템플렛에는 2번 코드가 없어요 ~ㅜㅜ
    이글을 찾는 이유 중 하나가 댓글 달아도 보이지가 않아요 .(삽입형식일때 안보임)
    팝업 형식일때는 보이긴하지만 댓글을 팝업으로 보기엔 불편하잖아요...

    문제는 지금 HTML에 2번 소스코드중 맨위

    코드를 복사해서 검색해서 찾았습니다. 하나밖에 없는데 바로 밑에는 박스안에
    코드들이 하나도 없네요 .. 그래서 밑에 3번을 복사해서 밑에 붙여넣었지만
    그래도 댓글이 안보이네요...

    일단 제 문제는 댓글 달면 보이게 하는게 우선인거 같네요 ~
    도와주십시요`~~

    답글삭제