티스토리에 페이스북 댓글 플러그인 달기

▲ 제일 먼저 작업해야 할 것이다.
관리자 페이지의 환경설정에서 글 주소를 '숫자형식(예 - http://블로그주소/숫자)로 선택하고 '저장'
꼭!
이렇게 해야 뒷탈이 없다 =ㅅ=


다피님의 IT 리포트 페퍼린즈 블로그에서 페이스북 소셜 플러그인 설치방법을 보고 그대로 따라해봤다 ㅇㅇ
http://paperinz.com/2207

딱히 페이스북을 하는건 아니지만, 
따로 운영하는 블로그에 써먹어야되서.. 테스트할 겸 내 블로그에 적용해보았다.
지금부터는 페이스북 댓글 플러그인 다는 과정 ↓


먼저, 페이스북에 로그인을하고 개발자페이지의 앱으로 들어간다.
https://developers.facebook.com/apps

새 앱 만들기를 클릭해서 새 앱을 만든다. (이걸 꼭 해야함)

적당한 앱 이름이랑 facebook terms에 agree 체크해주고 계속하기

보안확인하고 확인~

그러면 이러한 창이 뜨는데, app domain에 tistory.com을
website의 사이트 URL에 자신의 블로그 주소를 적으면 된다.
나의 경우 http://2liter.tistory.com/ 으로 기입했다.
그리고 '변경 내용 저장'

Changes saved. 쏼라쏼라쏼라
이렇게 뜨면 잘 변경이 적용된 것.
※저런 창이 뜨지 않고 오류가 난 경우에는 페이스북계정에 핸드폰 인증을 했는지 알아보길 바람.
(계정인증이 되어있어야함)

다 되었으면 개발자문서>core concepts>social plugins 로 들어가서

comments를 클릭~

그리고 Get Code!

복사~ 하고 적당한 메모장에 임시로 붙여넣는다.

그리고 아까전에 만들었던 앱의 ID를 복사해서

▲ 위 이미지처럼 넣어주면 된다.
all.js#appId=앱아이디(숫자15자리)&xfbml=1

▲ 그 다음으로, 위 이미지의 드래그 된 부분 'example.com'에 http://를 제외한 자신의 블로그주소+치환자를 적어주면된다.
관련 포스팅들을 보다보니, 블로그에 따라 치환자가 다를 수도 있다고 하는데,
내 블로그의 치환자는 임. 그래서 그냥 넘어감.

이 작업이 중요한데, 이 작업을 해야만, 각 글 마다 각각의 댓글창이 달리게 되기 때문이다.
(이 작업 안하면 각 글마다 똑같은 댓글창이 따라다님)

▲ 계속해서, example.com이 있던 자리에 http://를 제외한 내 블로그주소+치환자를 대입한 모습
2liter.tistory.com[★##_article_rep_link_##]
↑치환자에서 별빼세요;

정리하면 이렇게 되겠습니다.

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=앱아이디&amp;xfbml=1"></script><fb:comments href="블로그링크치환자" num_posts="2" width="가로길이(픽셀단위)"></fb:comments>

num_posts="숫자" 는 댓글창에 보일 댓글의 수
width="숫자" 는 pixel단위로, 댓글창의 가로길이

여기까지 사전작업은 끝! 이 났다. 
 

사전 준비작업이 끝났으면, 티스토리 블로그 관리자 페이지에 들어가서 [ 스킨> HTML/CSS편집 ]

넣고 싶은 위치에 붙여넣어주면 된다.

▲ 이 부분에 들어가게 된다. HTML/CSS편집 창에서 편집창을 쭉 보면 대강 느낌이 올거다;;
스크롤을 쭉 내리다가보면

<!-- 포스트 본문 내용 --> <div class="article"> </div><!-- close article --> <div class="author"> <span class="text">posted by</span> </div> ★ <!-- 태그트레일 -->

이렇게 보이는데 ★ 별 있는 데에 사전에 미리준비해둔 소스코드를 붙여넣으면 된다.
저렇게 친절하게 <!-- 쏼라쏼라 --!> 안에 메모해둔 흔적이 있으니 그 흔적을 보고 대충 여기가 어디쯤이구나 생각하고 대입해보면 된다. 

▲ 적용한 모습
일단 각각의 글에 각각의 댓글창이 달리는지 확인 할겸 흑역사? 게시글에 test 댓글을 달아놨다.

▲ 그리고 블라인드를 보고왔다 게시글에서 test댓글이 달려있는지 확인
했다... 음 test가 없으니 제대로 달린게 맞는게군.
음음..
그래그래

끝!

그리고 위에 캡쳐 이미지를 보면 좋아요도 달아놨는데..
그것도 포스팅하려고 했는데..
나중에..