댓글전용서비스 플랫폼 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 댓글의 갯수를 표시한다. 이제 브라우저에서 제대로 동작하는지 확인해 보자.

댓글 남기기

This site uses Akismet to reduce spam. Learn how your comment data is processed.