웹마스터 팁

  2. Support
  3. 웹마스터 팁

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 버튼을 누른다.


2164BF385401CEF02E1D6F

3. Get Code 버튼을 누르면 아래와 같은 화면이 나온다.


253A0E3A5401CF451A1628


4. 위의 화면에 있는 소스를 간단히 설명을 하자면 위에 박스에 있는 소스를 <body> 다음에 바로 나오게 (사이트의 wrap 보다 위에), 밑에 박스는 소셜 댓글이 나올 부분에 부착하면 된다.


240FA4385401D195046B7E

(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>

227C63405401D20D2855D9

XE로 운영되고 있는 사이트의 소스 코드 (게시판 모듈 default 스킨의 _comment.html 파일)


6. 끝.


p.s XE 모바일 게시판에서 적용을 원할시에도 위와 같으며, 티스토리 블로그에 적용하는 방법도 비슷하다.



이 게시물을
좋아요(+1)
목록
제목 글쓴이 날짜
메인메뉴에서 2차메뉴가 1차메뉴를 따라다니는 롤오버 메뉴로 만들기 [13] 우야노 2008.05.03
제한된 시간 안에 글을 또 등록할 때 IP 금지 기능(스팸필터) 해제하기 [3] 비나무 2008.05.03
상단에 PHP 오류구문이 출력될시 [6] sbshs77 2008.05.01
최근글 - 본문 내용 뽑아내기 [9] 夜飛 2008.05.01
windows Live writer로 게시글 쓰기 [3] file tindrum 2008.04.29
홈페이지에 이미지블릿 대신 특수문자로 표현해 보기 file 팔공산 2008.04.29
링크가 걸린 글의 색을 무지개색으로 나타내기 재미니님 2008.04.29
각 페이지에 쓸 수 있는 변수명들 찾기 [6] lainfox 2008.04.29
제로보드에 BGM 달기 (대폭 수정;;) [5] Dr.Mabin 2008.04.27
졸졸이 스토커 가두어보기 2탄(보드우측에 포함된 것처럼) [1] file 갯가 2008.04.26
제로보드XE에 배경음악 달기 [4] Dr.Mabin 2008.04.26
디버그모드 변경하는 간단한 파이썬 스크립트 [4] mmx900 2008.04.23
zbxe 기본글꼴(폰트) 바꾸는 방법 [9] file 핸디지 2008.04.22
댓글창에서 프로필이미지가 없는 경우 기본이미지 출력하기 [8] file 카카달려 2008.04.19
글 순서 바꾸기 임시방편 [6] 장운주 2008.04.18
ARTLAB님 팁을 참고하여 약간 변형 & 쫄쫄이 스토커 해상도에 상관없이 달기 [3] 탑심 2008.04.18
엑소버드 음악 제로보드XE에 구겨넣기... [8] artlab 2008.04.17
수정,삭제 버튼을 "이 게시물을.."에 넣기 [1] hangoon 2008.04.16
관리자 로그인시 원하는걸 보여주자 [5] 빽짱구 2008.04.15
상단로그인..? [10] 빽짱구 2008.04.15
태그 쓰기