댓글전용서비스 플랫폼 Disqus를 레일스 프로젝트에 적용하기

레일스 프로젝트를 만들 때 글에 대한 댓글을 작성하도록 하면 독자들의 의견을 여러사람들과 공유할 수 있어 좋다.

레일스에서는 이러한 댓글 기능을 너무도 쉽게 구현할 수 있다.

최근에는 이러한 웹서비스의 댓글기능에 많은 부가기능을 지원하여 독자들의 의견을 보다 효율적으로 관리하는 무료 댓글전용 웹서비스에 대한 인기가 놓아지고 있다.

그 중에서도 단연코 넘버 원으로 들 수 있는 것이 Disqus.com이다. 밝음은 `디스커스`라고 하면 된다.

문서화가 잘 되어 있고 사용하기 쉬워 레일스 프로젝트에 적용하기도 쉽다.

이 글에서는 레일스 프로젝트에 `Disqus` 서비스를 적용하고 특정 글에 대한 댓글 갯수를 표시하는 기능을 소개하고자 한다.

2015-12-25_10-22-47_zps6zwrtfsm

개발 환경

  • Ruby 버전 : v2.2.3
  • Rails 버전 : v4.2.5

사용법

레일스 프로젝트에서 `Turbolinks`를 사용할 때는 추가 옵션이 필요하다. 아래의 링크에서 관련내용을 참고하여 코드를 수정하면 된다.

http://solidfoundationwebdev.com/blog/posts/disqus-on-ajax-or-turbolinks-site

1. 리소스 생성

우선, Post 리소스를 `scaffold` 제너레이터를 사용하여 생성한 후 마이그레이션 한다.

$ rails g scaffold Post title, content:text
$ rake db:migrate

2. Show 뷰 파일 삽입

`posts#show` 액션 뷰 파일(`app/views/posts/show.html.erb`)에서 아래와 같이 `disqus` 댓글을 삽입한다.

<!--disqus 댓글 플러그인-->
<%= render partial: 'layouts/disqus', locals: { page_title: @post.title } %>

3. `disqus` 파셜 생성

위에서 사용한 `partial` 템플릿 파일을 생성하기 위해 레이아웃 디렉토리(`app/views/layouts/`)에 `_disqus.html.erb` 파일을 생성하고 아래와 같이 추가한다.

<div id="disqus_thread"></div>
<script type="text/javascript">
  if(typeof DISQUS === 'undefined'){
    var disqus_shortname = 'EXAMPLE'; // required: replace example with your forum shortname
    var disqus_config = function () {
      this.page.url = 'PAGE_URL';  // Replace PAGE_URL with your page's canonical URL variable
      this.page.title = '<%= page_title %>'
    };
    (function() {
      var d = document, s = d.createElement('script');
      s.src = '//' + disqus_shortname + 'nicerails.disqus.com/embed.js';
      s.setAttribute('data-timestamp', +new Date());
      (d.head || d.body).appendChild(s);
    })();
  }else{
    DISQUS.reset({
      reload: true,
      config: function () {
        this.page.url = 'PAGE_URL';
        this.page.title = '<%= page_title %>';
      }
    });
  }
</script>
<noscript>Please enable JavaScript to view the <a href='https://disqus.com/?ref_noscript' rel='nofollow'>comments powered by Disqus.</a></noscript>

`this.page.title`에는 `partial`로 넘겨 준 `page_title` 값을 할당한다. 그리고, `EXAMPLE`과 `PAGE_URL` 값을 자신의 것으로 변경해 준다. 예를 들어 `PAGE_URL`은 아래와 같이 변경해 줄 수 있다.

<%= request.original_url %>

4. Index 뷰 파일의 수정

다음은, `disqus` 댓글 갯수를 가져오기 위한 자바스크립트 코드를 `Turbolinks`에서 제대로 동작하도록 하기 위해서 것으로, `posts#index` 뷰 템플릿 파일을 파일 끝단에 아래와 같이 추가해 준다.

<script type='text/javascript' charset='utf-8'>

  var disqusPublicKey, disqusShortname, urlArray;
  disqusPublicKey = 'DISQUS_PUBLIC_KEY';
  disqusShortname = 'EXAMPLE';
  urlArray = [];
  $('.comment-link-marker').each(function() {
    var url;
    url = $(this).attr('data-disqus-url');
    urlArray.push('link:' + url);
  });
  $.ajax({
    type: 'GET',
    url: 'https://disqus.com/api/3.0/threads/set.jsonp',
    data: {
      api_key: disqusPublicKey,
      forum: disqusShortname,
      thread: urlArray
    },
    cache: false,
    dataType: 'jsonp',
    success: function(result) {
      var count, countText, i;
      for (i in result.response) {
        countText = '댓글 ';
        count = result.response[i].posts;
        if (count === 1) {
          countText = '댓글 ';
        }
        $('a[data-disqus-url="' + result.response[i].link + '"]').html( count > 0 ? "<small>("; + countText + count + ")</small>" : "");
      }
    }
  });

</script>

`DISQUS_PUBLIC_KEY` 값은 https://disqus.com/api/applications/ 에서 알 수 있다.

5. 댓글개수 링크 추가

그리고, 각 글에 대한 링크는 아래와 같이 작성해 준다.
(제대로 보이도록 하기 위해서는, 각자의 디자인에 맞게 HTML 태그를 추가할 필요가 있다.)

<% @post.each do | post | %>
  <%= link_to post.title, post %>
  <%= link_to "", post, class: 'comment-link-marker', data: { "disqus-url": post_url(post) } %>
<% end %>

`3번 코드라인`을 추가해 주가해 주어 해당 글에 대한 `disqus` 댓글의 갯수를 표시한다.

이제 브라우저에서 제대로 동작하는지 확인해 보자.

글쓴이: 최효성

외과전문의,웹프로그래밍,컴퓨터 일러스트레이션 / Surgeon, Medical Illustration, Web Programmer

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중