페이지 플러그인

페이지 플러그인을 사용하면 웹사이트에서 전체 공개 Facebook 페이지를 간편하게 퍼가고 홍보할 수 있습니다. Facebook에서처럼 방문자가 사이트를 나가지 않은 상태에서 페이지를 공유하고 좋아요를 클릭할 수 있습니다. 국가 또는 나이 등의 제한이 없는 모든 페이지에 페이지 플러그인을 사용할 수 있습니다.

설정

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

사용 중단된 속성

• 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 페이지는 퍼갈 수 없습니다.

언어 변경

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

예

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

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