웹마스터 팁
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 모바일 게시판에서 적용을 원할시에도 위와 같으며, 티스토리 블로그에 적용하는 방법도 비슷하다.
댓글 0
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| [도로명주소 krzip] 1.7.4 이전 버전들에 이용하기 [3] | XE플스 | 2014.02.06 |
| [리눅스] 속도향상 팁. nginx를 리버스프록시로 써봅시다. [6] | choco@_@ | 2013.07.11 |
| jquery swiper | Ansi™ | 2017.02.16 |
| 인스타그램 해시태그 회원가입 없이 끌어오기 | 외인 | 2017.02.08 |
CKEditor 글꼴란에 한글 폰트 추가하는 방법 (수정함)
[4]
 | 기븐 | 2015.09.19 |
| 폰갭과 웹앱 그리고 XE... [6] | onTrust | 2015.04.23 |
| jQuery 플러그인 모음 | Ansi™ | 2017.01.25 |
| DOS 공격에 대한 방어 프로그램입니다. | 마루디자인 | 2017.01.23 |
| 관리자 로그인시 원하는걸 보여주자 [5] | 빽짱구 | 2008.04.15 |
| SSL의 정석 (아파치 & nginx) [13] | 기진곰 | 2015.06.16 |
| 방명록 형태 사용시 제목이 길게 저장되게 하려면 | sejin7940 | 2016.12.23 |
| 로그인풀림방지 - 주소 고정하기 [27] | ezi | 2011.05.28 |
|
숫자 아이디 허용 방법
| 410contents | 2016.12.13 |
| (설문조사) 회원만 설문 조사 하도록 [8] | Simulz | 2007.09.04 |
| 클라우드플레어 사용시 서버 IP 노출방지 체크리스트 | gnbstory | 2016.12.09 |
| 간단한 xe 관련 자바스크립트 질문 [1] | 마든남 | 2016.12.01 |
| 스크롤 맨아래로 내리면 자동으로 글 목록 더보이기 구현(게시판어어느 스킨이든 사용가능) [19] | 장포크 | 2013.08.10 |
| 메뉴에 새 글 표시 모듈 사용 시 new 아이콘이 보이지 않는 버그 수정 [8] | 퍼니엑스이 | 2014.08.12 |
| 가상서버 고르실때 참고하시면 좋겠네요. | 로니 | 2016.11.24 |
| CloudFlare 사용시 방문자 IP와 SSL 접속여부가 정확하게 파악되지 않는 문제 해결법 [4] | 기진곰 | 2015.07.12 |