아주 간단해요.
1. 티스토리에서 플러그인을 넣은 장소를 확인합시다.
우선 티스토리 Admin에 로그인해서 스킨 - HTML/CSS 편집에 들어갑니다.
찾기로 '_tag_label_rep_'를 검색합니다. 그러면 태그트레일이라는 문단이 발견될 것입니다.
다음 스크린샷을 보시면 노란색 부분이 페이스북 댓글창과 좋아요 버튼을 넣을 곳입니다.
2. 페이스북 소셜 플러그인를 구하러 갑시다.
http://developers.facebook.com/docs/plugins/
우리는 Comments와 Like Button을 사용할 것입니다. 그 밖에도 자신이 사용하고 싶은 플러그인이 있으면 사용하면 됩니다.
그럼 소스를 얻는 방법입니다.
Comments를 먼저 얻으러 들어갔습니다.
저는 Number of posts를 3으로 했습니다. 그리고 제 블로그의 길이는 750px이기에 그렇게 넣고 Get Code를 누르면 소스를 얻을 수 있습니다. 입력하는 대로 아래에 Example이 생성되기때문에 눈으로 보고 확인하세요.
나중에 소스에서 얼마든지 수정이 가능하니까 처음부터 너무 꼼꼼히 안해도 됩니다.
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments href="whachang.kr" num_posts="3" width="750"></fb:comments>
위의 소스를 복사해서 티스토리 HTML/CSS 소스에 붙여넣읍시다.
그리고 Like Button 플러그인도 동일한 방법으로 소스를 얻어서 같이 붙여넣읍시다. 티스토리에서는 XFBML을 지원하기에 Like Button 소스에서 XFBML을 복사하면 됩니다.
3. 소스를 블로그에 적용하기
소스를 붙여고서 그게 끝이 아닙니다. 그대로 두면 블로그 전체 페이지에 대한 Comments와 Like가 되어버리기 때문에 각 게시글에 대한 주소치환자를 붙여주어야 합니다. 티스토리에서 주소치환자는 [##_article_rep_link_##]입니다.(여기서 공백이 없어야합니다.)
그리고 us_EN을 ko_KR로 바꾸어주면 한글로 나오게 됩니다.
<!-- 페이스북 좋아요, 보내기 시작 -->
<script src="http://connect.facebook.net/ko_KR/all.js#xfbml=1"></script><fb:like href=whachang.kr[##_article_rep_link_##] send="true" width="600" show_faces="false" font=""></fb:like>
<!-- 페이스북 좋아요, 보내기 끝 -->
<!-- 페이스북 댓글 시작 -->
<script src="http://connect.facebook.net/ko_KR/all.js#xfbml=1"></script><fb:comments href=whachang.kr[##_article_rep_link_##] num_posts="3" width="750"></fb:comments>
<!-- 페이스북 댓글 끝 -->
간단하게 몇가지 설명해보겠습니다. Comments와 Like Button 구분없이 나열했습니다.
href : 블로그 주소입니다. 블로그 주소 뒤에는 주소치환자 [##_article_rep_link_##]를 꼭 넣어주세요.
send : 이번에 새로 생긴 보내기 버튼입니다. 친구에게는 메시지로, 그룹에게는 담벼락에 게시가 됩니다.
width : 넓이입니다. 자신의 블로그에 맞게 수정하면 됩니다.
show_faces : true로 바꾸면, 좋아요를 한 친구의 얼굴 사진을 보여주게 됩니다.
num_posts : 보여질 댓글의 개수입니다.
저장하고 블로그에 가서 잘 뜨는지 확인하면 되겠네요 ^^
만약에 위의 방법대로 그대로 했는데, 잘 안된다면 티몰스님의 블로그에 잘 설명이 되어있으니 확인해보세요.
댓글 없음:
댓글 쓰기