티스토리 블로그에 페이스북 댓글 플러그인 설치하기

2013. 2. 8. 10:40 BLOG Story ·

티스토리 블로그에 페이스북 댓글 플러그인 설치하기

페이스북에서는 여러 종류의 플러그인을 제공해주고 있습니다. 명함 위젯 플러그인도 있고 타임라인 위젯 플러그인도 제공해주고 있습니다. 그중에 소셜 댓글, 즉 페이스북 내에서의 댓글 입력이 아닌 웹사이트나 블로그에서 댓글을 달 수 있는 플러그인이 있습니다. 이 플러그인이 제공된지는 꽤 되었지요.

일반 웹사이트나 티스토리 블로그에 페이스북 댓글 플러그인을 설치하는 방법은 크게 두가지 입니다.
1. 페이스북 APP을 만들어 플러그인을 생성하고, 방문자들이 입력한 덧글들을 관리하는 방법.
2. 덧글 입력 플러그인만 설치하는 방법 (관리가 잘 안됨)

그중에 1번 방법은 단계가 복잡하므로 언젠가 따로 포스트를 올리도록 하고...
저도 그냥 쓰고 있는 2번 방법에 대한 이야기입니다.

제 블로그 하단에는 아래 이미지처럼 페이스북을 이용한 댓글 플러그인이 설치되어있습니다.
블로그상에도 페이스북 댓글이 보여지고, 방문자의 페이스북 담벼락에도 동시에 댓글이 올라가게 됩니다.

이 페이스북 소셜 플러그인, 댓글 플러그인을 설치하는 방법은 간단합니다.

▶ https://developers.facebook.com/docs/reference/plugins/comments/

위 주소에 들어가면 아래 이미지와 같은 댓글 소셜 플러그인 생성창이 나옵니다.
URL to comment on : 자신의 블로그 주소를 적어주면 됩니다.
Width : 댓글 플러그인이 표시될 너비, 폭 수치
Number of posts : 페이스북 덧글이 한번에 보여질 갯수
Color Scheme : 화이트 컬러와 블랙 컬러 둘 중 하나의 색상 세트

다 입력하고 나서 Get Code 버튼을 누르게 되면 아래와 같이 댓글 플러그인 코드가 나옵니다.
HTML5 모드로 1, 2 두개의 코드가 생성됩니다. 이 두개 소스를 티스토리 html 스킨 설정 페이지에서 입력해줍니다.

1번 코드의 경우 <head> 와 </head> 사이, 혹은 <body> 바로 뒤에 넣어줍니다. 솔직히 위치는 그닥 중요하지 않습니다.
그리고 2번 코드를 페이스북 덧글이 표시될 공간에 넣어주면 됩니다.

여기서 주의할 점이 있는데 2번 코드에 추가해줘야 할 것이 있습니다.
data-href 속성값에 자신의 블로그 주소를 입력하는데 블로그 주소 뒤에 해당 포스트의 고유 주소 URL 치환자를 넣어주어야 합니다. 그래야 각각의 블로그 포스트에 해당 페이스북 댓글이 달리게 됩니다.