[페이스북 페이지 플러그인, 티스토리 블로그 사이드바 모듈 적용]
[페이스북] 페이지 만들기 포스팅에서 제 블로그인 Harvith Media의 페이스북 페이지를 만들어보았습니다. 이 페이지를 가지고 제 블로그의 사이드바에 페이지 [좋아요] 버튼을 누를 수 있는 모듈을 만들어보려고 합니다. 다들 아래에 설명을 참고하여 사이드바 모듈을 만드신 후 "좋아요" 버튼 한번씩 눌러주기로 약속해요. (약속해요~ 잊지 않겠다고~ 워너원 노래가 귓가에 맴도네요)
facebook for developers에서 페이지 플러그인 코드 획득
우리가 제일 먼저 해야할 일은 페이스북 '페이지 플러그인'이라는 것의 코드를 획득하는 일입니다. 이것은 아래의 링크 경로에서 획득할 수 있습니다. 아래의 링크를 눌러주세요.
▲ 페이스북 페이지 플러그인 설정
그러면 위의 그림처럼 보여질 화면을 설정하는 것이 나옵니다. 'Facebook 페이지 URL'에 플러그인으로 만들고자 하는 페이지의 URL을 넣습니다. '탭'에 들어갈 항목은 'timeline', 'messages', 'events' 혹은 '아예 아무것도 넣지 않기'입니다. 복수개를 선택할 수 도 있습니다. timeline, messages 이런 식으로요. 한글로도 가능합니다. 타임라인, 이벤트 이런 식이죠. 저의 경우는 그 어느 것도 필요하지 않았기에 아무것도 넣지 않았습니다. 위의 그림처럼 하단에 보여질 화면을 미리볼 수 있으니 확인해가며 값을 설정합니다. 그리고 너비에 본인이 사용하는 블로그 스킨의 사이드바 너비를 입력합니다. 제가 사용하는 CCZ 스킨의 경우 너비는 270입니다. 높이는 딱히 입력하지 않았습니다. 그리고 마지막으로 [코드 받기]를 눌러줍니다.
▲ 페이스북 페이지 플러그인 코드
[코드 받기]를 누르면 위와 같은 화면이 뜨면서 코드가 생성됩니다. 'Step 1'과 'Step 2' 코드가 있는 데 이 둘 다 필요합니다. 이 화면을 띄워놓고 본인의 블로그 관리자 페이지로 이동합니다.
사이드바 설정에서 HTML 배너 모듈 만들기
위에서 획득한 코드를 사이드바에 적용하는 방법은 [애드센스] 티스토리 블로그 사이드 메뉴에 애드센스 광고 넣기 포스팅에서 사용한 방법과 같은 방식입니다. 이 포스팅을 참고하여 'HTML 배너 출력' 모듈을 원하는 사이드바에 위치시킨 후 거기에 'Step 1' 코드와 'Step 2' 코드를 순서대로 붙여넣으면 되겠습니다.
▲ 사이드바 설정에서 페이스북 페이지 플러그인 설정
저는 위의 그림처럼 사이드바 제일 하단에 위치시켰습니다. 그리고 [애드센스] 티스토리 블로그 사이드 메뉴에 애드센스 광고 넣기 포스팅에서 한 것처럼 사용자 모듈로 지정하여 나중에 다시 사용할 수 있도록 만들어두었습니다. 제 블로그 우측 사이드바 제일 밑에 페이스북 페이지 사이드바 모듈이 만들어진 것이 보이시나요? 자 그럼 모두 [좋아요] 버튼 클릭 부탁드립니다.
관련 포스팅
[애드센스] 티스토리 블로그 사이드 메뉴에 애드센스 광고 넣기
[티스토리] 사이드바 커스텀 이미지 배너 모듈 만들기(feat. Flatinum 스킨)
유익한 시간되셨다면 하단에 공감 버튼을 눌러주세요.
여러분의 공감은 저에게 큰 힘이 됩니다.
'인터넷 정보 > 티스토리' 카테고리의 다른 글
| 블로그가 다음 메인에 올라가면 생기는 일 (0) | 2018.06.08 |
|---|---|
| [티스토리] CCZ 스킨 반응 속도 개선 방법 (1) | 2018.05.13 |
| [티스토리] 블로그 네이버, 구글 검색 등록 방법 (1) | 2018.05.09 |
| [티스토리] 사이드바 커스텀 이미지 배너 모듈 만들기(feat. Flatinum 스킨) (0) | 2018.05.05 |
| [티스토리] Flatinum 스킨 '글 제목' 영역 수정 (0) | 2018.05.04 |
