소셜 플러그인 FAQ

일반적인 질문

웹. iOS 및 Android에 사용 가능한 좋아요, 공유 및 보내기 버튼. 포함(embed)된 게시물 및 페이지 플러그인은 웹에만 사용할 수 있습니다.

  • 웹: 웹에서 소셜 플러그인을 사용하는 경우 Facebook 개발자 계정이 없어도 됩니다.
  • iOS/Android: iOS 또는 Android 앱용 소셜 플러그인을 사용하는 경우 개발자로 등록해야 합니다.
  • 웹: 웹에서 소셜 플러그인을 사용하는 경우 소셜 플러그인을 통합하기 위해 Facebook 앱을 만들지 않아도 됩니다.
  • iOS/Android: iOS 또는 Android 앱 내에서 소셜 플러그인을 사용하는 경우 Facebook 앱을 만들고 앱 식별자에 연결해야 합니다.
  • 웹: 웹에서 소셜 플러그인을 사용하는 경우 검수를 위해 통합을 제출할 필요가 없습니다. 모든 소셜 플러그인을 즉시 사용할 수 있습니다.
  • iOS/Android: iOS 또는 Android 앱 내에서 소셜 플러그인을 사용하는 경우 앱 대시보드의 앱 검수 탭을 통해 검수할 좋아요 버튼의 통합을 제출해야 합니다.

사용자가 Facebook을 방문하고 소셜 플러그인을 사용하여 개발자의 웹사이트를 방문하면 브라우저가 해당 페이지에 Facebook 콘텐츠를 로드하기 위해 Facebook에 정보를 보냅니다. Facebook에서 받는 데이터에는 사용자의 사용자 ID, 사용자가 방문하고 있는 웹사이트, 날짜 및 시간, 기타 브라우저 관련 정보가 포함될 수 있습니다. Facebook은 이 정보 중 일부를 기록하고 Facebook의 제품과 서비스를 개선하고 사람들에게 더 흥미롭고 유용한 광고를 보여주기 위해 사용할 수 있습니다.

HTML5 또는 XFBML 버전을 사용하는 경우 라이브러리를 인스턴스화할 때 언어 코드를 포함해야 합니다.

SDK를 읽어들일 때 개발자의 언어를 사용하도록 js.src 값을 변경합니다. en_US는 개발자의 언어로 대체합니다. 예를 들면 프랑스 개발자는 fr_FR(프랑스어)로 변경합니다.

// Example 1:
'https://connect.facebook.net/fr_FR/sdk.js';

// Example 2:
js.src = "https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.6"; 

지원 언어는 Facebook 언어 XML 파일에서 참조하세요.

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

  • 웹: 웹에서 소셜 플러그인을 사용하는 경우 검수를 위해 통합을 제출할 필요가 없습니다. 모든 소셜 플러그인을 즉시 사용할 수 있습니다.
  • iOS/Android: iOS 또는 Android 앱 내에서 소셜 플러그인을 사용하는 경우 앱 대시보드의 앱 검수 탭을 통해 검수할 좋아요 버튼의 통합을 제출해야 합니다.

소셜 플러그인에 따라 모바일, 태블릿 또는 데스크톱별로 개별 버전을 구현해야 할 수도 있습니다. 구현할 플러그인에 대한 FAQ 또는 '시작하기' 문서를 참조하세요. 참고: 소셜 플러그인의 크기를 조정하기 위해 CSS 미디어 쿼리를 사용하는 것은 권장하지 않습니다.

페이지를 다른 URL로 이동해야 합니다. 좋아요, 공유 또는 댓글을 새 URL로 직접 이동할 수는 없지만 이전 URL을 새 URL의 여러 좋아요 또는 공유 수에 대한 표준 소스로 사용할 수 있습니다. 이 방법에 대한 배경 정보가 아래 설명되어 있습니다.

배경

좋아요 또는 공유 액션에 기여한 URL을 분석할 때 Facebook은 로드된 URL에 대한 표준 URL을 분석하는 과정을 사용합니다. URL이 로드되면 크롤러가 다음 항목을 찾습니다.

  1. HTTP 301 또는 302 리디렉션
  2. 페이지 내 'og:url' 오픈 그래프 태그의 사용
  3. RFC 6596에 설명된 'rel=canonical'의 사용. Facebook의 크롤러는 HTTP 헤더가 아니라 콘텐츠만 지원합니다.

이 방법을 사용한 결과 URL이 원래 로드된 URL과 달라지면 지정된 URL을 원래 URL의 '표준 URL'로 간주합니다. 필요한 경우 크롤러가 리디렉션 체인을 따라 표준 URL을 찾습니다.

모든 좋아요와 공유는 로드된 URL 대신 표준 URL에 연결됩니다.

힌트: Facebook에서 페이지를 크롤링할 때 참조하는 내용을 확인하려면 Facebook의 디버거를 사용하세요.

표준 URL을 제어하면 Facebook에서 새 URL을 이전 URL로 분석하도록 허용하는 한 하나의 URL에서 다른 URL로 콘텐츠를 이동하고 좋아요 및 공유 수를 유지할 수 있습니다. 이 작업은 두 가지 방법 중 하나를 사용하여 수행할 수 있습니다.

이전 URL을 가리키는 새 URL에 'og:url' 태그 추가 (기본)

새 URL에 이전 URL에 대한 링크를 포함해야 합니다. 예를 들어, 새 URL이 'https://example.com/new-url'이고 이전 URL이 'https://example.com/old-url'인 경우 'new-url'에 다음 픽셀 코드를 포함해야 합니다.

<meta property="og:url" content="https://example.com/old-url" />

이 방법을 사용하면 표준 URL이 이전 위치에 있음을 크롤러에 알리므로, 크롤러에서 페이지의 좋아요 및 공유 수를 생성하는 데 이 URL을 사용합니다. 새로운 좋아요 및 공유가 모두 이전 URL에서도 계속 집계됩니다.

또한 이렇게 하려면 이전 URL에서 여전히 오픈 그래프 태그를 사용하여 문서를 렌더링하고 최소한 Facebook의 크롤러에 의해 로드될 때 HTTP 200 응답을 반환해야 합니다. 다른 클라이언트에서 URL을 방문할 때 리디렉션하도록 하려면 Facebook 외의 모든 크롤러 클라이언트에 301 HTTP 응답을 보내야 합니다. 이전 URL에 자신을 가리키는 자체 'og:url' 태그가 포함되어야 합니다.

Facebook의 공유 모범 사례 가이드에서 Facebook의 크롤러를 인식하는 방법을 알아보세요.

이 방법은 'rel=canonical'과 함께 사용할 수 있지만 'og:url'이 우선 사용됩니다.

Facebook의 크롤러를 이전 URL로 리디렉션

이 작업을 수행하는 또 한 가지 방법은 새 URL을 방문할 때 언제든지 Facebook의 크롤러를 이전 URL로 리디렉션하는 것입니다. 위에 설명된 방법에서와 마찬가지로 이전 URL은 오픈 그래프 헤더가 포함된 유효한 문서여야 합니다. 그리고 이전 URL에 리디렉션을 포함하려면 Facebook의 크롤러가 이전 URL을 방문할 때 리디렉션하지 않아야 합니다.

공개 콘텐츠만 포함(embed)할 수 있습니다. 게시물, 페이지 또는 URL의 공개 범위에 제한이 있으면 포함(embed)할 수 없습니다. 이 규칙은 좋아요 버튼, 페이지 플러그인, 포함(embed)된 게시물 및 동영상에 적용됩니다.

특정 콘텐츠를 포함(embed)할 수 있는지 빠르게 테스트하는 방법은 브라우저의 '비밀' 또는 '비공개' 기능을 사용하여 해당 콘텐츠를 읽어들이는 것입니다.

좋아요, 공유 및 보내기 - 일반 FAQ

페이지 좋아요, 공유 또는 보내기 액션에 의해 생성되는 소식은 단순 HTML 페이지를 오픈 그래프 개체로 전환하기 위해 메타 태그를 사용하여 강화할 수 있습니다.

웹사이트의 페이지에서 좋아요, 공유 또는 보내기 버튼을 사용할 계획이면 모범 사례 가이드를 참조하여 소식이 Facebook에 적절히 게시되고 최대한 광범위하게 배포되도록 하세요.

모든 버튼을 앱 또는 웹사이트에 포함하여 사람들이 콘텐츠를 공유할 방법을 선택할 수 있도록 하는 것이 좋습니다.

'ref' 설정에 따라 사용자가 공유 링크에 대한 스트림 소식에서 링크를 클릭할 때 두 매개 변수가 리퍼러 URL에 추가됩니다.

  • 'fb_ref' - 'ref' 매개변수
  • 'fb_source' - 좋아요/공유: 밑줄로 연결되고 클릭이 발생한 스트림 유형('home', 'profile', 'search', 'ticker', 'tickerdialog' 또는 'other') 및 소식 유형('oneline' 또는 'multiline'). 보내기: 클릭이 발생한 소식 유형('message').

예:

http://www.facebook.com/l.php?fb_ref=top_left&fb_source=profile_oneline

분석 소프트웨어를 사용하여 이러한 매개변수를 추적할 수 있습니다.

CSS 'overflow' 속성이 'hidden'으로 설정된 HTML 요소의 에지 가까이에 좋아요 버튼, 공유하기 버튼 또는 보내기 버튼이 배치된 경우, 버튼을 클릭할 때 플라이아웃이 잘리거나 완전히 숨겨질 수 있습니다. 이 문제는 'overflow' 속성을 'visible', 'scroll', 'auto' 등 'hidden'이 아닌 값으로 설정하면 해결할 수 있습니다.

Facebook에서는 어떤 링크 미리 보기 정보를 연결하여 Facebook.com 또는 iOS 및 Android용 Facebook에 표시할지 확인하기 위해 Facebook에 공유된 링크를 스크랩합니다. 이 작업은 속성을 최신 상태로 유지하기 위해 30초마다 실행됩니다. 연결된 페이지는 디버거 도구에 URL이 입력될 때도 스크랩됩니다.

Facebook은 URL의 캐시 헤더를 관찰하며, 기본 설정 순서에 따라 'Expires' 및 'Cache-Control'을 확인합니다. 하지만, 더 긴 시간을 지정해도 Facebook은 30일마다 페이지를 스크랩합니다.

더 많은 오픈 그래프 메타데이터가 포함된 스크래퍼에 페이지를 보는 사람과 다른 페이지의 다른 버전을 게재해야 하는 경우도 있습니다. 이 경우 스크래퍼에서 사용하는 브라우저 에이전트를 타게팅할 수 있습니다.

facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)

예. Facebook 페이지의 URL을 버튼의 'href' 설정에 지정하면 됩니다.

좋아요 버튼 FAQ

소셜 플러그인에는 무결성 및 스팸 방지 보호 기능이 포함되어 있으며 이 기능은 그중 하나입니다. 출시하기 전에 좋아요 버튼을 많이 테스트한 경우 의도치 않게 이 보호 기능을 트리거했을 수도 있습니다. 또한 인터넷의 특정 도메인에 스팸이 포함되어 있을 가능성이 높으며, 따라서 확인 단계가 더 자주 표시됩니다.

이에 따라 좋아요 버튼 절차에 확인 단계가 하나 더 추가되지만 여러 사용자가 좋아요를 별도로 확인하면 더 이상 표시되지 않으며 일반적인 좋아요 버튼만 표시됩니다.

표시되는 숫자는 다음과 같은 수의 합입니다.

  • URL의 좋아요 수
  • URL의 공유 수(여기에는 Facebook으로 다시 연결되는 링크의 복사/붙여넣기가 포함됩니다.)
  • URL에 대한 Facebook 소식의 좋아요 및 댓글 수

공유하기 버튼을 단독으로 표시하기 위한 코드를 가져오려면 공유하기 버튼 문서를 참조하세요.

옵션은 다음과 같습니다.

레이아웃 기본 크기

standard

최소 너비: 225픽셀
기본 너비: 450픽셀
높이: 35픽셀(사진 제외) 또는 80픽셀(사진 포함)

box_count

최소 너비: 55픽셀
기본 너비: 55픽셀
높이: 65픽셀

button_count

최소 너비: 90픽셀
기본 너비: 90픽셀
높이: 20픽셀

button

최소 너비: 47픽셀
기본 너비: 47픽셀
높이: 20픽셀

공유하기 버튼 FAQ

표시되는 숫자는 다음과 같은 수의 합입니다.

  • URL의 좋아요 수
  • URL의 공유 수(여기에는 Facebook으로 다시 연결되는 링크의 복사/붙여넣기가 포함됩니다.)
  • URL에 대한 Facebook 소식의 좋아요 및 댓글 수

공유하기 버튼을 단독으로 표시하기 위한 코드를 가져오려면 공유하기 버튼 문서를 참조하세요.

예. Facebook은 공유하기 버튼을 사용하여 사이트 사용자에게 가장 간단하고 일관된 환경을 제공할 것을 권장하지만 JavaScript SDK 또는 URL 링크를 사용하여 호출할 수 있는 독립형 대화 상자를 제공합니다. 공유 대화 상자를 사용하려면 Facebook의 가이드를 읽어보세요.

댓글 플러그인 FAQ

  • 구두점을 추가합니다(예: 문장 끝의 마침표).
  • 여분의 공백을 잘라냅니다.
  • 속어를 확장합니다(예: plz가 please가 됩니다).
  • 구두점 후에 공백을 추가합니다(예: Hi,Cat이 Hi, Cat이 됩니다).
  • 일반적인 문법 오류를 수정합니다(예: dont를don't로 수정합니다).

플러그인의 설정 섹션에서 문법 필터를 활성화할 수 있습니다.

모든 URL에 남긴 댓글은 그래프 API를 통해 액세스할 수 있습니다. 다음에 HTTP GET 요청을 하면 됩니다.

https://graph.facebook.com/v2.6/?fields=og_object{comments}
  &id=<YOUR_URL>
  &access_token=<YOUR_TOKEN>

자세한 내용은 댓글 관리 가이드를 참조하세요. 'fb:admins' 메타 속성을 사용하여 댓글 관리자 리스트를 설정할 수 없는 경우 이 앱의 관리 도구 설정에서 'fb:app_id'를 설정하고 댓글 관리자 리스트를 업데이트할 수 있습니다.