웹마스터 팁
XE에 페이스북 소셜 댓글 연동하는 방법 (페이스북 소셜댓글 달기)
2014.08.30 22:46
// http://kitolll.com/9 에 올린 글입니다. 궁금하신 점은 블로그 댓글로 문의해주세요.
0. XE로 운영되는 사이트에 XE 기본 댓글 기능을 없애고 페이스북 소셜 댓글을 달려한다. 어떻게 해야할까?
1. 페이스북 디벨로퍼 사이트의 Comments 페이지 (https://developers.facebook.com/docs/plugins/comments) 에 접속한다.
2. 아래 캡처 화면을 참고하여 필요사항을 기입한 후 Get Code 버튼을 누른다.
3. Get Code 버튼을 누르면 아래와 같은 화면이 나온다.
4. 위의 화면에 있는 소스를 간단히 설명을 하자면 위에 박스에 있는 소스를 <body> 다음에 바로 나오게 (사이트의 wrap 보다 위에), 밑에 박스는 소셜 댓글이 나올 부분에 부착하면 된다.
(layout.html 파일)
위 박스에 있는
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ko_KR/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
태그를 위 캡쳐 화면을 참고하여 layout.html 에 삽입해준다.
5. 이제 페이스북 소셜 댓글이 들어갈 곳에 아래 박스에 있던 소스 코드를 삽입해주면 되는데(본인의 경우 _comment.html에 있는 모든 소스 코드를 삭제하고, 페이스북 소셜 댓글만 붙였다.) 조금 수정해줘야 할 것이 있다.
<div class="fb-comments" data-href="http://kitolll.com" data-width="500" data-numposts="5" data-colorscheme="light"></div>
위와 같이 해버리면 댓글이 게시글마다 보이는 것이 아닌 kitolll.com 이라는 홈페이지 안에 모든 댓글이 쌓여버리게 된다. (XE에서의 주소 구조 같은 경우, (http://설치주소/글번호) 인데 이것을 일일이 글 하나 하나 추가해줄순 없으니 자동으로 data-href 부분에 (http://설치주소/글번호)가 입력되도록 해야한다.
방법은 아주 쉽다. http://kitolll.com 대신 {$oDocument->getPermanentUrl()} 을 넣어주면 된다.
<div class="fb-comments" data-href="{$oDocument->getPermanentUrl()}" data-width="500" data-numposts="5" data-colorscheme="light"></div>
XE로 운영되고 있는 사이트의 소스 코드 (게시판 모듈 default 스킨의 _comment.html 파일)
6. 끝.
p.s XE 모바일 게시판에서 적용을 원할시에도 위와 같으며, 티스토리 블로그에 적용하는 방법도 비슷하다.