제로보드XE 1.5.X 게시판에 페이스북 댓글 플러그인 설치하기
1.5버전은 XE의 핵심이 되는 어드민부터 스킨구조등 많은 부분이 변경되어 기존에 적용하던 사이트 커스터마이징 방법 역시 변경이 되었습니다. XE를 이용하면 다양한 위젯을 통해 사이트를 더욱 효율적으로 구성할 수 있지만 제로보드XE에서 가장 부족한 부분이 바로 소셜플러그인을 적용시켜 웹사이트를 커스터마이징 하는부분입니다. 물론 제로보드 모듈중 소셜XE를 통해서 소셜댓글 기능을 지원하긴 하나 사용법이 어려워 많은 분들이 설치를 포기하고 있어 XE를 통해 구축한 웹서비스에서 소셜서비스와의 연동성이 떨어지는 불편함이 있습니다.
제로보드 XE를 통해서 웹사이트를 운영하는 분들이라면 소셜과의 연계성에 대한 필요성을 무척이나 느끼실텐데 부족하지만 다양한 소셜서비스중 페이스북 댓글 플러그인을 새로운 제로보드 XE (1.5.x 버전이상)에서 적용 시키는 방법을 소개하여 드리겠습니다.
제로보드 XE를 통해 운영하는 웹사이트에 페이스북 소셜댓글 플러그인을 설치하려면 페이스북 개발자 사이트를 통해 자신의 웹사이트에 설치할 코드를 부여받아야 합니다.
페이스북 개발자 사이트 : https://developers.facebook.com/docs/reference/plugins/comments/
페이스북 개발자 사이트에서 제공하는 페이스북 플러그인중 페이스북 댓글 기능을 추가하려면 comment 플러그인을 이용해야 합니다.
페이스북 댓글 플러그인 코드를 부여 받기위해 자신이 운영하는 URL과 댓글표시갯수,가로넓이,색상을 선택한 후 Get Code 버튼을 클릭하여 코드를 생성합니다. 참고로 모든 설정은 부여받은 코드에서 수정이 가능하니 자신의 URL 만 입력하고 바로 코드를 생성하셔도 무방합니다.
Get Code 버튼을 클릭하면 팝업이 열리면서 자신이 운영하는 사이트에 삽입할 스크립트코드와 html 코드를 부여해 줍니다.
가장 먼저 상단에 표시된 스크립트 코드를 복사하여 제로보드 XE에 추가해 보겠습니다.
첫번째 코드는 운영중인 사이트의 제로보드XE 관리자 화면에서 추가할 수 있습니다.
확장기능 메뉴 > 설치된 레이아웃 > 자신이 사용중인 레이아웃 -> 레이아웃 편집 메뉴를 선택하여 줍니다.
레이아웃편집 화면중 HTML 편집창의 맨 상단에 페이스북 스크립트 코드를 붙혀넣기 하고 저장합니다.
이제 실제 페이스북 댓글창이 보여지는 html 코드를 추가하여야 겠죠.
여기서 부터는 서버에 설치된 제로보드 XE 파일을 수정해야 하니 천천히 따라 하시기 합니다.
사용하시는 FTP클라이언트로 웹서버에 접속하여 제로보드 XE가 설치된 디렉토리에서 modules > board > skins > 자신이 사용중인 게시판 스킨명 디렉토리를 찾아줍니다.
게시판의 스킨 디렉토리의 여러 파일중 코멘트를 출력을 담당하는 _comment.html 파일을 편집하기로 불러옵니다.
두번째 페이스북 코드는
<div class="fb-comments" data-href="자신이 입력했던 url" data-num-posts="5" data-width="750"></div>
로 되어있을것입니다. 여기서 중요한 것이 data-href로 전달 시켜주는 주소데이타 입니다. 해당글의 고유주소를 가져와서 전달해주어야 각각의 게시물마다 페이스북 댓글연동이 가능하기에 data-href 에 전달되는 글의 주소값을 comment 소스내에서 찾아주어야 하는데 복잡하게 찾으실 필요없이 아래에 해당글의 주소값을 전달하는 코드를 넣었으니 따라서 수정하시면 됩니다.
또한 data-num-posts 값은 한 화면에 표시되는 댓글 갯수 값이고 data-width는 가로 넓이이니 소스를 수정하실 때 자신의 사이트 디자인에 맞추어 수정을 하시면 됩니다.
아주 간단하지는 않지만 제로보드XE를 설치하시고 사이트를 구성할 정도의 실력이 있는 분들이라면 어렵지 않게 충분히 수정이 가능할 것이라 생각합니다. 혹시라도 잘못 적용하여 사이트에 문제가 생긴다면 추가했던 페이스북 소셜댓글 코드부문만 삭제하면 원상복구가 가능하니 소셜댓글 설치에 어려움이 있으셨던 분들은 이 강좌를 통해 많은 도움이 되었음 합니다.
PS. 스마트폰 및 태블릿사용자를 위한 전문커뮤니티 http://www.digitalog.co.kr 사이트에 많은 관심 부탁드리겠습니다.
'강좌' 카테고리의 다른 글
| 선관위 DDoS 사건관련 보고서에 나온 IT용어 완벽정리 (0) | 2012/03/15 |
|---|---|
| 인텔이 말하는 울트라북의 정확한 기준 (4) | 2012/03/07 |
| 제로보드XE 1.5.X 게시판에 페이스북 댓글 플러그인 설치하기 (21) | 2012/03/05 |
| 커버캔버스로 톡톡튀는 페이스북 타임라인 커버만들기 (2) | 2012/02/24 |
| QR코드 이용하여 와이파이(WiFi) 접속 편리하게 사용하기 (0) | 2012/02/19 |
| 스마트폰에서 구글 리슨(Listen)으로 팟캐스트 쉽게 청취하기 (2) | 2012/02/19 |
제로보드를 이용하면 손쉽게 다양한 기능을 가진 홈페이지를 만들 수 있어서 참 좋더라구요...^^
글쵸...제로보드가 정말 최고예요...~~
유익한 강좌 잘 보고 적용해 봤어요. ㄳ
주의: http://invalid.invalid/xe/freeboard/2083에 접근할 수 없습니다.
근데 위 error는 뭐죠?
소스를 봐야 겠네요. slr 값을 제대로 넘겨주지 못해서 그런거예어.. 스킨 마다 조금씩 다를 수 있을 수 있어요
소스 파일만 저에게 메일로 보내 주실래요,,, 확인해 볼께요 메일주소는 프로필 소개에 있어요
유용한 강좌 잘 보고 갑니다~ 감사합니다. ^^
제가 이해하기로는 제로보드에서 글을 작성하면 페이스북과 연동되서 페이스북으로 글을 넘기고 또 페이스북에서 그 글에 댓글을 남기면 제로보드로 다시 넘어 온다는 것으로 이해했는데요 ..(어렵게 적었네요^^) ㅣ이것이 맞다면 5개월전에 이와 같은 기능을 애드온으로 만들어 달라고 한적이 있을 정도로 지금 이 강좌는 정말 저에게 필요한 것을 주신 것 같습니다.... 그런데 막상 해보니 안되는 것 같습니다. 참고로 보드는 스케치북 5.1을 사용하고요.
페이스북 댓글은 고유 주소를 기억해서 댓글을 관리 합니다. 그래서 해당 글 주소를 페이스북에 파싱해주어야 하는 과정을 거쳐주기만 하면 되죠...
좋은 강좌 감사합니다. 그동안 찾던 강좌라서 열심히 (몇시간 동안..?) 적용을 해봤습니다.
<div class="fb-comments" data-href="http://cybersulut.com{getUrl('comment_srl',$comment->comment_srl)}" data-num-posts="5" data-width="680"></div> 을 강좌에 있는 대로 적요을 하면
다음과 같은 에러가 나옵니다. "주의: http://cybersulut.comhttp//cybersulut.com/CelebNews/7651211에 접근할 수 없습니다."
하지만 여기서 <div class="fb-comments" data-href="{getUrl('comment_srl',$comment->comment_srl)}" data-num-posts="5" data-width="680"> 도메인을 빼면 아무것도 나타나지 않습니다.
하지만, 작성자가 먼저 임의의 댓글을 기존의 댓글 창(저의 경우 스케북치북 게시판에 SOCIAL XE 댓글)에 적어줘야지만 나타납니다. 제가 잘못 적용을 한건지 아님, 기본게시판이 아니라서 그런건지 조언 좀 부탁드리겠습니다. 꼭 필요한 기능이라서,.(이게 적용이 안되면 사용자들이 댓글을 거의 페이스북에만 남기는 페단이 발생되서여) 부닥드립니다.
참고로 http://cybersulut.com/7651245 이 주소는 도메인을 빼고 적용한 겁니다.
페이스북 테스트 해보니...정상적으로 작동하고 있네요.
잘 설치 되신 것 같습니다 .^_^
www.facebook.com/pageview
오시면 댓글 달은 거 보이실거예요.
클릭하면 해당 글로 정확하게 이동하네요.
안녕하세요. 강좌 잘 봤습니다. 제게 꼭 필요한 기능이어서 바로 적용해봤는데요.
문제는 위에분처럼 저도 댓글이 달리지 않은 게시판에는 페이스북 플러그인이 안나오더라구요.
꼭 댓글이 있는 게시판에만 적용이 되는데 혹시 어떻게 해결하셨는지
궁금합니다 ㅜㅜ....
음...그건 상관없으실텐데요.
뭔가 값을 잘못 주신듯 합니다.
유익한 정보 잘 보고 갑니다. ^^ 감사해요.
도움이 되셨다니 기쁘네요. 자주 들려 주세요.
감사해요 ~ 보고 잘 설치 했는데요,
모바일에서는 설치가 안되네요.. ㅠ
모바일이 중요한데...
일반 게시판에 붙이는건 성공했는데 말이죠...;
'모바일 자바스크립트 로드' 이게 문제인가 해서
에드온 켜봤는데도 안되네요 .. 혹시 답을 알고 계신지 여쭤봅니다... ^^;
저도 확인을 해봐야 할것 같습니다.
스트립트 문제보다는 모바일스킨에서 뿌려지지 않을 것 같네요..
신기하네요
잘보고갑니다!
고맙습니다. v1.5로 업그레이드하여 인터페이스가 많이 달라 잠깐 당혹스러웠는데,
강좌를 보고 쉽게 종전의 플러그인을 복원할 수 있었습니다.
그런데 왼쪽 바형태의 위젯은 어떻게 적용하신 건지 좀 알려주실 수 있을까요?
어떤 것을 이야기 하시는 것인가요 ?
블로그에 있는 것 말씀하시는 건가요 ??