페이지 플러그인

페이지 플러그인을 사용하면 웹사이트에 쉽게 Facebook 페이지를 포함(embed)하고 홍보할 수 있습니다. Facebook에서처럼 방문자가 사이트를 나가지 않은 상태에서 페이지를 공유하고 좋아요를 클릭할 수 있습니다.

설정

위의 설정 외에도 다음을 변경할 수 있습니다.

설정 HTML5 속성 설명 기본값

href

data-href

Facebook 페이지의 URL

없음

width

data-width

플러그인의 픽셀 너비입니다. 최소값은 180이고 최대값은 500입니다.

340

height

data-height

플러그인의 픽셀 높이입니다. 최소값은 70입니다.

500

tabs

data-tabs

표시할 탭(예: timeline, events, messages)입니다. 쉼표로 구분된 리스트를 사용하여 여러 탭(예: timeline, events)을 추가합니다.

timeline

hide_cover

data-hide-cover

헤더에서 커버 사진 숨기기

false

show_facepile

data-show-facepile

친구가 좋아요를 클릭하면 프로필 사진 표시

true

hide_cta

data-hide-cta

행동 유도 버튼에 대한 맞춤 호출 숨기기(사용 가능한 경우)

false

small_header

data-small-header

작은 헤더를 대신 사용

false

adapt_container_width

data-adapt-container-width

컨테이너 너비에 맞춤

true


사용 중단된 속성

  • data-show-posts 속성은 사용이 중단되었습니다. tabs/data-tabs 속성과 timeline 값을 사용하여 페이지 타임라인의 게시물을 표시합니다.

페이지 플러그인을 웹사이트에 추가

페이지 플러그인의 표준 구성에는 헤더와 커버 사진만 포함됩니다. 이 크기는 사이드바 상단과 같은 작은 공간에서 페이지를 홍보하는 데 이상적입니다.

<div class="fb-page" 
  data-href="https://www.facebook.com/facebook"
  data-width="380" 
  data-hide-cover="false"
  data-show-facepile="false"></div>

행동 유도

페이지에 맞춤 행동 유도 버튼이 있으면 이 버튼이 기존 행동 유도 버튼(공유 버튼) 대신 표시됩니다.

플러그인의 너비가 280픽셀 미만인 경우에는 번역별로 디자인이 정렬되지 않는 문제를 방지하기 위해 기본 공유 버튼이 표시됩니다.

페이지 탭: 타임라인, 이벤트, 메시지

이제 플러그인에 타임라인, 이벤트, 메시지 탭이 생깁니다.

  • 타임라인 탭: Facebook 페이지 타임라인에 올라온 최신 게시물을 표시합니다.
  • 이벤트 탭: 사용자가 페이지 이벤트를 팔로우하고 플러그인의 이벤트 소식을 받아볼 수 있습니다.
  • 메시지 탭: 사용자가 개발자의 웹사이트에서 개발자의 페이지로 메시지를 보낼 수 있습니다. 사용자는 로그인해야 이 기능을 사용할 수 있습니다.

페이지에서 메시지 기능 사용

Facebook 페이지에서 메시지 기능을 사용하려면 페이지 Settings로 이동합니다. Messages 행에서 메시지 보내기 버튼을 표시하여 내 페이지에 연락할 수 있도록 허용(직접 링크: https://www.facebook.com/{your-page-name}/settings/?tab=settings&section=messages&view)을 선택합니다.

여러 탭 추가하기

data-tabs 속성에서 쉼표로 구분된 리스트를 사용하여 다음과 같이 여러 탭을 추가합니다.

<div class="fb-page" 
  data-tabs="timeline,events,messages"
  data-href="https://www.facebook.com/YoloBookStore"
  data-width="380" 
  data-hide-cover="false"></div>

단일 탭

timeline, events, messages 중 하나를 표시하는 단일 탭만 추가할 수도 있습니다.

<div class="fb-page" 
  data-tabs="events"
  data-href="https://www.facebook.com/YoloBookStore"
  data-width="380"></div>

조정 가능 너비

기본적으로 플러그인은 레이아웃 변경에 유용하도록 페이지를 로딩할 때 상위 컨테이너의 width(최소 180px/최대 500px)에 맞게 조정합니다.

<div style="width: 190px;">
  <!-- Page plugin's width will be 190px -->
  <div class="fb-page" data-href="{url}" data-width="420"></div>
</div>

상위 요소의 width가 페이지 플러그인의 width보다 큰 경우 data-width에 정의된 값을 유지합니다.

<div style="width: 600px;">
  <!-- Page plugin's width will be 500px -->
  <div class="fb-page" data-href="{url}" data-width="500"></div>
</div>

플러그인은 180px보다 작지 않습니다.

<div style="width: 100px;">
  <!-- Page plugin's width will be 180px -->
  <div class="fb-page" data-href="{url}" data-width="320"></div>
</div>

조정 가능 너비는 플러그인 컨테이너 너비에 맞게 조정을 선택 취소하여 비활성화할 수 있으며 상위 컨테이너와 상관없이 지정된 너비로 플러그인이 렌더링됩니다.

동적인 크기 조정 없음

페이지 플러그인은 반응형의 유연한 정적 레이아웃으로 작동합니다. 미디어 쿼리나 다른 방법을 사용하여 상위 요소의 width를 설정할 수 있지만 다음이 적용됩니다.

  • 플러그인에서 페이지를 로딩할 때width를 결정합니다.
  • 페이지 로딩 후 상자 모델의 변경 사항에 반응하지 않습니다.

창의 크기를 조정할 때 플러그인의 width를 조정하려는 경우 수동으로 플러그인을 다시 렌더링해야 합니다.

친구의 얼굴 표시

숫자는 사용자의 프로필 이미지를 함께 사용하여 페이지에 대해 좋아요를 설정한 사람을 표시합니다. 페이지를 방문한 사용자는 페이지에 좋아요를 설정한 친구 수와 함께 프로필 사진도 볼 수 있습니다.

이 옵션은 구성 도구에서 Show Friend's Faces를 선택하여 활성화할 수 있습니다.

<div class="fb-page"
  data-href="https://www.facebook.com/imdb" 
  data-width="340"
  data-hide-cover="false"
  data-show-facepile="true"></div>

개인정보 제한 페이지

개인정보보호 관련 제한 사항이 포함된 Facebook 페이지는 포함(embed)할 수 없습니다.

언어 변경

Facebook JavaScript SDK의 현지화된 버전을 로딩하여 페이지 플러그인의 언어를 변경할 수 있습니다. SDK를 읽어들일 때 개발자의 언어를 사용하도록 js.src 값을 변경합니다. en_US를 개발자의 언어로 대체합니다. 예를 들면 러시아 개발자는 ru_RU(러시아어)로 변경합니다.

예시
js.src = "https://connect.facebook.net/ru_RU/sdk.js#xfbml=1&amp;version=v2.5";

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