댓글 플러그인

댓글 플러그인을 사용하면 사용자가 Facebook 계정을 사용하여 사이트의 콘텐츠에 대해 댓글을 달 수 있습니다. 또한 Facebook에서 친구(및 친구의 친구)와 댓글 달기 활동을 공유하도록 선택할 수 있습니다. 댓글 플러그인에도 댓글 관리 도구가 포함됩니다.

유럽 지역의 소셜 플러그인 변경 사항

유럽 지역에서 Facebook 제품 사용자에게 표시되는 업데이트된 쿠키 동의 프롬프트로 인해 소셜 플러그인에 다소 변화가 생길 수 있습니다. 유럽 지역 사용자의 경우 더 이상 '좋아요'와 '댓글' 소셜 플러그인이 지원되지 않습니다. 단, 1) Facebook 계정에 로그인되어 있고 2) '앱과 웹사이트 쿠키' 제어에 동의한 경우는 예외입니다. 두 가지 요구 사항을 모두 충족하는 사용자는 '좋아요' 또는 '댓글' 버튼 등의 플러그인을 보고 상호작용할 수 있습니다. 위의 두 가지 요구 사항 중 하나라도 충족하지 않는 경우 사용자는 더 이상 플러그인을 볼 수 없습니다.

유럽 지역은 다음과 같은 특정 국가들로 구성됩니다.

  • 유럽연합(EU): 오스트리아, 벨기에, 불가리아, 크로아티아, 키프로스 공화국, 체코 공화국, 덴마크, 에스토니아, 핀란드, 프랑스, 독일, 그리스, 헝가리, 아일랜드, 이탈리아, 라트비아, 리투아니아, 룩셈부르크, 몰타, 네덜란드, 폴란드, 포르투갈, 루마니아, 슬로바키아, 슬로베니아, 스페인, 스웨덴

  • 유럽연합 회원이 아니지만 EEA 단독/EFTA 또는 관세 동맹 회원국: [EEA 단독/EFTA] 아이슬란드, 리히텐슈타인, 노르웨이, 스위스. [EU 관세 동맹] 모든 채널 제도, 맨 섬, 모나코. 키프로스의 영국 주권 영토. [유럽 관세 동맹] 안도라, 산마리노, 바티칸 시국

  • 유럽연합 회원이 아니지만 유럽 최외곽 지역(OMR): 마르티니크, 마요트, 과들루프 섬, 프랑스령 기아나, 레위니옹, 생 마르탱, 마데이라, 아조레스, 카나리아 제도
  • 영국(모든 영국 제도)

단계별 안내

1. URL 또는 페이지 선택하기

댓글 플러그인을 사용할 웹사이트의 URL을 선택합니다.

2. 코드 구성 도구

아래 코드 구성 도구에 URL을 복사하여 붙여넣습니다. 댓글 플러그인의 width 또는 기본적으로 표시할 게시물 수(num_posts)와 같은 설정을 조정할 수 있습니다. 코드 가져오기 버튼을 클릭하여 댓글 플러그인 코드를 생성합니다.

3. 픽셀 코드 복사하여 붙여넣기

댓글을 구현할 웹사이트나 웹 페이지의 HTML에 픽셀 코드를 복사하여 붙여넣습니다.

댓글 플러그인 코드 생성기

댓글을 남길 URL
너비
게시물 수

설정

위의 코드 구성 도구에서는 댓글 플러그인에 가능한 모든 설정의 일부만 사용합니다. 다음과 같은 설정도 변경할 수 있습니다.

설정 HTML5 속성 설명 기본값

colorscheme

data-colorscheme

댓글 플러그인에서 사용하는 색구성입니다. 'light' 또는 'dark'일 수 있습니다.

'light'

href

data-href

플러그인에 게시된 댓글이 영구적으로 연결될 절대 URL입니다. 댓글 플러그인을 사용해 게시한 댓글과 관련하여 Facebook에서 공유한 모든 소식이 이 URL에 링크됩니다.

현재 URL

lazy

data-lazy

true로 설정하면 loading="lazy" iframe 속성을 설정하여 브라우저의 지연 로딩 메커니즘을 사용합니다. 플러그인이 뷰포트와 가깝지 않아서 전혀 보이지 않을 수 있는 경우 브라우저가 플러그인을 렌더링하지 않는 효과가 있습니다. true 또는 false(기본값)를 선택할 수 있습니다.

false

mobile

data-mobile

모바일에 최적화된 버전의 표시 여부를 지정하는 boolean 값입니다.

자동 감지

num_posts

data-numposts

기본적으로 표시할 댓글 수입니다. 최솟값은 1입니다.

10

order_by

data-order-by

댓글을 표시할 때 사용하는 순서입니다. 'reverse_time' 또는 'time'이 될 수 있습니다. 다른 순서 유형은 댓글 정렬 섹션에 나와 있습니다.

'reverse-time'

width

data-width

웹페이지의 댓글 플러그인 너비입니다. 이 값은 유동 너비의 비율(예: 100%) 또는 픽셀값일 수 있습니다. 댓글 플러그인의 모바일 버전은 너비 매개변수를 무시하는 대신 유동 너비가 100%입니다. 댓글 플러그인에서 지원하는 최소 너비는 320px입니다.

550

댓글 정렬

댓글 플러그인의 오른쪽 상단에 있는 메뉴를 사용하여 시간별로 댓글의 순서를 지정할 수 있습니다.

data-order-by 속성에 다음 세 값 중 하나를 적용하여 기본 순서를 정의할 수 있습니다.

reverse_time(기본값)

댓글은 게시된 순서와 반대로 표시되며 최신 댓글이 맨 위에 표시되고 가장 오래된 댓글이 맨 아래에 표시됩니다.

time

댓글은 게시된 순서대로 표시되며, 가장 오래된 댓글이 맨 위에 표시되고 최신 댓글이 맨 아래에 표시됩니다.

언어 변경

Facebook SDK for JavaScript의 현지화된 버전을 읽어들여 댓글 플러그인의 언어를 변경할 수 있습니다. SDK를 읽어들일 때 개발자의 언어를 사용하도록 src 값을 변경합니다. 예를 들어 en_US를 자신의 언어로 바꿀 수 있습니다(예: 프랑스어(프랑스)의 경우 fr_FR).

src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1"

다른 언어에서도 사용할 수 있도록 소셜 플러그인의 너비를 조정해야 할 수도 있습니다. 현지화 및 번역에 대해 자세히 알아보세요.

댓글 관리

댓글 플러그인에는 강력한 관리 도구가 있습니다. 이 도구를 사용하면 커뮤니티 관리팀에서 보다 쉽고 빠르게 여러 댓글을 한 번에 관리할 수 있습니다.

설정

댓글 관리 도구를 사용하려면 관리 설정 안내를 완료해야 합니다.

관리 설정 안내

댓글 플러그인을 통해 남긴 댓글에 답글을 달기 위해 그래프 API를 사용할 수 없습니다.


대시보드

관리 도구로 이동하는 방법은 다음 두 가지입니다.

1. 앱 기반 관리 보기:Developers.facebook.com/tools/comments로 이동합니다. 모든 Facebook 앱 리스트가 표시되므로 각 앱과 연결된 모든 댓글을 관리할 수 있습니다. 댓글 플러그인과 함께 Facebook 앱을 사용하지 않으면 이 보기를 사용할 수 없습니다.

2. 페이지 기반 관리 보기: 댓글 상자 옆의 관리 도구 링크를 클릭합니다(아래 스크린샷 참조). 이 보기는 이 웹페이지(URL)에 게시된 댓글만 표시합니다.

관리 보기

아래 스크린샷에는 두 가지 관리 보기가 모두 표시됩니다. 앱 기반 관리 보기를 사용하는 경우 메뉴를 사용하여 앱 간에 전환할 수 있습니다.

관리 테이블에서 해당 상태에 따라 댓글을 승인하거나 숨길 수 있습니다. 여러 댓글의 상태를 변경하려면 왼쪽 열의 확인란을 사용합니다.

1. 페이지 기반 관리 보기

이 관리 보기에서는 특정 URL의 모든 댓글이 표시됩니다.

2. 앱 기반 관리 보기

이 관리 보기에서는 앱의 모든 댓글이 표시됩니다.

3. 플래그가 지정된 큐

사용자나 Facebook에서 플래그를 지정한 댓글이 여기에 표시됩니다. 이 리스트의 댓글은 앱 설정 및 댓글 보고 방식에 따라 공개하거나 숨길 수 있습니다.

설정

앱마다 맞춤 설정을 정의할 수 있습니다. 설정 버튼(도구의 오른쪽 상단에 위치)을 사용하여 설정 대화 상자를 엽니다.


댓글 관리자

댓글 관리자가 되도록 다른 사용자를 승격시킬 수 있습니다. 입력란에 친구의 이름을 입력하기 시작하면, 자동 완성 검색이 표시되어 댓글 관리자가 되게 할 사람을 손쉽게 선택할 수 있습니다.


댓글 정렬 기준

댓글 정렬 방법도 제어할 수 있습니다. 댓글 정렬에 대해 자세히 알아보세요.


댓글 관리

새 댓글의 기본 공개 범위를 변경할 수 있습니다. 예를 들어 새 댓글을 모두 승인하고자 할 수 있습니다. 댓글이 승인되지 않으면 댓글 관리자가 댓글을 승인할 때까지 댓글 작성자에게만 댓글이 표시됩니다.

다음과 같이 3가지 관리 모드가 있습니다.

전체 공개

모든 댓글이 공개됩니다. 이러한 댓글은 검수 탭에도 표시됩니다.

비공개

모든 댓글을 숨깁니다.

차단된 사용자

차단된 사용자 탭에서 댓글 관리자가 차단된 사용자를 검색할 수 있습니다. 차단된 사용자가 새 댓글을 게시하면 이 댓글은 자동으로 공개 범위가 제한되며 검수 탭에 표시됩니다.


URL 설정

스레드 닫기

댓글 플러그인을 사용하는 모든 URL에서 댓글 스레드를 닫을 수 있습니다. 그러면 사용자가 해당 웹 페이지의 토론에 새 댓글을 추가할 수 없습니다. URL 설정 메뉴에서 스레드를 닫을 수 있습니다.

자동 닫기 덮어쓰기

자동 닫기를 사용한 경우 닫은 스레드를 덮어쓰면 댓글을 위해 스레드가 다시 열립니다. 이 작업을 수행하려면 URL 설정으로 이동하여 자동 닫기 덮어쓰기를 켭니다. 그런 다음, 관리 중인 URL에 대해 원하는 닫기 상태를 설정합니다.

관리 설정

관리 도구를 사용하려면 Facebook 계정 또는 Facebook 앱을 댓글 플러그인 구현에 연결해야 합니다.

Facebook 앱을 사용하여 설정(기본)

사이트에 댓글 상자가 여러 개인 경우 Facebook 앱 ID를 관리 엔티티로 지정하는 것이 좋습니다. 그러면 앱의 모든 관리자가 댓글을 관리할 수 있습니다. 그러면 앱 ID에서 관리하는 모든 플러그인의 댓글을 모두 쉽게 검토할 수 있는 Facebook의 댓글 관리자 인터페이스를 사용할 수 있습니다.

<meta property="fb:app_id" content="&#123;YOUR_APP_ID&#125;" />

댓글 관리자 설정을 사용하여 추가한 사람 외에 앱의 모든 관리자도 댓글을 관리할 수 있지만, 알림이 활성화된 경우 댓글 관리자만 새로운 댓글에 대한 알림을 받을 수 있습니다.

사이트에 여러 댓글 상자를 구현하고 앱 ID를 지정하여 서로 연결한 경우 선택한 관리 설정이 모든 댓글 상자에 적용됩니다.

예를 들어 관리 설정을 공개 범위 제한됨으로 변경하면 동일한 앱 ID의 모든 댓글 상자에 영향을 미칩니다. 사이트의 여러 다른 영역에 다양한 관리 설정을 적용해야 하는 경우 두 개 이상의 앱 ID를 사용해야 합니다. 그런 다음, 댓글 상자의 각 그룹에 서로 다른 관리 설정을 적용할 수 있습니다.

fb:app_id 또는 fb:admins 중 하나만 지정할 수 있습니다.

관리자로 Facebook 계정 할당

Facebook 계정을 댓글 플러그인 구현의 관리자로 지정하려면 댓글 플러그인을 사용하는 모든 웹페이지의 <head> 섹션에 다음 메타 태그를 포함하기만 하면 됩니다.

<meta property="fb:admins" content="&#123;YOUR_FACEBOOK_USER_ID&#125;"/>

여러 댓글 관리자를 추가하려면 각각 하나의 Facebook ID를 사용하는 둘 이상의 요소를 추가합니다.

<meta property="fb:admins" content="&#123;YOUR_FACEBOOK_USER_ID_1&#125;"/>
<meta property="fb:admins" content="&#123;YOUR_FACEBOOK_USER_ID_2&#125;"/>

댓글 카운터

fb:comments-count 값을 사용하면 웹페이지의 <span> 요소에 지정된 URL에 대한 댓글 수가 표시됩니다. 그러면 CSS를 사용하여 나머지 웹사이트와 일치하도록 이 <span> 요소의 스타일을 지정할 수 있습니다. 참고: 이 기능은 현재 HTML5에서 사용할 수 없습니다.

예를 들어 example.com의 댓글 수를 표시하려면 다음 코드를 사용합니다.

<span class="fb-comments-count" data-href="https://example.com/"></span>
awesome comments 

그러면 다음 내용이 표시됩니다.

69391 awesome comments

지정된 URL에 남긴 댓글 수는 그래프 API를 통해 액세스할 수 있습니다. 예를 들어 URL 노드의 share 필드에서 comment_count 속성을 통해 사용할 수 있는 example.com의 댓글 수는 다음과 같습니다.

https://graph.facebook.com/v2.4/?fields=share{comment_count}&amp;id=<YOUR_URL>

Webhooks

새 댓글이 게시되면 서버의 스크립트에 알리도록 Webhooks를 설정할 수 있습니다. 시작하려면 다음 단계를 따르세요.

  1. 앱 대시보드로 이동합니다.
  2. 왼쪽 탐색 메뉴에서 '+ 제품 추가'를 클릭합니다.
  3. Webhooks 섹션에서 '설정'을 클릭합니다.
  4. 드롭다운에서 '앱'을 선택합니다.
  5. '이 주제 받아보기' 버튼을 클릭합니다.
  6. 대화 상자에 알림을 받을 스크립트의 URL을 입력합니다(예: https://example.org/mywebhook.php).
  7. 토큰(선택한 문자열)을 입력합니다. 토큰은 확인을 위해 스크립트에 전송됩니다.
  8. 마지막으로 '확인 및 저장' 버튼을 클릭하면 완료됩니다.

단, 완료하기 전에 Webhooks 설명서에서 스크립트를 구현하는 방법에 대한 상세 정보를 먼저 살펴보는 것이 좋습니다.

다음은 mywebhook.php가 PHP에 표시되는 간단한 예입니다.

확인 시작:

<?php
if ($_GET['hub_verify_token'] === 'make-up-a-token') {
  echo $_GET['hub_challenge'];
}

make-up-a-token은 위 7단계에서 입력한 것과 같은 문자열입니다.

그런 다음, 모든 댓글을 게시되는 대로 로깅하면 됩니다.

file_put_contents(
  'log.txt',
  "\n" . file_get_contents('php://input'),
  FILE_APPEND
);
?>

PHP에서 $_POST는 작동하지 않습니다. file_get_contents('php://input')가 필요합니다.

Webhooks를 확인하고 나면 앱 대시보드의 Webhooks 섹션에 'plugin_comment' 및 'plugin_comment_reply'가 표시됩니다.

'테스트'를 클릭하여 샘플 응답으로 구현을 다시 확인한 다음 '받아보기'를 클릭하여 게시합니다.

응답에 대해 자세한 내용은 Webhooks 참조 설명서를 참조하세요.