Disqus 댓글 API 를 워드프레스에서 구현하는 방법

[ 이글은 2017년 07월 09일에 최종 수정되었습니다. ]
§

[Korbuddy 님을 위해 작성하는 글이기도 하고 Disqus 댓글을 워드프레스 사이트에 접목하는데 어려움을 겪는 분들을 위해 작성하는 글이기도 합니다.]

disqus

워드프레스에서 Disqus 댓글 API 를 사용하는 방법은 매우 간단합니다.

20만개도 넘는 사이트들이 사용하는 Disqus 공식 플러그인을 설치하면 됩니다.

Disqus Comment System 플러그인

99.99% 의 경우, 아무런 문제없이 잘 작동합니다. 하지만, 아주 간혹/정말 정말 드물게 Korbuddy 님 처럼 이해하기 힘든 자잘한 오류가 생기는 경우가 있습니다.

이런경우, Disqus API 를 직접 끌어다 쓸수 있는 방법이 있습니다.

오늘도 Hueman 테마를 기준으로 설명드립니다.

며칠전 Hueman child 테마를 만들때 style.css 와 functions.php 파일을 만들었습니다.

functions.php 파일을 열어봅시다.

그리고 아래 내용의 function 을 작성합니다. ctrl + c, v 합니다.

function disqus_embed($disqus_shortname) {
    global $post;
    wp_enqueue_script('disqus_embed','http://'.$disqus_shortname.'.disqus.com/embed.js');
    echo '<div id="disqus_thread"></div>
    <script type="text/javascript">
        var disqus_shortname = "'.$disqus_shortname.'";
        var disqus_title = "'.$post->post_title.'";
        var disqus_url = "'.get_permalink($post->ID).'";
        var disqus_identifier = "'.$disqus_shortname.'-'.$post->ID.'";
    </script>';
}

이런 모습이 되겠죠?

disqus_function

이제 본 테마에 있는 single.php 파일을 한벌 복사해서 이걸 child 테마 폴더에 넣어서 저장해 줍니다.

그리고 이 child 테마에 저장된 single.php 파일을 열어줍니다.

49번째 줄에 보시면

<?php comments_template('/comments.php',true); ?>

라고 써 있는게 보이실 겁니다.

일단 이 함수를 주석처리 합니다. 이렇게.

<?php //comments_template('/comments.php',true); ?>

그후, 바로 아래 disqus function 에 대한 handle 을 이렇게 넣어 줍니다.

<?php disqus_embed('hackyacomkr'); ?>

여기서 ‘hackyacomkr’ 은 제 한국어 disqus 계정 shortname 이고 본인의 disqus 계정 shortname 으로 바꿔주세요.

이런 모습이 되겠죠?

disqus_single

끝.

이제 Disqus 댓글이 잘 로딩 되는지 확인해 봅시다.

네. 잘 뜹니다.

disqus_result

뽀너스 하나.

댓글창은 각 글에 잘 달리는데, Disqus 에 최적화된 최신댓글을 보여주려면 어떻게 해야 하나요?

네. 맞습니다. 최신댓글 플러그인을 쓰시면 됩니다. 찾아보시면 몇개 나옵니다.

이런것도 있고.. https://wordpress.org/plugins/disqus-recent-comments-widget/

그중 맘에 드시는거 하나 쓰시면 됩니다.

그렇지만 이런 것 까지 플러그인을 쓰면 관리자 페이지가 너무 지저분해지죠.

자스 (javascript) 한줄 만 넣으면 최신 댓글이 보여지는 방법을 이제 알려드립니다.

위젯 페이지로 갑니다.

일단 워드프레스 최신 댓글 위젯을 삭제합니다.

delete_default_widget

그후 text 위젯 (text widget) 을 마우스로 잡아서 위로 쭉쭉 끌어다가 sidebar 에 집어 넣습니다.

text_widget

그리고 아래 자스를 ctrl+c,v 해서 붙여 넣습니다.

<script type="text/javascript" src="http://hackyacomkr.disqus.com/recent_comments_widget.js?num_items=5&hide_avatars=0&avatar_size=40&excerpt_length=70"></script>

이렇게.

insert_js

“Save”/저장하기 버튼을 누르시면 끝.

이 작업 하시는데 대략 5분정도 걸리실겁니다. 어려운 작업 아닙니다. 100% Disqus 가 제공하는 API 를 자스 (javascript) 로만 끌어다 구현하는 방식이기 때문에, 워드프레스 설정이나 다른 플러그인 문제로 Disqus 가 오작동할 가능성이 없는 확실한 방법입니다.

avatar_size 는 글 작성자 avatar 크기
items 는 보여주고 싶은 댓글 숫자
excerpt_length 는 요약글 길이

맘에 드시는 수치로 변경하셔서 쓰시면 됩니다.

끝.

하라는 회사일은 안하고 튜토리얼 글이나 쓰고 있고 잘하는 짓이다. ㅠㅠㅠㅠ

마지막으로 Disqus 댓글 다실때, 이미지 첨부, 유튜브 동영상 첨부, 하다못해 예제 코드 까지 (php, js, css, SQL 등등 표시 안되는게 없습니다), 모두다 표기 됩니다.

여러 html 태그들도 사용할 수 있습니다.

https://help.disqus.com/customer/portal/articles/466253-what-html-tags-are-allowed-within-comments-

이모티콘도 넣을 수 있습니다. (html 이모티콘 코드를 그냥 넣으시면 됩니다.)

트위터 링크 같은걸 넣으면 트위터가 표시되기도 하고, 이외에 저도 모르는 기능들이 많을 겁니다. 그 어느 게시판 솔루션 보다도 더 풍부한 기능을 갖고 있습니다.

간략한 개별 게시판도 생성할 수 있습니다. 예를 들자면 쇼핑몰 사이트 구축할때 한국 개발자 분들은 무조건 K보드 같은 게시판 플러그인들을 사용하시거든요.

각 호스팅에서/클라우드에서 별의별 오류가 발생하는 것 말고도 이 K보드가 엄청나게 무겁습니다. 우커머스 보다 더 무겁습니다. P3 profiler 돌려보시면 기절할 겁니다. 별 기능도 없는 주제에 여기에 별도의 DB 까지 생성을 합니다. 사이트 이전하게 되면 극혐이죠. 개인적으로 여러모로 기피해야 할 플러그인 이라 생각합니다. 물론 상황에 따라서 요긴하게 쓰여질 수도 있겠죠.

다시 쇼핑몰 예로 돌아가서, 상품리뷰, 상품발송, 이런 기능 때문에 게시판을 쓰곤 하는데, (뭐랄까요, 한국개발자들 고유의 게시판-centric 한 사고?) 이게 사용자 입장에서 무지 혼동스럽고 UX 측면에서 보면 절대 피해야 하는 구축 방식 입니다.

모든 통지를 하나의 게시판에 몰아넣고 보여주는건데, 이러면 매우 혼동스럽습니다. 상품리뷰 같은것도, 각 상품에 리뷰글이 달려야지, 이게 동떨어져 있는 게시판에 글이 달리면 이게 뭔 황당한 상황?

위 튜토리얼에서 보여드렸듯이 Disqus 댓글창을 쉽게 각 상품에 달아줄 수 있고, 댓글이 달려야 하는 어느 페이지/ 요소에도 쉽게 달아 줄수 있기 때문에, Disqus 가 훨씬 더 좋은 선택입니다. 더 versatile 한 솔루션 인겁니다.

그리고 가장 큰 장점. 이 Disqus 댓글 기능을 보여주기 위해, 제 서버는 아무런 일도 하지 않는다는점!!! 뭐하러 필요도 없이 내 서버를 힘들게 하나요?

사이트 로딩속도도 개선되고, 내 서버 resource 도 줄일 수 있고. 대략 1석4조 정도 됩니다.

*간혹 미국 웹개발 관련 게시판이나 stackoverflow 같은데도 보면 Disqus 때문에 사이트 로딩이 늦어져서 못쓰겠다는 글이 올라오는데, 그럴때 쓰라고 비동기식 로딩 기법이 있는겁니다.

Tags: , , ,

카테고리: ,

Ω
  • http://korbuddy.com korbuddy.com

    메튜님두 그렇고 워드크레커님두 그렇구 disqus에 대해 많은 포스팅을 하시는 것 같습니다 ㅠ

    또 한번 게스트 글 작성 승인과 싸워봐야 할 때인것 같습니다!!

    잘 읽구 갑니다~ 항상 좋은 포스팅 감사합니다 ㅎㅎ

    • http://hackya.com Matthew

      한글표현 어떻게 해야 하는지 좀 알려주고 가시지… ㅠㅠㅠㅠ

      “엽니다” 오픈해라 라고 쓰고 싶은데, 이게 맞게 쓴건지. 열다 -> 엽니다?

      “asynchronously 로딩하세요.” 라고 쓰고 싶은데, “이걸 비동기 로딩하세요.” 라고 쓰면 되는건지, 좀 알려주고 가시지, 매정하게 그냥 가시나요? ㅠㅠㅠㅠ

      • http://www.thewordcracker.com/ WordCracker

        열다. 실행하다, 오픈하다… 개인적으로는 아무 표현이라도 괜찮을 듯합니다. 정식으로 작성하는 글(Formal한 글)이라면 영문 표현을 Transliterate하는 것은 바람직하지 않지만 이런 블로그에서는 별 문제가 없을 듯합니다.

        • http://hackya.com Matthew

          네… 한글표현을 잘하고 싶은 거죠. 한글을 잘쓰고 싶은 욕심? 열정? 그런게 좀 있습니다. (띄어쓰기, 받침, 이런 것도 잘했으면 하고. ㅎㅎㅎ)

          • http://www.thewordcracker.com/ WordCracker

            다음 글을 한 번 참고해보시기 바랍니다. 아마 조금은 도움이 될 것입니다.
            http://www.thewordcracker.com/scribblings/korean-grammar-korean-translators-should-know/

            어떤 번역가분이 정리한 것인데 제가 인용했습니다. (그런데 그 분이 원래 글을 삭제해버렸습니다… ㅎㅎ)

          • http://hackya.com Matthew

            자립어는 띄어 쓰고 부속어…. 일단 이 부분 부터 제가가 전혀 이해 못하는…

            자립어란 명사, 대명사, 수사, 동사와 같이 혼자서도 제 구실을 하는 낱말이며 – 이게 뭔소리?

            누가 이거 영어로 번역해 주기전에는 저는 전혀 이해 못하고…

            부속어는 혼자서는 제 구실을 하지 못하는 문장 요소이다. – fragment 라는 소리 같은데, 그걸 제가 어떻게 identify 해야 하는지 알수가 없고….

            그런데 부속어는 토씨(조사), 접두사/접미사, 어미밖에 없다.

            따라서 조사(부터, 까지, 은, 는, 이, 가, 을, 를, 와, 과 등)와 접두사(‘새빨갛다’의 ‘새’ 등)/접미사(‘농사꾼’의 ‘꾼’ 등) 및 어미(~하니, ~하고, ~는지 등) 외에는 모두 띄어 쓴다고 생각하면 된다.

            여기서 부터 그냥 멘붕와서 제 뇌가 shutdown 됩니다. ㅋㅋㅋㅋㅋ

            연결형 어미이므로

            저는 한글을 디시 (디시인사이드) 에서 배웠습니다.

            그래서 통상적인 단어들 말고 이런 단어들이나 설명글을 전혀 이해를 못하겠네요.

            그냥 포기해야 할듯요. OTL

          • http://www.thewordcracker.com/ Word

            죄송합니다.
            내용을 다시 살펴보니 조금 전문적이네요.

            맞춤법, 띄어쓰기의 경우 저는 http://speller.cs.pusan.ac.kr/PnuSpellerISAPI_201602/ 페이지를 주로 이용합니다.
            글을 작성한 후에, 문단별로 복사하여 붙여넣기(Copy & Paste)하여 이용하시면 도움이 될 것입니다.

          • http://www.thewordcracker.com/ Word

            어제 제가 쓴 댓글이 사라졌네요.

            위의 링크 내용이 약간 어려운 것 같습니다.

            MS Word의 맞춤법 검사기를 사용해도 되고요, http://speller.cs.pusan.ac.kr/PnuSpellerISAPI_201602/ 페이지의 맞춤법 검사기를 사용하면 상세하게 알려줍니다. (일부 문법적인 용어가 있을 수 있습니다.)

  • http://korbuddy.com korbuddy.com

    저는 지금 다시 열심히 Disqus랑 씨름하는 중입니다^^

    #1 문맥상 “열어줍니다”로 적으시면 자연스러울것 같긴 하지만(개인적인 생각입니다ㅎ) 엽니다 역시 틀린 표현이 아니니 신경 쓰지 않으셔도 될것 같아요.

    #2 “비동기식 로딩기법” 으로 사용하시면 될 것 같아요 ㅎㅎ 워드크레커님 블로그에서 보신 다른 대체단어는 저두 잘 모르겠네요 ㅠ

    • http://hackya.com Matthew

      두곳 다 수정했습니다. 감사합니다. ㅎㅎㅎ

      로그인 공격에 대응하는 로그인 하고 Disqus 설치 된 Hueman child 테마 필요하시면 알려주세요. 이번 주말에 튜토리얼 작성하고 나서 보내드릴께요.

      제 이메일 주소는 footer 에 보시면 ↓↓↓↓ 나와 있습니다.

  • http://www.thewordcracker.com/ WordCracker

    좋은 글 감사합니다.

    자바스크립트로 (텍스트 위젯에 복사하여) 최신글 위젯을 만들어 사용해보니 최신글 목록이 잘 표시되지만 새로운 댓글이 달려도 업데이트가 잘 안 되네요. 실제 댓글이 최신 댓글 목록에 표시되는 데 시간이 좀 걸리는 것 같습니다.

    그리고 disqus api를 직접 끌어와 사용할 경우 개별 글에 대한 댓글 개수는 어떻게 표시해줄 수 있을까요?
    –> 자문자답이네요. 아마 다음 코드가 먹힐지 모르겠네요(code snippet이 제대로 표시되지 않네요):
    if ( function_exists( 'dsq_identifier_for_post' ) ) {
    global $post;
    echo '';
    } else {
    echo '';
    }

    그런데 아직도 사이드바의 최신글 목록에 이 글이 올라오지 않네요.

    • http://hackya.com Matthew

      “새로운 댓글이 달려도 업데이트가 잘 안 되네요.” – Disqus 에서 너무 자주 callback 을 하면 Disqus 서버에 부담이 가니 적절한 시간마다 callback 을 해줍니다. 업데이트 되는데 시간이 좀 걸리게 되는거죠.

      개별 글에 대한 댓글 개수는 count.js 를 이용해서 표시하는게 가장 간단합니다.

      출처 : https://help.disqus.com/customer/portal/articles/565624-adding-comment-count-links-to-your-home-page

      • http://www.thewordcracker.com/ WordCracker

        감사합니다. 우선

        function disqus_count($disqus_shortname) {

        wp_enqueue_script(‘disqus_count’,’http://’.$disqus_shortname.’.disqus.com/count.js’);

        echo ‘‘;

        }
        위의 함수를 사용하여 개별 글에 카운트를 추가했습니다. 프런트 페이지에서는 알려주신 스크립도 안 되고, 위의 함수도 잘 안 되네요. 우선은 대충 처리해놓고 추후에 시간이 될 때 수정해볼 생각입니다.

        • http://hackya.com Matthew

          이 코드 쓰시면 됩니다. 예전에 제가 이거 보고 똑같이 따라해서 구현했었거든요.

          http://technet.weblineindia.com/web/show-disqus-comment-count-on-your-website/

          아까 알려드린 링크에도 상세코드가 있었을텐데, 없었나요?

          첫페이지에서 댓글 숫자가 표시되지 않는거는, 테마 파일을 뜯어봐야 문제를 파악할 수 있습니다.

          • http://www.thewordcracker.com/ WordCracker

            감사합니다. 위의 링크의 코드가 프런트 페이지에서만 잘 먹히지 않았는데요, 코드를 조금 수정해주니까 해결되네요ㅎㅎ

  • http://korbuddy.com korbuddy.com

    으악 따라하고 확인하는 순간! 댓글창이 아에 사라저 버렸어요!
    지금은 복구했습니다~
    원인은 어제 작성했던 포스트들이 댓글사용체크가 빠져있더라구여;
    그걸 모르고 하루동안 헛고생 한거 생각하니 눈물이 또르르륵…ㅠㅠ

  • Pingback: Disqus에서 “~의 다른 댓글” 섹션 숨기기()

  • http://hackya.com Matthew

    감사합니다!!! 북마크 해놨습니다.

    그런데 의문이 생겼습니다. 이런 기능을 가진 워드프로세서는 왜 없는걸까요? MS 워드에 이런 기능이 있으면 정말 좋을 것 같습니다.

    • http://www.thewordcracker.com/ WordCracker

      MS 워드에도 자체 맞춤법 검사기가 있습니다. (그런데 자세히 설명은 안 해 주죠…)

  • http://www.thewordcracker.com/ WordCracker

    안녕하세요?
    요즘 바쁘신가봅니다. Hackya 사이트에 새로운 글이 뜸하게 올라오네요.

    갑자기 bbPress의 답글(Reply) 대신 Disqus를 사용하는 것이 가능하지 않을까하는 쓸데 없는(?) 생각이 드네요. 혹시 방법이 있을까요?

    • http://hackya.com Matthew

      네. 어마어마 하게 바쁘고 있습니다. ㅠㅠㅠㅠ

      Disqus 로 간이 게시판들을 운영하는 모습을 몇년전 본적이 있습니다.

      “쓸데 없는 생각”은 아니죠. 어짜피 Disqus 를 비롯한 거의 모든 API 들은 javascript 으로 manipulate 이 가능하니까, AJAX 로 각 Disqus 댓글 thread 들을 필요에 따라서 불러오는 식으로 구축한거였는데, 개인적으로 매우 신선한 발상이라고 생각 했었습니다.

      아마 제가 게시판을 운영해야 했다면, 저도 같은 방식으로 Disqus 게시판들을 구축했었을 지도 모릅니다.

      제품 review/ 평가 게시판 같은건, 어떤 추가적인 작업도 필요 없고 그냥 댓글 thread 만 하나 달아 놓으면 되니까, 쇼핑몰 같은 경우 Disqus 가 많이 사용됩니다.

  • Pingback: Disqus에서 ‘We were unable to load Disqus’ 오류가 발생하는 경우()

  • Pingback: Disqus에서 아바타 변경이 안 되는 경우()

  • LYS

    http://blog.kalkin7.com/2016/02/15/maximize-wordpress-cache/
    이 페이지의 댓글을 보고 들어왔습니다.
    disqus를 개인 홈페이지에 사용하고 싶은데 속도저하가 생긴다면 하지않으려고 고민중입니다.
    댓글상에 속도저하를 일으키지 않는다고 하셨는데, 어떻게 설정을 하면 잘 사용할수 있는지 여쭤보고 싶습니다.

    • http://hackya.com Matthew

      워드프레스 사이트라면 워드프레스용 disqus 플러그인이 속도저하가 없겠금, 비동기 로딩 (async loading) 하도록 설계되어있기 때문에 공식 플러그인 쓰시는게 무난하십니다. 비동기 로딩이라 당연히 bottleneck 현상 (병목현상) 으로 인해 발생하는 속도저하는 없습니다.

      정말 속도에 미친경우 이걸 또 더 빠르게 하는 방법도 있긴한데, 차이가 많이 나봤자 0.1-0.2 초 정도의 차이에요.

      개인홈페이지가 어떤 기반인지 언급하시지 않으셔서 이 이상의 구체적인 답변을 드리기 불가능 합니다.

      • LYS

        답변감사합니다.!
        워드프레스기반, 국내저렴호스팅 사용한 개인블로그같은 사이트예요
        친구들이나, 방문자들과 소통하고 싶어서 댓글플러그인을 고민하는중에 disqus를 발견하게 되어 얼마나 사용성이 있을지 궁금해서 여쭤봤습니다아~

        • http://hackya.com Matthew

          가장 이상적인 방법은 직접 코딩하시는건데, 개발자가 아니시면 힘드시구요, 플러그인 맘에 드시는 것 하나 골라쓰세요.

          Disqus Conditonal Load 플러그인 은, 이 플러그인 제작자하고 몇번 대화도 나누고 했는데, 이 플러그인 폄하하려는 의도는 절대 아니지만, 코드가.. 휴…

          뭐라고 해야하나… 한국말로 짜집퍼라는 단어가 있거든요. (저도 php 는 짜집퍼에요.) 암튼 이 친구가 근성은 대단한데, 가장 이상적인 코딩이 된 플러그인은 아닙니다.

          이 플러그인 버그가 발생해서 살펴본적이 있는데, 말도 안되게 불필요한 코드가 엄청 들어가 있어요. 플러그인 만들면서 ctrl c+v 한거죠.

          암튼 그런 부분은 있지만, 그래도 다른 플러그인들과 충돌이 발생하지 않으면, 쓰셔도 좋은 플러그인이긴 합니다. (필요없이 무겁다는 게 단점인데, 뭐, 다른 플러그인들도 별반 다르지 않아서, 이게 꼭 단점이라고 말하기도 그렇습니다.)

        • http://hackya.com Matthew

          그런데.. 지금 디스커스 로딩속도를 걱정하시기 보다는, 사이트 로딩 속도가 거의 접속이 불가능 할 정도로 느리세요. 매우 심각한 상태 입니다.

          https://tools.pingdom.com/#!/GpcQj/https://leeyoonsil.com/

          혼자만 알고 싶은(?), 그러니까 웹에 노출되고 싶지 않으신 사이트 이신거면, 상관없지만, (방문자가 없기를 바라시는?) 웹에 노출되고 검색도 잘되기를 원하신다면, 로딩속도를 개선하셔야 합니다.

          사이트가 느리면 구글은 그 사이트 검색결과를 아예 배제합니다. 사람들도 사이트가 느리면 로딩되길 기다리다 그냥 나가버립니다. 재방문은 절대 안하죠.

          많은 분들이 자주 하시는 실수가, 자신의 사이트가 얼마나 느린지를 몰라서 사이트를 자꾸 느리게 만드십니다. 뭘 자꾸 넣는거죠. 화려한 animation 같은 것들.

          일명 eye candy 라고 하는데, SEO 측면에서 사이트에 매우 좋지 않은 영향을 끼칩니다.

          animation 을 꼭 사용하셔야 겠다면, 자스 (javascript) 위주가 아닌 css 위주의 animation 을 구사하시면 속도향상에 많은 도움이 됩니다.

          • https://leeyoonsil.com/ Quasar

            아ㅠㅠㅠ 느린건 알고있었는데, 그정도일줄은 몰랐네요. 사실 구매한 테마에서 크게 건드린건 없어서.. 자스 건들줄도 모르구욯ㅎ

            이미지최적화나 cache 플로그인도 설치했는데;;;
            속도개선이 되는지 확인할 방법은 뭐가있을까요?

          • http://hackya.com Matthew

            pingdom 페이지에 보시면 어떤 asset 들이 얼마만큼의 시간이 소요되면 로딩되는지 상세하게 나와 있습니다.

            테마자체는 아주 느린편은 아닌데, 서버가 반응하는데만 3.69초 걸리고 있고,

            서버가 그냥 멍때리고 있는 시간이 2.84초 네요.

            이런 경우는 서버문제라고 보는게 맞습니다.

  • http://jimnong.tistory.com 짐농

    Disqus 코드 직접 삽입하는 방법이 정말 잘 설명되어있는 글 같아서, 이 글에 붙어서 추가적인 팁을 적으려 합니다.

    Hackya 님 방법이 잘 안되실 경우
    https://help.disqus.com/customer/portal/articles/1183281-manually-install-disqus-on-wordpress
    Disqus에서 공식적으로 발표한 방법(위 링크)을 이용하셔도 되고,
    이후 dusqus.com 사이트에 로그인하여 Admin – Installing Disqus – I don’t see my platform listed, install manually with Universal Code 메뉴에도 접근해서 “How to display comment count” 부분을 따라하시면 Async 로 작동하게끔 설정할 수 있습니다.

    이 방법 적용사례는
    https://www.sobi.tips/satisfying-wordpress/
    에서 확인하실 수 있습니다.

    • http://hackya.com Matthew

      헐ㅋ.

      https://disqus.com/admin/install/platforms/universalcode/

      너무나 유용한 정보 매우 감사합니다!!

      디스커스 플러그인 제작자 하고 올해초에도 몇번 대화하고 그랬는데, 그 친구도 비동기로 count.js 로딩하는 방법을 모른다고 했었거든요.

      물론 저도 몰랐고.

      다들 count.js 를 적용하면 loading speed takes a hit (로딩속도가 늦어진다고) 하고, 그렇게 알고들 있었고..

      이건 최근에 디스커스가 적용시킨 내용 같습니다.

      언제부터 이렇게 된건지 모르지만, 예전에 count.js 는 비동기 로딩 방식이 제공되지 않았었습니다.

      좋은 정보 알려주셔서 감사합니다. 다들 count.js 비동기 로딩으로 바꾸세요!!! ㅋㅋㅋ

      • http://www.thewordcracker.com/ Word

        disqus 사이트를 참고하여 수정했습니다.
        그런데 로드하지 못하고 사라지는 댓글이 있네요.
        현재로서는 글 하나에서 그런 현상이 발견되었는데, 그 글이 너무 길어서 그런지 모르겠습니다. 문제가 되는 글에 테스트로 댓글을 다니까 새로 단 댓글만 표시되고 사라진 댓글을 표시되지 않네요ㅎㅎ

        • http://hackya.com Matthew

          count.js 는 댓글의 갯수를 세어주는 역활을 하고, 댓글 자체에는 아무런 영향을 주지 않습니다. count.js 는 있어도 그만 없어도 그만인 부수적인 기능이거든요.

          아마 count.js 와 상관없는 다른 문제가 있으신 것 같습니다.

          • http://www.thewordcracker.com/ Word

            문제의 글이 다음 글인데요:
            http://www.thewordcracker.com/basic/%EB%8B%A4%EA%B5%AD%EC%96%B4-%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%EA%B0%80%EC%9D%B4%EB%93%9C-wpml-polylang-%EB%A9%80%ED%8B%B0%EC%82%AC%EC%9D%B4%ED%8A%B8-%EB%B9%84%EA%B5%90/

            유독 이 글에서만 문제가 발생하네요(현재 확인된 것만). 댓글을 하나 새로 작성했다가 지우니 “1개 댓글”이라고 계속 뜨네요. 실제로는 여러 개의 댓글이 표시되어야 합니다. disqus admin에서는 기존 댓글이 확인됩니다.ㅎㅎ

            이전 스크립트의 경우 큰 따옴표가 있으면 댓글을 로드하지 못하는 문제가 있었는데요(제 블로그에서만 그런지 모르겠네요). disqus에서 제공하는 것으로 바꾸니까 문제가 사라졌습니다. 아마 disqus에서도 제공하는 방법에서도 특정 조건(condition)에서 문제가 발생하게 하는 요소가 있지 않나 의심되네요.

          • http://hackya.com Matthew

            잘 이해를 못했습니다. 댓글을 하나 쓰셨다 지우시면 댓글갯수 가 0 이 되어야 맞는게 아닐까요? 어떻게 여러개가 표시되는게 옳은건지 잘 모르겠습니다

          • http://www.thewordcracker.com/ Word

            1개라고 나오는 것은 삭제한 댓글이 실제로 반영되는 데 조금 시간이 걸려서 그런 것 같습니다. (아마 시간이 지나면 “0개”라고 표시될 것 같습니다.)

            여러 개가 표시되어야 한다는 의미는, 본래 http://www.thewordcracker.com/basic/%EB%8B%A4%EA%B5%AD%EC%96%B4-%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%EA%B0%80%EC%9D%B4%EB%93%9C-wpml-polylang-%EB%A9%80%ED%8B%B0%EC%82%AC%EC%9D%B4%ED%8A%B8-%EB%B9%84%EA%B5%90/ 글에 여러 개의 댓글이 있었다는 의미입니다. 그런데 disqus에서 제시하는 방법대로 하니까 이 글에서만 댓글이 사라지고 개수에도 포함되지 않고 있습니다.

          • http://www.thewordcracker.com/ Word

            다시 이전 방법으로 되돌렸습니다. 이제 제대로 표시되네요. 다른 글에서도 기존 댓글을 제대로 로드하지 못하는 것이 발견되네요.

            http://www.thewordcracker.com/basic/%EB%8B%A4%EA%B5%AD%EC%96%B4-%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%EA%B0%80%EC%9D%B4%EB%93%9C-wpml-polylang-%EB%A9%80%ED%8B%B0%EC%82%AC%EC%9D%B4%ED%8A%B8-%EB%B9%84%EA%B5%90/#disqus_thread

            이제 제대로 표시됩니다ㅎㅎ

          • http://hackya.com Matthew

            이런 문제는 사이트내에 자스들을 하나씩 비활성화 하며 문제점을 찾아야 합니다.

            사용하고 계신 자스 와 디스커스의 자스가 서로 충돌을 일으키고 있는건데, 디스커스 API 를 내가 수정할 수는 없는거고, 디스커스가 정상적으로 작동하도록 내가 사용하는 자스를 수정해 줘야 하는거죠.

          • http://www.thewordcracker.com/ Word

            감사합니다~
            댓글 개수가 현재 잘못 표시되는 문제가 일부에서 나타나네요. critical 문제가 아니니까 그대로 사용해야 겠네요. (이전 방법에서는 이런 문제가 전혀 없었거든요. 다시 이전 방법으로 되돌려도 위의 링크된 글에서만 댓글 개수가 잘못 표시되네요.)

            여기 주제와는 무관한데요..
            Trampoline에서 점프를 해서는 안 되는 사람을 나열하는 글에서 맨 마지막에 다음과 같은 문장이 있네요.

            The person who are over average weightlifters

            weightlifter가 역도선수나 무거운 것을 드는 사람이라고 나오는데(One who lifts heavy weights for exercise or in an athletic competition.), 이 문장에서는 그런 의미는 아닌 것 같고요. 평균 몸무게를 초과하는 사람?

            어떤 의미일까요? 영어는 날마다 접해도 어렵네요ㅠㅠ

          • http://hackya.com Matthew

            who is over average weightlifters – 영어를 이해하는 사람이 쓴 문구가 아님은 확실 합니다. 왜냐하면 이런 표현은 없거든요.

            평균몸무게로 average weight 이라는 표현은 자주 씁니다.

            또 독일회사인가요? ㅎㅎㅎㅎ

          • http://www.thewordcracker.com/ Word

            이전 건하고는 전혀 상관이 없지만, Trampoline을 만드는 회사가 미국, 독일, 스위스에 사무소가 있다고 되어 있는 것으로 보아서 독일계 회사일 가능성도 있을 것 같습니다.

            요즘 이상하게 작성된 영어를 많이 번역하네요.ㅎㅎ

  • Pingback: Disqus 댓글을 워드프레스에 저장하기()

  • https://leeyoonsil.com/ Quasar

    워드프레스 플러그인으로 디스커스를 깔았더니, 캐시를 매번 삭제해주지 않으면

    • http://hackya.com Matthew

      디스커스 계정의 언어를 프랑스어로 잘못 세팅하신 듯 합니다.

      “캐시를 삭제 한 그때만 뜨거나, 관리자 계정으로 로그인할때만 제대로 로딩이 됨” – 디스커스 문제는 아니고 아마도 사용하고 계신 cache 플러그인의 문제로 보여집니다.

      • https://leeyoonsil.com/ Quasar

        – 네 말씀하신대로 캐시플러그인사용이 문제가 좀 있었던것 같습니다. (수정완료)
        – 언어는 제가 shortname을 다른것으로 잘못입력을 했나봅니다.

        +
        헌데, 플러그인과 API를 사용 시 속도차이가 있는건지 잘 모르겠습니다.
        사실 둘다 새로고침을 하지 않으면 처음 포스팅에 접속했을때 1분넘게 기다려도 뜨질 않아요. 그자리에서 새로고침을 해줘야만 뜹니다; (크롬 사파리 둘다)
        왜 그런걸까요?

        • http://hackya.com Matthew

          예전에도 말씀드렸던 적이 있는 것 같은데, 웹사이트의 성능은 브라우져가 그 사이트의 asset 들을 얼마나 빨리 render 할 수 있느냐에 큰 영향을 받습니다.

          물론 서버가 필요한 asset 들을 빨리 빨리 불러와 주지 못하면 로딩이 되지 않으니까 서버가 가장 핵심이긴 한데, 어떤 사이트들은 과도한 front-end asset 들 (예를 들자면 엄청나게 무거운 부트스트랩 css 라던가, 완전 bloat 된 jQuery 라든지) 때문에 브라우져가 버벅거려서 표시되어야 하는 asset 들이 빨리 render 되지 못합니다.

          Quasar 님의 경우 서버성능은 큰 문제가 없지만, 잘못된 사이트 구축으로 (매우 무거운 테마와 과다한 플러그인 사용) 속도가 느리다 못해 페이지가 제대로 뜨지도 못하는 경우가 발생하고 계신 것 입니다.

          웹디자인은 어떻게 사이트를 예쁘게 만드는가가 핵심이 아니고, 얼마나 효율적으로 css 와 js 를 관리하고 구동시키는가가 가장 중요한 부분입니다.

          이런 front-end optimizing 은, 회사내에 사수분이 계시면 사수분에게 배우시는게 가장 좋으시구요, 아니면 혼자서 자학으로 여러 scenario 를 테스트 하면서 그 노하우를 쌓으셔야 합니다.

          사수없이 직접 배우셔야 한다면 브라우져는 어떤방식으로 작동되는지를 이해하고 data 는 어떻게 불려와지는지 (http request), 각 브라우져가 js 를 rendering 하는데 있어서 그 작동방식의 차이는 무엇인지 등, 일단 브라우져에 대한 공부 부터 하시는 것이 좋습니다.

          • https://leeyoonsil.com/ Quasar

            네, ㅠ 혼자 필요한정보를 습득하려 끄적거리다보니 제자리인 경우가 생기네요 ㅠ
            사실 테마를 구입할때 개발자가 어련히 잘 코딩했을거라 생각하고 구입을 한거인데, 많이 무거운 테마였나 봅니다.
            헌데, 또 지인들한테 링크를 보내주고 물어보면 사이트속도가 느리다고 하진않더라구요.
            하 테마의 어떤걸 확인해야 하는지 막막하긴한데, ㅠ 일단 플러그인들부터 비활성화해보고 테스트해봐야겠네요

          • http://hackya.com Matthew

            자스 (javascript) 이 꼬여서 오작동이 나고 있는 듯 합니다.

            다른분들은 다들 멀정하게 쓰고 있는 디스커스가 왜 내 사이트에서만 문제가 생길까? 내가 운이 없는건가? 라고 생각하실 수 있는데, 사실은, 그냥 테마가 문제인 경우 입니다.

            제 얘기가 굉장히 이상하게 들릴 수 있는데, 워드프레스 기반에서 쓸만한 테마는 무료테마 중에서 더 많고, 유료테마는 정말 쓸만한 테마를 찾기가 어렵습니다.

            튼튼하고, 고장 잘 안나고, 오래쓸수 있는 테마는 거의 무료테마들 이라고 보시면 됩니다.

            무료테마들은 wordpress.org 에서 쉽게 얘기해서 QC 검증을 거쳐서 승인을 받아야 공유될 수 있거든요. 품질보증이 되는거죠. (코드inspection 이 생각보다 무지 빡셉니다.) 반면 유료테마는 이런 품질보증 절차가 아예 없거나, 있더라도 그냥 형식적인 경우가 대다수라서 문제가 많은 유료테마들이 양산되고 있는 실정입니다.

            이렇게 생각하셔도 좋습니다. 무료테마들은 enthusiast 들이, 혹은 마음씨 좋은 개발자들이, 정말 배타적인 마음으로 공유해주는거거든요. 선행을 베풀고 있는거죠.

            반면 유료테마는 돈벌이 일 뿐 입니다.

            집에서 어머님이 자기 자식을 위해 정성을 다해 차려주는 밥한끼가 내 몸에 좋을까요, 아니면 식당에서 입맛만 최대한 자극하는 음식이 내 몸에 좋을까요?

            판단은 본인이 직접 하실 수 있으리라 믿습니다. ㅎㅎㅎ

          • https://leeyoonsil.com/ Quasar

            아 오히려 무료테마들이 ㅎㅎ
            원하는 레이아웃을 정상적으로 사용하려면 여러가지 테스트를 해볼수 밖에 없긴 하겠네요! 답변 감사합니다.

  • http://www.thewordcracker.com/ Word

    SSL을 적용한 후에 Disqus 댓글 개수가 표시되지 않는 문제가 나타나고 있습니다(가령 “2개 댓글” 이런 식으로 나와야 하는데 그냥 “Comments”라고 표시되고 있습니다). Disqus 문서를 참고로 ?https를 붙여도 마찬가지네요.

    Hackya 사이트에는 댓글 개수가 정확하게 표시되네요. disqus 코드에서 어떤 부분을 수정하면 댓글 개수가 정확하게 표시될 수 있을까요?

    • http://hackya.com Matthew

      Failed to load resource: the server responded with a status of 404 ()
      VM885 http://www.thewordcracker.com&dtd=15:1 Mixed Content: The page at ‘https://www.thewordcracker.com/miscellaneous/%ed%95%b4%ec%99%b8-%ec%9b%b9%e…ec%a0%81%ec%9a%a9%ed%95%98%eb%8a%94-%eb%b0%a9%eb%b2%95/#comment-3175644042’ was loaded over HTTPS, but requested an insecure plugin data ‘http://plg2.yumenetworks.com/crossdomain.xml’. This content should also be served over HTTPS.

      이런식으로 현재 워드님 페이지 에러가 56개 뜨고 있구요, 766개의 warning 메세지도 같이 뜨고 있습니다.

      이걸 제가 다 보고 확인해 드리기는 불가능에 가까울 것 같습니다. 켁.

      그런데 굳이 ssl 설치를 하실 이유가 있으신지 잘모르겠습니다. 에러들 때문인지 사이트도 엄청나게 느려지셨거든요. SEO 쪽에서 많이 피해를 보실텐데요….

      더구나 http/1.1 은 보안상 별로 혜택보시는 것도 없으십니다. (거의 무의미합니다.) 괜히 속도만 느려지구요.

      • http://www.thewordcracker.com/ Word

        다시 되돌려 놓아야겠네요.ㅠㅠ

  • http://weloveadidas.com Adi Jang

    좋은 정보 감사합니다.

    왜 안되나 했는데 ㅎㅎ

  • http://www.fruitfulife.net/ 열매맺는나무

    제 경우엔 ‘Unable to connect to the Disqus API servers’ 라고 합니다. username, email 둘 다 안되네요. 무슨 일일지…

  • http://e-blog.co.kr 총명

    감사합니다. 이제 댓글이 보이네요!

    대시보드에서 댓글을 확인할 수 없었는데 좀 편해졌습니다.

  • 이창용

    혹시 한페이지에 디스커스 두개를 설치하는 방법은 없을까요?

    • http://hackya.com Matthew

      디스커스 는 자스 (javascript) API 로 고유 identifier (ID) 를 구분해 작동됩니다. 자스 (javascript) 의 특성상 ID 가 중복되면 처음 ID 에 해당하는 element 에만 API 가 작동됩니다.

      하나의 문서에 디스커스 댓글창 두개를 설치하시려면 두개의 계정을 만들어서 설치하셔야 합니다.

      • 이창용

        안녕하세요 답글 감사드립니다.
        현재 제 홈페이지에 시험해 본 결과 페이지당 하나의 디스커스만 삽입 되더라구요.. 후ㅠㅠ