티스토리 블로그 에 페이스북 댓글 플러그인 장착하기
블로그를 통해 인터넷상에서 나의 의견 이나 경험에 관한 정보를 유저들에게 제공하고 공유를 하고 있습니다. 이렇다 보니 나의 블로그에 많은 사람들이 방문하여 글을 보고 좋은 정보와 공감을 얻기를 바라는 마음과 함께 방문자들의 댓글 따뜻한 한마디가 글을 쓰는 블로거 들에게는 큰힘이 됩니다.
글에 대한 댓글 로 인해 방문자들과 서로 소통을 하면서 나의 블로그를 더욱 활기차게 운영을 하고 있습니다. 티스토리 블로그에도 기본적인 댓글 플러그인으로 소통을 할수 있지만 여기에 여러가지 다양한 형태의 댓글 플러그인을 장착할수가 있습니다.
그중 IT 업계 웹서비스중 전세계 10억명의 사용자를 보유하고 그중 국내 1000만명 의 사용자가 있는 페이스북 댓글 플러그인을 티스토리에 설정 하여 보도록 하겠습니다. 그동안 페이스북 댓글 플러그인이 많은 변화가 있었는데 기존 내용은 아래 포스트를 참고 해보시면 됩니다.
이전과 비교하여 현재 사용중인 페이스북 댓글 플러그인 설정이 조금 까다롭습니다. 간단하게 순서를 정리하자면,
1.페이스북 앱만들기
2.댓글 플러그인 소스코드 생성
3.티스토리 HTML/CSS 등록
4.페이스북 댓글 모니터링 및 디버깅
위와 같은 순서에 따라 아래 포스팅된 내용을 차근차근 해보시다보면 나의 티스토리 블로그에 페이스북 댓글 플러그인이 장착 이 될것입니다.
1.페이스북 앱 만들기
1) 페이스북 앱아이디를 발급 => https://developers.facebook.com/apps 을 방문한후 우측 새앱만들기 클릭. App Name 을 입력(예:Tistory_comment)후 계속하기 -> 보안코드를 입력
2)Website with Facebook Login 을 클릭한후 티스토리 블로그 주소를 기입 후 변경내용 저장.
2.댓글 플러그인 소스코드 생성
1) ☞ https://developers.facebook.com/docs/reference/plugins/comments/ 플러그인 페이지로 이동. 각 항목을 입력후 Get Code 클릭. 넓이는 자신의 블로그 본문 넓이로 설정하면 됩니다.
2) 두개의 코드가 생성이 되고 생성 된 코드 화면에서 우선 앱 아이디 가 맞는지 확인을 합니다. 두개의 코드중 첫번째 코드는 html문 에서 <body> 다음에, 두번째 코드는 원하는 적절한 위치에 코드를 넣어주면 됩니다.
3. 티스토리 HTML/CSS 등록
1) 티스토리 관리 html/css 편집 창을 열어서 첫번째 코드를 <body> 바로 밑에 넣습니다. 스킨에 따라서 <body id="tt-body-page"> 로 나타날수 있습니다.
2) 두번째 코드는 원하는 곳에 넣으면 되는데 티스토리 기본댓글 과 잘어울리게 트랙백주소 바로 밑부분에 넣습니다. CTRL + F 로 검색하여 <div class="comment"> 앞 위치에 삽입합니다. 하지만 여기서 두번째 코드 블로그 주소 뒤에 를 추가 한후 삽입을 하여야만 합니다. 이 코드는 각 포스팅 글단위 별로 댓글을 달수 있게 해주는 치환자 입니다. 그렇지 않을경 모든 포스팅에 똑같은 댓글이 보여지게 됩니다.
<div class="fb-comments" data-href="http://juncheol.tistory.com" data-num-posts="5" data-width="650"></div>
3)티스토리 블로그에 페이스북 댓글 플러그인이 설정된 화면을 확인해 볼수가 있습니다.
cf) 현재 필자의 경우에는 <div class="comment"> 바로 앞 위치에 넣어더니 치환자가 안먹고 계속 모든 포스팅에 댓글이 동일하게 보여지는 오류가 있어서 태그 위에 오도록 위치를 변경하여 삽입하였습니다.
4.페이스북 댓글 모니터링 및 디버깅
1) 댓글이 정상적으로 장착 되었는지 확인 과 모니터링을 할수가 있는데 ☞ https://developers.facebook.com/apps 을 방문하여 앱 아이디를 확인합니다. 앱아이디를 확인한후 메타코드를 html/css 편집 창에서 <head> 바로 밑에 삽입합니다.
<meta property="fb:app_id" content="앱 아이디"/>
2)등록을 한후 ☞ Comment Moderation Tool : https://developers.facebook.com/tools/comments 을 방문하면 댓글 내용을 모니터링 할수가 있습니다. 또한 삭제도 가능합니다.
3)댓글 플러그인에 에러가 발생한다면 ☞ https://developers.facebook.com/tools/debug 페이지를 방문하여 에러 내용을 확인해 볼수가 있습니다.
페이스북 댓글 플러그인은 여러가지 장점이 있습니다. 해당 포스트에 페이스북 댓글을 작성하면 블로그 와 페이스북 동시에 등록이 되기때문에 일반적인 블로그 기본 댓글 플러그인 보다 좀더 활발하면서도 상호작용할수 있는 매커니즘 을 갖추어 놓을수 가 있습니다.
도움이 되셨나요?
'IT Tech > 블로그' 카테고리의 다른 글
| 티스토리 블로그 외부스킨 적용하기 (0) | 2015.12.18 |
|---|---|
| 블로그 다른글 추천 썸네일 위젯(linkwithin) 달기 (0) | 2014.12.31 |
| 티스토리 블로그 링크 라인 제거 및 색상 변경 하기 (0) | 2012.12.26 |
| 티스토리 블로그 글 예약 하여 내가 원하는 시간에 포스팅 하기 (0) | 2012.12.25 |
| 티스토리 블로그 카테고리 펼치기 (10) | 2012.12.24 |