댓글전용서비스 플랫폼 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') {
  // required: replace example with your forum shortname
  var disqus_shortname = 'EXAMPLE';  
  var disqus_config = function () { 
    // Replace PAGE_URL with your page's canonical URL variable
    this.page.url = 'PAGE_URL'; // Replace PAGE_URL with your page's canonical URL variable 
    this.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 = ''; 
    } 
  }); 
}
</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 값을 할당한다. 그리고, EXAMPLEPAGE_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 ? "("; + countText + count + ")" : "");
    }
  }
});
</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 댓글의 갯수를 표시한다. 이제 브라우저에서 제대로 동작하는지 확인해 보자.

댓글 남기기

이 사이트는 스팸을 줄이는 아키스밋을 사용합니다. 댓글이 어떻게 처리되는지 알아보십시오.