페이스북의 좋아요 버튼을 사이트 내에 다는 법을 알려드리겠습니다.
방법은 아주 간단합니다.
아래 순서대로 따라만 하시면 됩니다.
1.
먼저 아래의 링크를 클릭합니다.
아래의 링크는 페이스북에서 좋아요 버튼을 만들어 주는 곳입니다.
https://developers.facebook.com/docs/reference/plugins/like/
하나씩 설명 드리면
URL to Like
좋아요 버튼을 달 사이트 주소를 입력하시면 됩니다.
Send Button(XFBML Only)
체크 시 [좋아요] 버튼 옆에 [보내기] 버튼이 생깁니다.
보내기 버튼은 친구나 그룹, 이메일로 링크 주소를 보낼수 있는 기능입니다.
Layout Style
3가지의 좋아요 모양이 있습니다. 아래 이미지를 참고하세요.
standard
button_count
box_count
Width
좋아요 버튼 가로 폭을 설정합니다. 적당히 두시면 됩니다.
Show Faces
좋아요 버튼을 클릭한 사람의 썸네일 사진을 하단에 표시해줄 것인지의 여부를 설정합니다.
Verb to display
Like 버튼 말고 추천 버튼을 사용하실려면 체크 하시면 됩니다.
Color Scheme
배경을 어둡게 하실려면 Dark 로 선택하시면 됩니다.
Font
폰트는 한글 좋아요 버튼에서는 변경하셔도 별 차이를 느끼기 힘드니 참고하시면 됩니다.
모든 옵션을 체크하셨으면, 가장 아래 Get Code 를 클릭 합니다.
2.
Get Code 를 클릭 하시면 아래와 같이 코드가 나타납니다.
1 번 소스는 공통적인 부분에 넣으시면 되며
2 번 소스는 좋아요 버튼을 추가하고 싶은 위치에 넣으시면 됩니다.
3.
간단한 예로 그누보드에 [좋아요] 버튼을 달아보겠습니다.
그누보드를 설치한 루트 폴더에 보시면
head.sub.php 파일이 있습니다.
(꼭! 위의 파일말고도 공통으로 포함되는 파일에 추가해 주셔도 됩니다.)
해당 파일을 열어
가장 마지막줄에 1번 소스를 추가해 주시면 됩니다.
<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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
그리고 좋아요 버튼은 게시판 글 내용 아래쪽에 넣어보도록 하겠습니다.
skin 폴더에 보시면 기본 스킨에 한번 넣어보겠습니다.
skin / board / basic 폴더에 보시면
view.skin.php 파일을 여시면 됩니다.
<!-- 내용 출력 -->
<span id="writeContents"><?=$view[content];?></span>
내용 출력 이라는 부분이 있습니다.
위의 소스가 게시글의 글 내용이 나타나는 부분입니다.
글 내용 아래쪽에 적절히 디자인을 하여
<div class="fb-like" data-href="http://happycgi.com/gnuboard4/board.php?bo_table=<?= $_GET['bo_table'] ?>&wr_id=<?= $_GET['wr_id'] ?>" data-send="false" data-layout="box_count" data-width="450" data-show-faces="true" data-font="arial"></div>
2번 소스를 추가하여 줍니다.
중요!!!
여기서 2번 소스를 보시면 data-href= 에는 도메인 주소만 있을 것입니다.
위의 소스대로 하면 사이트 전체에 좋아요 가 하나만 적용 됩니다.
원하는 것은 사이트 각 게시물 마다 따로 좋아요 버튼이 동작해야 하므로
data-href= 을 각 게시물로 변경을 해주셔야 합니다.
그누보드 같은 경우
위와 같이
data-href="http://happycgi.com/gnuboard4/board.php?bo_table=<?= $_GET['bo_table'] ?>&wr_id=<?= $_GET['wr_id'] ?>"
로 변경해 주시면 됩니다.
기타 게시판이나 각 상품등에 고유의 number 값이 있을테니
해당 number 값으로 좋아요 버튼 소스를 구분 짓도록 수정해 주시면 되겠습니다.
|
