제로보드XE 1.5.X 게시판에 페이스북 댓글 플러그인 설치하기

제로보드는 게시판전용 툴로 시작하여 이제는 XE(익스프레스엔진)란 이름의 오픈프로젝트로 개발되고 있는 무료 웹사이트 빌더입니다.  가장 많은 사용자를 확보하고 있고 지금도 계속 진화중보니 상당히 잦은 업데이트를 진행하고 있는데 작년말 경 기존 XE의 버전과 많은 변화를 가져온 1.5 버전이 출시되었습니다.

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 코드를 추가하여야 겠죠.

페이스북 댓글 플러그인 코드 화면으로 돌아가서 2번 항목의 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 소스내에서 찾아주어야 하는데 복잡하게 찾으실 필요없이 아래에 해당글의 주소값을 전달하는 코드를 넣었으니 따라서 수정하시면 됩니다.

<div class="fb-comments" data-href="자신의 홈페이지 url{getUrl('comment_srl',$comment->comment_srl)}" data-num-posts="5" data-width="750"></div>

또한 data-num-posts 값은 한 화면에 표시되는 댓글 갯수 값이고 data-width는 가로 넓이이니 소스를 수정하실 때 자신의 사이트 디자인에 맞추어 수정을 하시면 됩니다.

끝으로 제로보드XE (1.5.x 버전 이상)에 페이스북 댓글 플러그인을 적용한 예입니다.

아주 간단하지는 않지만 제로보드XE를 설치하시고 사이트를 구성할 정도의 실력이 있는 분들이라면 어렵지 않게 충분히 수정이 가능할 것이라 생각합니다. 혹시라도 잘못 적용하여 사이트에 문제가 생긴다면 추가했던 페이스북 소셜댓글 코드부문만 삭제하면 원상복구가 가능하니 소셜댓글 설치에 어려움이 있으셨던 분들은 이 강좌를 통해 많은 도움이 되었음 합니다.

PS. 스마트폰 및 태블릿사용자를 위한 전문커뮤니티 http://www.digitalog.co.kr 사이트에 많은 관심 부탁드리겠습니다.