웹마스터 팁

// 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 모바일 게시판에서 적용을 원할시에도 위와 같으며, 티스토리 블로그에 적용하는 방법도 비슷하다.



제목 글쓴이 날짜
포인트선물 애드온 차감시키는 방법 410contents 2014.09.12
카페24 웹호스팅에서 서브 도메인으로 접속 방법 [5] 데이스타 2010.03.28
게시판 목록에서 새창 띄워서 다른 형태 나오게 하기 [3] foret 2014.02.23
회원정보보기시 공개 안 한 정보에 대해서도 최고관리자는 볼 수 있도록 변경 sejin7940 2014.09.10
모바일뷰 사용하는 경우, 사이트맵에서 메뉴 생성시, 모바일 뷰 가 자동으로 체크되도록 sejin7940 2014.09.10
로그인 불가 - APM 관리자일 때 (일반적인 경우 아님) [3] Sx3 2007.08.26
XE코어 업데이트(판올림) 정확한 방법 [12] 카이닉스 2012.07.30
[팁]포럼 모듈 인용글 박스 문제 해결 - 1.7.3 기준 [5] socialskyo 2013.03.27
고도몰과 xe 회원 연동하는 키 포인트 410contents 2014.09.03
애드온 개발중에 이상한 버그가 생길경우 [2] 銀童 2014.08.26
div 세로 중앙 정렬팁 Ansi™ 2014.09.01
카카오톡으로 보내기(깔끔한 뷰) [4] seyriz 2014.08.11
socialXE 에서 로그인시 소셜로그인과 XE 로그인 동시 구현하기 file 큐우우 2014.08.31
XE에 페이스북 소셜 댓글 연동하는 방법 (페이스북 소셜댓글 달기) 기톨닷컴 2014.08.30
카메론 플러그인 에드온이 컨텐츠(본문)을 가릴때 팁 file oscarmike 2014.08.30
게시판의 오늘 올라온 새글의 갯수를 알아내는 방법 [8] garnecia 2014.08.22
캡챠(captcha)가 안 뜰 때 Double'U' 2014.08.29
XE 업데이트 방법 - 제1편 (0.x.x / 1.0.x / 1.1.x / 1.2.x 에서 1.2.4 버전으로 업그레이드) [38] file Gekkou 2009.11.19
XE를 앱으로, 티타늄 및 폰갭(Cordova) 사용기 [1] AJKJ 2014.08.28
익명게시판에서 관리자가 글 수정시 글의 권한이 넘어가지 않도록 하기. [5] 소시덕분에힘받아요 2014.06.11