[티스토리]티스토리에 페이스북 라이크 박스(like box) 연동하기

티스토리에 위와같이, 페이스북 박스라 불리는 라이크 박스(like box)를 연동하는 방법에 대해서 알아보겠습니다. 우선, 라이크 박스를 만들기 전에, 미리 만들어 놓은 페이스북 페이지(Facebook page)가 있어야 합니다.

혹시, 페이스북 페이지를 아직 만들지 않았다면, 앞전에 포스팅한 글을 보시고 미리 만들어 두시길 바랍니다.

■ [페이스북]페이스북 페이지 만들기

페이지까지 미리 만들어 놓으셨다면, 아래와 같은 방법으로 어렵지 않게 나의 티스토리에 페이스북 라이크 박스를 연동해 보세요!

01. 페이스북 개발자 페이지( https://developers.facebook.com/docs/plugins/ )에 접속 한 뒤, 라이크 박스(Like Box)탭을 누른다.

02. 라이크 박스(Like Box)탭에 들어 왔다면, 위와 같이 몇가지의 정보 입력만으로 바로, 코드를 얻을 수 있다.

- Facebook Page URL : 내 페이지 주소

- Width : 라이크 박스의 가로 크기

- Height : 라이크 박스의 세로 크기

- Color Scheme : 라이크 박스 컬러

- Show Friend's Faces : 좋아요 하고 있는 친구들의 얼굴 보기

- Show Header : 상단 'Facebook에서 찾아보세요' 보기

- Show Posts : 해당 페이지에서 작성한 글 보이게 하기

- Show border : 라이크 박스의 테두리 보기

▲ 만들어 놓은 페이지에서 URL을 확인.

▲ 정보 입력으로 실시간 바뀌는 라이크 박스 모습.

▲ '친구얼굴 보기'와 '테두리 보기'만 선택했을 때 라이크 박스 모습.

03. 이렇게, 라이크 박스 탭에 내가 원하는 크기 및 설정대로 모두 작업을 완료 하였다면 'Get Code'버튼을 눌러, 코드를 확인한다.

04. 'Get Code' 창이 떴다면, 티스토리에 연동하기위해, 'IFRAME'탭을 눌러, 아래쪽의 코드를 모두 복사해 둔다.

05. 이제, 라이크 박스를 만들기 위한 코드는 모두 구했으니, 티스토리 '사이드바'에 라이크 박스를 연동할 차례이다. 티스토리 관리자 모드로 들어가, '플러그인 설정'에서 '배너출력' 플러그인 사용이 체크가 되어 있지 않다면, 사용하기(체크)를 한다.

06. '배너출력' 플러그인을 사용 중이라면, 좌측탭의 '사이드바'항목으로 이동한 뒤, 위의 그림과 같이 'HTML 배너출력'항목을 추가하고, '편집'을 눌러서 복사해뒀던 페이스북 라이크 박스 코드를 붙여 넣는다.

07. 코드를 모두 입력했다면, 사이드바 순서를 정리하고, 우측 상단의 '저장' 버튼을 누른다.

▲ 티스토리에 페이스북 라이크 박스가 나타난 모습.

전세계적인 인프라를 가진 페이스북의 라이크 박스(Like Box) 만드는 방법에 관하여 알아 보았습니다. 페이스북 페이지를 시작했다면, '좋아요'수를 늘리기 위해 많은 노력을 할 것입니다. 그 중에 하나가 바로, 내가 운영하고 있는 블로그에 페이스북 라이크 박스를 연동 하는 방법일 것입니다. :-)

롤스토리 페이스북에서 디자인에 관한 아름다운 이야기를 들어보세요!! :-)