DISQUS 소셜 댓글 달기

DISQUS 소셜 댓글 달기

블로그를 방문하다보면 종빈이형 블로그처럼 댓글창이 표시되는 걸 종종 봤습니다. 페이스북이나 트위터, 구글+ 등등 다양한 서비스로 로그인이 가능하고 댓글도 모아 보여주는 신기한 기능(?) 때문에 눈여겨 보고 있었는데요, 내친김에 저도 한 번 달아보기로 했습니다.

멋진 소셜 댓글 창의 정체는 DISQUS에서 지원하는 위젯인데요, 간단히 회원가입만 하면 웹사이트용부터 시작해서 워드프레스용 코드까지 클릭만으로 생성해줍니다. 저는 아무대나 붙여넣을 수 있는 Universal Code를 선택해서 코드를 만들었는데요, 최종 코드는 아래와 같이 두 가지로 나왔습니다.

첫 번째 코드는 DISQUS 댓글 위젯을 표시해주는 코드입니다. HTML의 Body 내부 중에 표시되길 원하는 곳에 붙여 넣으면 됩니다. 코드는 제가 생성한 코드니 실제로 위젯을 다실 분은 직접 생성한 코드를 붙여넣으세요. ^^;;;

<div id="disqus_thread"></div>
    <script type="text/javascript">
        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
        var disqus_shortname = 'writersnote'; // required: replace example with your forum shortname

        /* * * DON'T EDIT BELOW THIS LINE * * */
        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
    </script>
    <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

그리고 두 번째 코드는 관련된 댓글을 실제로 로딩해주는 부분인데요, 역시 적당한 곳에 붙여넣으시면 됩니다. 저는 HTML의 Body 가장 밑에 붙여넣었어요. ^^;;;;

    <script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'writersnote'; // required: replace example with your forum shortname

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function () {
        var s = document.createElement('script'); s.async = true;
        s.type = 'text/javascript';
        s.src = '//' + disqus_shortname + '.disqus.com/count.js';
        (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
    }());
    </script>

실제로 로딩되는 예제는 종빈이형 블로그나 Writer's Note의 아래쪽을 보시면 됩니다. ^^

그럼 즐거운 명절 되세요 ^^)/~