워드프레스에 페이스북 댓글 달기(social plugin)

플러그인을 사용하면 워드프레스에 페이스북 댓글을 쉽게 붙일수 있습니다.  facebook comment 를 키워드로 검색해 보니 수백개가 검색이 됩니다. 물론, 여기에는 facebook for website 를 활용한 다른 플러그인도 검색이 되었습니다.

검색결과 첫 페이지에 나오는 것 중에서 download 또는 rating이 높을 것을 선택하고, 페이스북이 자주 업데이트 되기 때문에 이에 맞추어 플러그인의 changlog를 확인하면 선택이 틀림없습니다.

이 사이트에서는 http://wordpress.org/extend/plugins/facebook-comments-plugin/ 플러그인을 현재 사용 중입니다.(수정. 현재는 비활성화 하였습니다)   facebook comments for wordpress도 많이 사용하는 플러그인입니다.

[arrowlist] 페이스북 댓글을 도입하면…

  • 댓글, 댓글의 댓글 등의 반응을 쉽게 알 수 있습니다.
  • 페이스북이 기본적으로 실명이므로 스팸의 가능성이 현저하게 줄어듭니다.
  • 댓글이 페이스북의 타임라인,페이지에도 동시에 작성될 수 있기에 노출에 도움이 됩니다.
  • 페이스북에 노출되면 거꾸로 페이스북에서 남긴 댓글도 내 블로그의 해당 포스트에 노출됩니다.
  • yahoo, hotmail 과 같은 다른 서비스 계정으로 로그인해서 댓글을 달 수 있습니다.

[/arrowlist]

워드프레스에 페이스북 댓글(facebook comment)를 설치하는 것은 간단합니다.

[notification_tip] 워드프레스 플러그인을 이용

가장 쉬운 방법으로 워드프레스 플러그인 디렉토리에서 검색 후 선택합니다. 클릭 몇 번으로 페이스북 댓글을 달 수 있다. [/notification_tip]

[notification_tip] 소셜 댓글 서비스를 이용

소셜댓글로 유명한 외국서비스로는 IntenseDebate 이나 Disqus가 있고, 국내의 서비스로는 LiveRe 가 유명합니다.[/notification_tip]

이제 본론으로 들어가서 여기서는 위의 2가지 방법이 아닌 페이스북에서 직접 지원하는 social plugin을 적용하는 방법을 공유하려고 합니다.  (참고 :  구글의 블로그에 페이스북 댓글 사용하기 , 페이스북 소셜플러그인 댓글)

[notification_info]

1. facebook app 생성

[/notification_info]페이스북 댓글을 블로그에 달기 위해서는 먼저 facebook application을 만들어야 합니다. 위에 소개된 2가지의 방법도 이 과정을 필수로 진행됩니다.

  • App Display Name : 적당한 이름으로. 나중에 수정 가능.
  • App Namespace : opengraph protocol에 사용되므로 여기서는 패스.

이 과정을 거치고 나서 필요한 것은  App ID/App Api 이므로 나머지는 무시해도 됩니다.

[notification_info]2. app code를 블로그에 추가[/notification_info]


facebook comments plugin 페이지로 가서, Get Code로 코드를 받습니다.

  • href : 코멘트 플러그인 URL
  • width : 댓글 박스 가로 사이즈.
  • colorscheme : light, dark 중 선택.
  • num_posts : 댓글 갯수. 빈칸이면 기본 10개.
  • mobile(beta) : 모바일에서 사용 여부. 기본은 비활성(false)

[Get Code]를 클릭하면 코드창이 열립니다. 혹시 다른 app가 있다면 방금 만든 app display name을 확인하세요.

[html5], [xfbml], [iframe] 3가지 방식의 코드를 선택할 수 있는데, 어느 방식을 사용해도 상관은 없습니다만, 여기서는 시대의 흐름에 맞게  html5로 적용해 보겠습니다.

받은 코드를 header.php의 <body> 아래에 추가합니다.

<div id="fb-root"></div>
<script type="text/javascript">// <![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=YOURAPPLICATIONID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
// ]]></script>

페이스북 댓글 박스 코드를 comments.php 파일에 추가합니다.

<div data-href="<?php the_permalink(); ?>" data-num-posts="5" data-width="500"></div>

위치는 사용자마다 다를 수 있지만, 일반적으로 워드프레스 자체 댓글의 위 또는 아래가 될 것입니다.

워드프레스 댓글 위에 추가하려면,  <!– You can start editing here. –> 바로 밑에,
워드프레스 댓글 아래에 추가하려면 </form> 태그 아래에 넣으면 됩니다.

[notification_warning]

위 스샷의 2번째 코드에서 data-href=”http://gorkii.com” 부분을 data-href=”<?php the_permalink(); ?>”꼭! 수정하세요.[/notification_warning]

[notification_warning]comments.php 파일은 워드프레스의 포스트에만 해당됩니다.  page에도 페이스북 댓글을 추가한다면 page.php 파일을 수정하시고, 워드프레스의 자체 댓글 시스템을 숨기고 페이스북 댓글만 사용하고자 한다면 single.php  를 수정하세요. [/notification_warning]

comment moderation tool 페이지의 해당 앱의 오른쪽에 있는  [설정.settings] 을 클릭하고 [관리자. moderator]에 자기를 추가하면, 페이스북을 통해서 달린 댓글의 업데이트 소식을 받을 수 있습니다. 마찬가지로 해당 앱을 사용한 모든 댓글은 이곳에 모두 표시되기 때문에 꼭 확인하시기 바랍니다. 작년에 social plugin이 업데이트 되면서 추가된 기능입니다.

 

로그인하지 않은 사용자라면 아래의 화면이 보이고

관리자는 아래와 같은 화면이 보입니다. (변경)을 클릭하면 페이지 선택화면이 나옵니다.

플러그인이 많아지면 종종 서로 충돌하면서 특정 플러그인은 작동되지 않는 경우가 있습니다. 이런 경우에는 위의 방법대로 수동으로 코드를 직접 넣어서 컨트롤하시기 바랍니다. 성공을 기원하며…=3333

8 Comments

    • 안녕하세요

      Reply
  1. test

    Reply
  2. 음냐

    Reply
  3. 음…

    Reply
  4. 감사합니다. 도움 많이 되었어요.

    Reply
    • 좀 지난 포스트라 지금도 그대로 적용해도 무리는 없겠지만, 간단한 플러그인이 많아졌으니 구글링해서 더 좋은 결과 얻으시기 바랍니다.

      Reply
  5. 감사합니다.

    Reply

Trackbacks/Pingbacks

  1. 워드프레스,블로그,페이스북,소셜플러그인 | 더불어 사는 위드타이 - [...] 워드프레스에 페이스북 댓글 달기 [...]
  2. 한국에서 워드프레스 프로젝트가 활성화되기를 기대하며..추천 플러그인 | NaeilStory.net - [...] 워드프레스에 페이스북 댓글 달기 [...]
  3. 스마트 클라우드 » Blog Archive » 워드프레스와 티스토리에 페이스북 댓글 달기 - [...] : http://eastsocial.co.kr/?p=102워드프레스에 페이스북 댓글 달기 http://kindtis.tistory.com/478티스토리에 [...]
  4. permalink 변경 후 facebook comment 와 like 불러오기 | eastsocial - [...] *http://eastsocial.co.kr/?p=102 (워프 기본값인 shortlink) [...]
  5. 1개 페이지에 2개 이상의 페이스북 댓글 박스 넣기 | eastsocial - [...] 관련링크 : 워드프레스에서 페이스북 댓글달기(social plugin) [...]

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code lang=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" extra="">

Share This