컴퓨터 / Computer

페이스북 소셜플러그인 댓글 달기

SNS 가 나온 초창기에 해당 기능을 썼는데, 그때 당시에는 "댓글 관리 기능"이 없고 속도도 느리고(지금도 느리지만) 해서 쓰지 않다가 몇년 전부터 댓글 관리기능이 있다기에 냉큼 달았다. 그런데 다는 과정에서 설명이 애매하여 중간에 고생을 좀 한 관계로, 이후 설치하시는 분들한테 도움이 되고자 기록을 남긴다.


0. 사전 작업

 - 페이스북 가입

 - 개발자 신청하여 페이스북 앱 생성 : https://developers.facebook.com/docs/apps?locale=ko_KR  -> 앱 아이디를 받아 놓음. (앱 아이디를 모르면 나중에 그림으로 보여 줄 예정.)


1. 코드 받기 : https://developers.facebook.com/docs/plugins/comments/?locale=ko_KR#configurator

위 링크에서 코드를 받는다. 이때 댓글을 남길 URL은 아무거나 써도 추후 수정이 가능하다. 아래 상자 안 코드는 페이스북 기본 값으로 받은 코드다.


<div id="fb-root"></div>
<script>(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 = 'https://connect.facebook.net/ko_KR/sdk.js#xfbml=1&version=v3.2';
  fjs.parentNode.insertBefore(js, fjs); 

}(document, 'script', 'facebook-jssdk'));</script>



<div class="fb-comments" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-numposts="5"></div> 



코드는 위와 같이 스크립트와 실 동작 html 코드로 구성되어 있다. (주의 : 위 코드는 앱 id 없이 생성하였으니, 작업을 할때는 필히 0 과정을 거친 후에 진행해야 한다. 그렇지 않으면 아래 3 이하를 적용할 수 없다.)


2. 코드 설정하기

- 언어 바꾸기 

 js.src = 'https://connect.facebook.net/ko_KR/sdk.js#xfbml=1&version=v3.2';


위 코드에서 "ko_KR"로 된 부분을 바꾸면 된다. 기본 노출 언어를 프랑스어로 싶으면 fr_FR, 미국 영어로 바꾸고 싶으면 en_US, 영국 영어로 하고 싶으면 en_UK가 된다. 


- 지정 도메인 바꾸기

 data-href="https://developers.facebook.com/docs/plugins/comments#configurator"

위 URL을 바꾸면 된다. 그리고 사용하는 시스템에 따라 위 링크 값에 변수를 집어 넣을 수도 있다. 그누보드의 경우 게시판과 게시물 별로 댓글을 보고 싶다면 아래와 같이 입력한다.

 data-href="http://www.7-star.net/bbs/board.php?bo_table=<?=$GLOBALS['bo_table']?>&wr_id=<?=$GLOBALS['wr_id']?>"


- 노출 크기 변경 

 <div class="fb-comments" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-width="100%" data-numposts="5"></div>


data-width값을 넣어 주면 폭을 정할 수 있다. 위 아래 크기 설정은 data-numposts 값을 통해서 바꿀 수 있다. 보통은 2개 정도로 하는데 글이 많을 경우에는 5개 정도로 설정할 수 있다. 



3. 관리 설정 : https://developers.facebook.com/docs/plugins/comments/?locale=ko_KR#moderation-setup-instructions

댓글을 달았는데 관리를 하려면 관리자 지정을 해 줘야 한다. 이 부분은 초기에는 없었고 향후 추가된 듯 하다. 그 전에는 게시물 별로 달린 댓글을 확인할 수 없어 일일이 게시물을 뒤져야 했는데 댓글 관리 기능이 생기면서 페이스북 댓글 화면에서 한번에 할 수 있다. 그러기 위해서는 이 관리 설정을 반드시 해 줘야 한다.


관리설정은 메타 태그를 아래와 같이 추가하는 방식이다.

 <meta property="fb:app_id" content="{YOUR_APP_ID}" />


그누보드의 경우 관리자 화면에서 아래와 같이 입력하면 된다.


1222f6389669894c3feb982d11b72349_1541836940_2084.jpg
 



4. 관리 설정이 끝나고 나서 글을 보면 아래와 같이 화면을 볼 수 있다.

12448449_1702676243339764_782736789_n.png?_nc_cat=104&amp;_nc_ht=scontent-icn1-1.xx&amp;oh=168ed77064e2dbc8c9425105aa858a8d&amp;oe=5C6DD37A 

한글은 "관리도구", 영어는 "Moderation Tool"이다. 

1222f6389669894c3feb982d11b72349_1541837552_6287.jpg
 


위 화면은 관리 화면 예시이며 앱 아이디는 빨간색 동그라미에 있다.



5. 마지막으로, 앱 아이디 하나로 여러 도메인을 통해 사용할 경우에는 아래와 같이 하면 된다.

  a. 전체 url값을 생성 

  $self_url = $_SERVER['REQUEST_URI'];

$self_urlenc = urlencode($_SERVER['REQUEST_URI']);

$query_string = $_SERVER["QUERY_STRING"];



$serverurl = "http://" . $_SERVER['HTTP_HOST']  ;

$self_url2 =  $serverurl . $self_url;


 b. 해당 값을 코드에 반영.

 <div class="fb-comments" data-href="{self_url2}" data-width="100%"  width="100%" data-numposts="5"></div>

위에서는 data-href 값을 a에서 지정한 변수값으로 넘겼다. 






궁금한 점은 언제든 질문하시길. 

Comments

공유지기 2018.11.13 20:06
4. 전에 설정이 하나 더 있음. 아래 링크로 가서 앱을 선택하여  "설정"에서 "댓글 관리자"에 관리할 사람 아이디나 이름을 넣어 줘야 함. 앱 개설자인데도 추가가 안되어 있는 경우도 있으니 확인이 필요함.

https://developers.facebook.com/tools/comments
사랑방지기 2018.12.05 21:41
아하...


심플한 남자 서류가방
검정색 스웨이드 겨울로퍼
부케레이스반팔탑
HRD 블루마운트 경량 남녀 백팩 캐주얼가방
PGA골프 슈즈백 신발주머니 블랙
체크 패턴 카우보이 모자
플로렌스 뉴욕숄더백 2019신상
남성샌들 가죽샌들
여성방한화
뒤끈 3굽 여성패딩부츠
벙어리장갑 스노우벙어리
딕피스트 학생백팩 DF918

한국 밀크 복사용지 80g A4 (1Box)
칠성운영자
순찰시계용지
칠성운영자
대원 포맥스 1T 90x120 백색
칠성운영자
5000 점보A/F스프링노트(107-10967)
칠성운영자