소셜 플러그인 FAQ
일반적인 질문
좋아요, 공유 및 보내기 버튼은 웹, iOS, Android에서 사용할 수 있습니다. 포함(embed)된 게시물과 페이지 플러그인은 웹에서만 사용이 가능합니다.
- 웹: 웹에서 소셜 플러그인을 사용하고 있을 경우 Facebook 개발자 계정이 있어야 앱 ID를 가져올 수 있습니다.
- iOS/Android: iOS 또는 Android 앱에서 소셜 플러그인을 사용하고 있을 경우 Facebook 개발자 계정이 있어야 앱 ID를 가져올 수 있습니다.
- 웹: 웹에서 소셜 플러그인을 사용하고 있을 경우 Facebook 개발자 계정이 있어야 앱 ID를 가져올 수 있습니다.
- iOS/Android: iOS 또는 Android 앱에서 소셜 플러그인을 사용하고 있을 경우 Facebook 개발자 계정이 있어야 앱 ID를 가져올 수 있습니다.
- 웹: 웹에서 소셜 플러그인을 사용하고 있다면 검수를 위해 통합을 제출하지 않아도 됩니다. 즉시 모든 소셜 플러그인을 사용할 수 있습니다.
- iOS/Android: iOS 또는 Android 앱에서 소셜 플러그인을 사용하고 있다면 앱 대시보드의 앱 검수 탭에서 검수를 위해 좋아요 버튼의 통합을 제출해야 합니다.
사용자가 Facebook을 방문해서 소셜 플러그인으로 여러분의 웹사이트를 방문했다면 해당 페이지에 Facebook 콘텐츠를 읽어들이기 위해 브라우저가 Facebook에 정보를 보냅니다. Facebook이 수신한 데이터에는 사용자의 사용자 ID, 사용자가 방문하는 웹사이트, 날짜와 시간, 기타 브라우저 관련 정보 등이 포함될 수 있습니다. 이 정보 중 일부를 기록하여 제품 및 서비스를 개선하고 사용자에게 더욱 흥미롭고 유익한 광고를 보여주기 위해 사용할 수 있습니다.
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을 읽어들이면 크롤러가 다음을 찾습니다.
- HTTP 301 또는 302 리디렉션
- 페이지에서의
og:url오픈 그래프 태그 사용 - RFC 6596에 설명한 방법으로
rel=canonical사용 (Facebook의 크롤러는 HTTP 헤더가 아니라 콘텐츠만 지원합니다.)
위의 방법을 사용했을 때 원래 읽어들인 URL과 다른 URL이 나온다면 지정된 해당 URL이 원래 URL의 "표준 URL"로 간주됩니다. 필요한 경우 크롤러는 연속된 리디렉션을 따라 표준 URL을 찾아내기도 합니다.
모든 좋아요와 공유는 읽어들인 URL이 아니라 표준 URL로 연결됩니다.
예시
힌트: 디버거를 사용하여 페이지를 크롤링할 때 Facebook이 무엇을 보는지 확인합니다.
표준 URL을 제어하면 콘텐츠를 하나의 URL에서 다른 URL로 옮기고 좋아요와 공유 수를 유지할 수 있습니다. 단, Facebook이 새 URL을 이전 URL로 변환하는 것을 허용해야 합니다. 여기에는 아래의 두 가지 방법 중 하나를 사용할 수 있습니다.
og:url 태그를 이전 URL을 가리키는 새 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에 계속 집계됩니다.
이 경우에는 적어도 Facebook 크롤러가 불러들이는 시점에 이전 URL이 오픈 그래프 태그가 포함된 문서를 여전히 렌더링하고 있고 HTTP 200 응답을 반환해야 합니다. 다른 클라이언트가 이 URL에 들어왔을 때 리디렉션되기를 원한다면 Facebook 외의 다른 모든 크롤러 클라이언트에 301 HTTP 응답을 보내야 합니다. 이전 URL에는 그 URL 자체를 가리키는 og:url 태그가 포함되어야 합니다.
Facebook 크롤러를 알아보는 방법은 공유 모범 사례 가이드를 참조하세요.
이 방법은 rel=canonical과도 사용할 수 있지만 og:url을 권장합니다.
Facebook 크롤러를 이전 URL로 리디렉션
또 다른 방법으로는 Facebook 크롤러가 새 URL을 방문할 때마다 이전 URL로 리디렉션하는 것이 있습니다. 위에서 설명한 방법과 마찬가지로 이전 URL은 오픈 그래프 헤더가 있는 유효한 문서여야 합니다. 이전 URL에서의 리디렉션을 포함하고 싶다면 Facebook 크롤러가 이전 URL을 방문했을 때 리디렉션되어서는 안 됩니다.
공개 콘텐츠만 포함할 수 있습니다. 게시물, 페이지 또는 URL에 공개 범위 제한이 걸려 있으면 포함할 수 없습니다. 이 규칙은 좋아요 버튼, 페이지 플러그인, 포함(embed)된 게시물 및 동영상에 적용됩니다.
어떤 콘텐츠가 포함 가능한지 간단히 테스트해보는 방법은 브라우저의 'Incognito' 또는 '비공개' 기능을 사용하여 읽어들이는 것입니다.
좋아요, 공유 및 보내기 - 일반적인 FAQ
앱 또는 웹사이트에 모든 버튼을 포함해서 사용자가 콘텐츠를 공유할 방법을 선택할 수 있게 하는 것이 좋습니다.
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 속성을 hidden 외의 다른 값(예: visible, scroll, auto)으로 설정하면 수정할 수 있습니다.
Facebook이 Facebook으로 공유된 링크를 스크랩하는 이유는 Facebook.com 또는 iOS 및 Android용 Facebook에서 어느 링크 미리 보기 정보를 표시할지 알아내기 위함입니다. 이 과정은 속성이 최신인지 확인하기 위해 30일마다 실행합니다. URL을 디버거 도구에 입력하면 링크된 페이지도 스크랩됩니다.
Facebook은 URL의 캐시 헤더를 준수합니다. 선호하는 순서대로 Expires 및 Cache-Control을 참조할 것입니다. 그러나 더 오랜 기간을 지정하더라도 Facebook에서는 30일마다 한 번씩 페이지를 스크랩할 것입니다.
경우에 따라 페이지를 보는 사용자에게 표시하는 것과는 다른 버전의 페이지를 스크래퍼(더 많은 오픈 그래프 메타데이터 포함)에게 제공하고 싶을 수도 있습니다. 이 경우에는 스크래퍼가 사용한 브라우저 에이전트를 타게팅할 수 있습니다.
facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)
예, 버튼의 href 설정에서 Facebook 페이지의 URL을 지정하기만 하면 됩니다.
좋아요 버튼 FAQ
소셜 플러그인에는 무결성과 스팸 차단을 위한 안전 장치가 내장되어 있는데, 이 기능도 그중 하나입니다. 출시하기 전에 좋아요 버튼을 아주 많이 테스트했다면 의도치 않게 이런 안전 장치를 작동시킬 수 있습니다. 또한 인터넷상의 일부 도메인은 스팸을 포함할 가능성이 커서 확인 단계가 자주 나타나기도 합니다.
이 확인 단계는 좋아요 버튼을 처리하는 과정에 한 단계를 추가합니다. 하지만 여러 사용자가 좋아요 버튼을 누른 것을 각각 확인하고 난 후에는 더 이상 나타나지 않고 일반적인 좋아요 버튼만 나타납니다.
표시된 숫자는 다음의 합계를 나타냅니다.
- URL에 대한 좋아요 개수
- URL 공유 수(Facebook으로 돌아가는 링크 복사/붙여넣기 포함)
- Facebook 스토리에서 해당 URL에 대한 좋아요 및 댓글 수
옵션은 다음과 같습니다.
| 레이아웃 | 기본 크기 |
|---|---|
| 최소 너비: 225픽셀 |
| 최소 너비: 55픽셀 |
| 최소 너비: 90픽셀 |
| 최소 너비: 47픽셀 |
공유하기 버튼 FAQ
표시된 숫자는 다음의 합계를 나타냅니다.
- URL에 대한 좋아요 개수
- URL 공유 수(Facebook으로 돌아가는 링크 복사/붙여넣기 포함)
- Facebook 스토리에서 해당 URL에 대한 좋아요 및 댓글 수
예, 공유하기 버튼을 사용하여 사이트 사용자에게 최대한 단순하고 일관적인 경험을 제공하는 것을 권장하지만 JavaScript SDK 또는 URL 링크를 사용하여 호출할 수 있는 별도의 대화 상자도 제공합니다. 공유 대화 상자 사용 가이드를 참조하세요.
댓글 플러그인 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>