간혹 Tistory blog에 들어가면 위처럼 facebook의 comment를 달수 있는 사이트들이 있더군요.
저도 저번에 한번 달아보다가 잘 안되어서 그만두었는데, 이번에 다시 해서 결국에는 설치에 성공을 했습니다~ 저는 tistory에서 했지만, 설치형블로그나 홈페이지 사이트에도 적용이 가능할듯 합니다.
http://juncheol.tistory.com/104
위 글을 참고해서 따라했는데, 결정적으로 모든 댓글이 다 보여지는 오류가 있더군요. 한참을 헤메면서 찾아보니 티스토리의 치환자인 article_rep_link를 제대로 인식을 하지 못하는 문제인데, 위치를 변경해서 해결을 했습니다.
뭐 위의 최준철님의 글의 90%를 따라한것인데, 참고하시길 바라겠습니다.
우선은 페이스북 아이디를 가지고 계셔야 합니다. 없으면 우선 계정부터 하나 만드십시요.
https://developers.facebook.com/apps
그리고 위 사이트에 들어가시면 되는데, 우선 개발자로 등록을 해야 합니다.
오른쪽 상단의 register as a developer를 클릭하시면 됩니다.(뭐 이미 등록이 되신분은 건너뛰시면 됩니다.)
팝업창이 뜨면 I accept를 체크하시고, 계속하기를 선택...
Tell us about you는 입력하지 않고, 건너뛰기를 해도 무방...
그럼 이제부터 Facebook Developer로 등록이 된겁니다.
그리고나면 위와같은 화면이 뜹니다.
https://developers.facebook.com/apps
페이스북 댓글창을 만드는 방법은 검색을 해보면 몇가지가 있는듯한데 앱 만들기를 통해서 해보겠습니다.
우측 상단의 + 새 앱 만들기 버튼을 클릭합니다.
app name에 적절한 이름을 넣어주시면 되는데, 한글도 가능한데, 허용되지 않는 이름이라면 수정하시면 되고, 위 처럼 유효라고 나오면 계속하기 버튼을 클릭하시며 되며, 다른것은 입력하지 않으셔도 됩니다.
Require Captcha로 이미지를 보고 글자를 입력하면 되는데, 잘 안보이시면 다른 단어를 클릭하시면 다른 단어로 바뀌는데, 정확하게 입력하시고, 계속하기를 클릭...
그럼 이제 app을 하나 만든것인데, 설정화면이 나옵니다.
https://developers.facebook.com/apps/
차후에 수정을 하시려면 위 사이트에 들어가서 좌측 메뉴의 아까만든 앱의 이름을 클릭하시고, 설정버튼을 클릭하시면 위와 같은 화면이 다시 나옵니다.
설정에서 하단에 어떻게 앱을 Facebook과 통합시킬지 선택하세요 라고 써있는데, 그중에서 Website with facebook Login 에 자신의 사이트를 넣으시고, 변경 내용 저장을 누르시면 됩니다.
저는 danbisw.tistroy.com 라는 원래의 주소에 danbis.net 라는 2차 도메인을 가지고 있는데, 2차도메인을 넣어서 하셔도 양쪽 모두 적용이 되니, 2차 도메인을 입력하시면 됩니다.
이건 PC컴퓨터에서 크롬, 파이어폭스, IE같은 브라우저로 볼때 사용하는 댓글창인데, 위의 Mobile Web 등을 이용하면 스마트폰에서도 사용을 할수 있겠지만, 현재 티스토리가 모바일 스킨을 수정을 할수 없게 되어서 힘들듯 합니다.
암튼 여기까지 하시면 페이스북 앱이 만들어 진것이고, 이제는 댓글 플러그인 소스코드를 만들 차례입니다.
https://developers.facebook.com/docs/reference/plugins/comments/
위 페이지에 들어가시면 아래와 같은 화면이 뜹니다.
여기에서 하단에 보시면 코드를 생성하는 부분이 있습니다.
url to comment on에 자신의 사이트를 입력하고, Width는 자신의 본문 넓이만큼 넣으시면 되는데, 나중에 소스코드에서 수정을 해도 됩니다. Number of posts는 출력되는 댓글의 갯수입니다. color scheme는 스킨인데, 위의 사항을 변경을 하시면 하단에 미리보기로 제공이 됩니다.
다 하셨으면 Get Code 버튼을 클릭!
회원님의 Comments 플러그인 코드라고 나오는데, html5, xfbml, iframe, url 등을 지원하는데, 그냥 위 html5로 진행을 하시면 됩니다.
우선 1번에 있는 코드를 복사를 하시고, 티스토리 관리자화면 -> 꾸미기 -> html/css 편집에 갑니다.
그리고 맨위에서 조금 내려오시다보면 <body 라는 테그가 나오는데, 그 라인의 맨뒤에서 엔터를 누르신후에 아까 복사한 코드를 넣으시면 됩니다.
이번에는 2번째에 있는 코드를 복사를 하세요~
그리고 브라우저에서 ctrl + F 를 누르면 검색창이 나오는데, 거기에서 <div class="comment"> 라고 검색을 해보시면 아래부분에 해당 부분이 나옵니다.
그 윗부분에 코드를 넣어주시면 됩니다.
위 처럼 복사하시면 되고, 주석을 달으시면 나중에 알아보기 쉽겠지요~
그리고 그냥 끝나는것이 아니라 위의 data-href="http://블로그주소" 에서 [샵샵_ariticle_rep_link_샵샵] 를 / 없이 붙여서 입력을 하시면 됩니다.(## 을 샵샵이라고 표기를 했는데, 그냥 글자로 입력을 하면 안나와서 그러니 꼭 #으로 입력하세요)
[샵샵_article_rep_link_샵샵] 은 치환자로 예를 들어 이글의 주소는 http://danbis.net/13621 인데, 저 치환자가 실제로 브라우저에서 볼때는 /13621 로 변하게 됩니다.
그러니까 각각의 글마다 페이스북의 댓글이 달라야지 글마다 다른 댓글이 나오겠지요?
여기까지 하셨으면 저장을 하시고, 다른 탭에서 자신의 블로그의 글에 들어가서 보시면 페이스북으로 로그인된 댓글창이 보입니다.
테스트로 자신이 댓글을 달아보신후에, 다른 글에도 들어가서 테스트로 댓글을 달아보십시요.
만약 각각의 글마다 다른 댓글이 나오면 정상적으로 설치가 된것이고, 저처럼 모든 글마다 위처럼 같은 댓글이 보인다면 뭔가 문제가 있는 겁니다...-_-;;
혹시 이것처럼 경고! 이 댓글 플러그인은 호환 모드에서 작동하지만 아직 게시물이 없습니다. 모든 플러그인의 기능을 이용하려면 댓글 플러그인 설명서에 ㅁ여시된 href 를 지정해 주세요 라고 나온다면, 위에서 말한 과정중에서 뭔가 빠트리거나 엉뚱한곳에 소스를 집어넣은것이나 다시금 확인을 해보시기 바랍니다.
암튼 저 같이 모든 글마다 모든 페이스북의 댓글이 달리는 경우는 여러가지 이유가 있겠지만, 위에서 말한 [샵샵_ariticle_rep_link_샵샵] 치환자가 제대로 인식이 되지 않아서 그런듯 합니다.
이건 티스토리의 문제일수도 있지만, 스킨제작자가 스킨을 잘못 제작을 했을수도 있는데, 치환자가 인식되지 못하는 영역에 코드를 넣은 경우입니다.
마우스 오른쪽 버튼을 클릭해서 소스보기를 합니다. 단, 페이스북 댓글쪽에서 하지 말고, 본문이나 다른곳에서 소스 보기를 하십시요.
그리고나서 fb-comments 로 검색을 해보시면 아까 입력한 부분이 나오는데, [샵샵_ariticle_rep_link_샵샵] 치환자가 제대로 인식이 됬다면 data-href="http://danbis.net/13621" 이라고 나와야 하는데, 그냥 블로그 주소만 나와있습니다.
저 코드는 페이스북에게 http://danbis.net/13621 의 글에 해당 하는 댓글을 620 사이즈로, 7개만 출력해달라는 이야기인데, 글 번호가 없으니 모든 댓글이 다나오는 겁니다.
그래서 이곳저곳으로 옮겨보다보니 드디어 인식이 되네요.
검색을 해보면 대부분의 글들이 <div class="comment"> 위에 입력을 하라고 나오는데, 저는 그렇게하면 인식을 못하고, 그위의 <s_rp> 위에 붙여 넣기를 하니 이제는 제대로 인식을 하네요~
이제는 소스보기를 해서 보니 danbis.net/13602 라고 블로그 주소가 제대로 나옵니다.
이제는 테스트를 해봐도 잘됩니다.
뭐 저는 한칸위로 올려서 해결을 보았는데, skin에 따라서 되고 안되고 할수도 있는데, 제가 한것처럼 소스코드의 위치를 옮겨서 해보시기 바라겠습니다.
마지막으로 소셜 댓글을 확인할수 있도록 해야 하는데, 티스토리 자체에서는 확인이 안되고, 페이스북에서 확인을 해야 합니다.
스마트폰 앱을 설치하면 되려나요? 이것도 테스트를 해봐야겠네요.
https://developers.facebook.com/apps/
다시 위 페이지에 가시면 앱 ID/API 키 라는 숫자가 있습니다. 그것을 복사하세요~
그리고 다시 스킨 html 수정 페이지에 가셔서 skin html 에 보시면 맨윗부분에 <meta 라는 테그가 나오는데, 위처럼 <meta property="fb:app_id" content="복사한숫자" /> 라고 입력해주세요.
이제 페이스북 개발자로 등록을 했고, 댓글도 설치를 하고, 매번 제 블로그의 페이지를 불러올때 마다 이 페이지는 페이스북 개발자 누구의 페이지다라는것을 알려준다고 보시면 됩니다.
https://developers.facebook.com/tools/comments
그리고 위 페이지에 가시면 댓글을 모아서 볼수 있습니다. 물론 여러개의 사이트에 적용을 하신다면 왼쪽에 해당 사이트의 앱을 클릭하시면 되는데, 여기에서 조회, 삭제, 좋아요 Like기능, 답글달기, 게시물 받아보기 등이 설정 가능하며, 자신의 블로그의 페이스북 댓글창에서 좌측상단의 Moderator View는 계층형 댓글이 아니라, 시간순서로 보여주는 방식입니다.
그리고 우측상단의 설정을 통해서 금칙어나 다른 로그인 제공업체(야후, aol, 핫메일)의 계정으로 로그인을 해도 댓글쓰기가 가능하게 할수 있습니다.
물론 댓글을 달면 페이스북의 타임라인에 어떤 글에 어떤 댓글을 달았는지도 나타납니다.
그리고 facebook에 로그인되어 있는 상태라면 페이스북 계정으로 댓글을 달수있지만, 이외에도 yahoo, aol, hotmail 등으로 로그인을 해서도 댓글이 가능한데, 경쟁사인 트워터는 지원을 하지 않습니다.
간혹보면 본문 하단에 달아놓은 페이스북의 좋아요(Like) 버튼을 눌러주시기도 하는데, 이 경우는 댓글과 함께 외부 링크로 가져가기 때문에 구글이나 네이버같은 검색 엔진 최적화 SEO 측면에서도 좋지 않을까 싶은데, 기회가 되시면 한번 달아보시면 좋을듯 합니다.
6개월정도 사용을 하다가 현재는 내려두었는데, 페이스북 사용자분들이 댓글을 많이 달아주기는 하는데, 블로그의 로딩시간이 좀 오래걸려서 내려놓았는데, 달아보시고 크게 문제가 없다면 계속 사용하시는것도 좋을듯 합니다.
포털 검색엔진 상위 노출을 위한 블로그 포스팅 제목정하는 방법 - 제목 찾기로 할것인가? 선택 동기로 할것인가?
검색엔진과 사용자가 좋아하는 블로그 글쓰기시의 포스팅 제목 정하는 작성 방법 팁과 노하우
올포스트에 블로그 글을 발행하는것은 득일까 실일까? olpost의 장단점과 칼럼니스트를 해지하고 글삭제하는 방법
워드프레스 워드캠프 서울 2013 (WordPress WordCamp Seoul 2013) 행사 참석 후기