티스토리 강좌 / 페이스북 페이지 플러그인 사이드바에 넣는 방법

모양 정하기

페이스북 페이지 플러그인 페이지로 이동합니다.

옵션을 변경하면 미리보기에서 어떻게 나오는지 확인할 수 있습니다. 주요 설정은 다음과 같습니다.

아무 것도 입력하지 않거나 timeline, events, messages를 넣을 수 있습니다.

너비

아무 값도 넣지 않으면 기본값이 적용됩니다. 가장 좋은 값은 페이지 플러그인이 들어갈 자리의 너비입니다.

만약 반응형 스킨이라면 페이지 플러그인이 들어갈 자리의 최대 너비로 설정하면 되고, 잘 모르겠다면 최댓값인 500으로 설정하는 것이 좋습니다.

플러그인 컨테이너 너비에 맞춤

반응형 스킨이라면 이 옵션을 체크합니다.

코드 복사

원하는 모양을 만든 후 [코드 받기]를 클릭하면 다음과 같은 창이 생깁니다.

Javascript SDK와 iFrame 두가지 방식의 코드가 제공됩니다.

둘 다 같은 내용을 출력하지만, iFrame의 경우 반응형으로 잘 작동하지 않습니다. 반응형 스킨이라면 Javascript SDK 코드를 사용하는 것이 좋습니다.

2단계 코드는 skin.html의 <body> 태그 바로 뒤에 넣는 것이 좋다고 써있지만, 3단계 코드와 같이 사이드바에 넣어도 됩니다.

배너 출력 플러그인 활성화

배너 출력 플러그인이 활성화되어 있지 않다면 활성화시킵니다.

코드 넣기

사이드바 설정에서 [HTML 배너출력]을 원하는 위치로 이동시킨 다음 [편집]을 클릭합니다.

적당히 이름을 붙이고 HTML 소스에 코드를 붙여넣습니다.

2단계 코드를 skin.html에 넣었다면 3단계 코드만, 그렇지 않다면 2단계 코드와 3단계 코드를 차례대로 전부 넣으면 됩니다.

코드를 넣은 후 [확인]을 클릭하고...

오른쪽 위의 [저장]을 클릭하면 블로그에 적용됩니다.

결과 확인

PC와 모바일에서 잘 출력되는지 확인합니다.

여백 조정

스킨 디자인에 따라서 여백이 이상할 수 있습니다. 그럴 경우 코드를 다음처럼 넣습니다.

<div style="margin: 20px 0px 20px 0px">
  facebook page plugin code
</div>

숫자는 디자인에 맞게 적절히 변경하세요.

티스토리 강좌

상호 : 제이비 팩토리 사업자등록번호 : 189-03-00944 E-MAIL : jb@jbfactory.net 주소 : 경기도 안양시 동안구 시민대로 230, D동 874호 통신판매업신고번호 : 제2017-안양동안-0574호 호스팅서비스 : Amazon Web Services 구매안전서비스 : (주)케이지이니시스 이용약관 개인정보처리방침