paperinz™ (페이퍼린즈) :: 페이스북 댓글 박스 플러그인 설치 방법 (완벽 가이드)

Clip to Evernote

 

그저께 블로그에서 페이스북의 댓글 플러그인 기능 향상소식을 전해 드렸습니다  그리고 그날 저녁부터 본블로그에도 설치를 해서 테스트를 하는 중입니다 (라이브리 소셜댓글도 설치가 되어 있어 좀 정신이 없군요  방문하시는 분들에겐 죄송해요 ^^;;;)  일단 테스트를 시작한지 얼마 되지는 않았지만 생각했던것 이상으로 매력적인 기능입니다  현재는 페이스북 계정만 이용이 가능하지만 추후 다른 서비스 업체가 추가된다면 충분히 도입할만 합니다 


그런데 정작 정보만 올려드리고 설치 방법에 대해서는 알려드리지 않았는데요  사실 어제 포스팅을 할려고 했는데 급 아이패드2 관련 포스팅을 하다보니 체력이 딸려 정리를 하지 못해 이제서야 올립니다  관심은 있지만 설치 방법을 몰라 설치는 못 하고 있는 분도 있지 않을까 싶은데요  조금이나마 도움이 되었으면 싶네요


설치 방법은 간단합니다  우선 기본적으로 페이스북 댓글 박스 플러그인을 사용하려면 페이스북 앱을 만들어야 합니다  페이스북 앱이 있어야 댓글 관리 기능도 이용을 할 수 있습니다  앱은 http://dapy.in/h9qspp 이곳에서 만들수 있습니다  3가지 항목만 입력하면 생성이 되기 때문에 간단하게 만들 수 있습니다  다만 주의해야 할 점은 두번째 항목인 Site URL 입력시 주소끝에 / 를 붙여줘야 합니다  즉 http://paperinz.com/  이렇게 입력을 해야 생성이 됩니다


앱이 생성되면 다른건 신경 안 써도 됩니다  오직 하나만 체크하면 되는데요  App ID 입니다  요건 댓글 박스 코드 와 관리 기능 코드에 사용되기 때문에 필요합니다  생성된 앱은 개발자 사이트 my apps 에서 언제든지 편집, 삭제가 가능합니다



앱 생성화면입니다  3가지 항목만 입력하면 됩니다 

두번째 주소 입력시 마지막에 꼭 / 이걸 붙여야 합니다



앱이 생성되면 이런 저런 정보들이 나오는데요  신경 안 써도 됩니다

App ID 만 체크하면 됩니다  App ID 는 노출하면 안 됩니다 (위는 이미 삭제된 앱인지라)



생성된 앱은 개발자 사이트 my apps 에서 편집, 삭제할 수 있습니다

http://dapy.in/glKdz0 여길 클릭하면 접속가능합니다



그럼 앱이 준비되었으니 사이트에 설치할 댓글 박스 플러그인의 코드를 생성해야겠죠  http://dapy.in/hlBxir  이곳에서 코드 생성이 가능합니다  사이트 주소와 보여줄 포스트수, 가로폭을 입력한후 Get Code 버튼을 누릅니다  그럼 작은 박스가 뜨면서 코드를 제공해 줍니다  여기서 주의깊게 살펴야 할 부분은 appId 부분입니다  appId 뒤에 숫자가 위에 생성한 App ID 와 동일한지 확인을 해야 합니다  아마 제대로 생성을 했다면 동일하게 나올겁니다  동일하지 않다면 직접 수동으로 변경해줘도 됩니다


그리고 또하나 확인해야할 부분은 주소 부분입니다  일단 제가 사용하는 티스토리를 기준으로 설명하면 개별 페이지 url 을 인식하게끔 하기 위해서는 치환자를 사용해야 합니다  티스토리에서 개별 url 을 인식하는 치환자는 [ ##_article_rep_link_## ] 입니다  즉 제 블로그 주소를 사용한다면 http://paperinz.com[ ##_article_rep_link_## ] 이렇게 주소를 사용하면 됩니다  블로그 서비스나 사이트마다 치환자는 다르게 사용되니 해당 치환자를 사용해 적용해 주면 됩니다 ([ ] 앞뒤에 한칸이 띄워져 있습니다  이는 치환자이기 때문에 포스팅을 위해 띄워놓았습니다  실제 사용시에는 붙여줘야합니다)


본문에 언급되는 코드는 드래그 및 우클릭 방지 코드 때문에 아래 메모장 파일에 모두 넣어놓았습니다  메모장 파일을 열면 모두 볼 수 있습니다



기본적인 코드 세팅은 끝났습니다  이 코드를 블로그 적절한 위치에 삽입하면 됩니다  저는  티스토리 기본 댓글 바로 위에 설치했습니다



댓글 플러그인 생성 화면입니다 3가지 항목을 입력해 주면 됩니다 

이 항목들은 코드에서 바로 수정이 가능합니다



Get Code 버튼을 누르면 이렇게 창이 뜨면서 코드를 제공해 줍니다 

하단에 보면 registering your site 버튼이 있습니다 

이걸 클릭하면 위에서 만든 페이스북 앱 생성 페이지로 이동합니다



<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=앱아이디&amp;xfbml=1"></script><fb:comments href="블로그주소[ ##_article_rep_link_## ]" num_posts="3" width="500"></fb:comments>

코드는 위와 같은 형태입니다

기본으로 en_US 라고 되어 있는데  ko_KR 로 바뀌면 한글로 버튼이 나옵니다

앱아디디 부분 위에서 생성한 페이스북 앱 아이디가 들어가게 됩니다

블로그주소에 치환자 꼭 써주셔야 개별 페이지 url 이 먹힙니다



저는 티스토리 기본 댓글 바로 위에 설치를 했습니다



제대로 설치가 되었다면 댓글을 작성해 보세요 

그럼 위처럼 페이스북 담벼락에 쓰여질때 글의 제목도 같이 보이게 됩니다



여기까지 제대로 설치가 되었다면 8부 능선은 넘은 셈입니다  이제 댓글 박스를 설치했으니 이 댓글 박스를 관리할 수 있는 기능도 필요합니다  관리 기능을 통해 댓글 숨기기, 유저 밴, 블랙리스트 단어 등록 등 여러 기능을 사용할 수 있게 됩니다  방법은 간단합니다  블로그 스킨 수정에 들어가서 <head> ~ </head> 부분에 코드를 한줄 넣어주기만 하면 됩니다  이때 필요한게 위에 생성한 페이스북 앱 ID 입니다  코드는 아래와 같습니다

 

<head>

<meta property="fb:app_id" content="페이스북 앱 ID">

</head>



이후부터 댓글이 달리게 되면 댓글 관리 툴에서 모두 확인이 가능하며

여러 관리 기능의 사용이 가능합니다 

댓글 관리 사이트는  http://dapy.in/h5FD06 이곳으로 접속을 하면 됩니다

따로 접속 경로가 없습니다  북마크 해놓는게 좋습니다



뿐만 아니라 사이트의 댓글 창에서도 바로 관리 기능 사용이 가능합니다



아래 기능은 페이스북 개발자 블로그에는 된다고 올려져 있지만 작동이 되지 않습니다

여기에 하나 더 추가를 하자면 댓글 박스에 추가되는 모든 댓글을 페이스북의 노티 기능을 통해 알려주는 기능도 있습니다  역시 위처럼 <head> ~ </head> 부분에 코드 하나만 추가해 주면 되는데요  이상하게 저는 이게 현재 작동을 안 하는군요  추가할 코드는 아래와 같습니다 

 

<meta property="fb:admins" content="페이스북 계정 ID">

 페이스북 계정 ID 는 숫자를 사용하세요


이로써 페이스북 댓글 박스 플러그인 설치는 완료 되었습니다  사용해 보시면 무척 편리하다는 것을 느낄 수 있습니다  적극적으로 활용하셔서 사이트에 도움이 되었으면 좋겠네요



신고
내용이 맘에 드셨다면 손가락 한번 꾹!! 고마워요 ^^*

Clip to Evernote


  1. 이전 댓글 더보기
  2. Favicon of http://copycats.tistory.com/ BlogIcon copycat
    2011.03.11 03:58 신고

    아는 블로거님들에게 많이많이 알리는중입니다. ㅎㅎ

  3. si
    2011.03.17 16:45 신고

    안녕하세요, 좋은 글들 잘 보고 있습니다.
    한가지 질문이 있는데,
    혹시 google blogger에서 어떻게 활용하는지 아세요?
    제가 blogger의 치환자(?)를 몰라서 그런것 같은데..
    혹시 아시면 알려주시면 감사하겠습니다.

    • Favicon of http://paperinz.com BlogIcon Dapy
      2011.03.17 21:06 신고
      댓글 주소 수정 및 삭제

      제가 Blogger 를 사용하지 않아서 모르겠는데요 검색해보니 설명해 놓은 해외 사이트가 있네요

      http://www.damondnollan.com/2011/03/how-to-add-facebook-comments-to-googles.html

      요걸 참조하세요 ^^*

    • si
      2011.03.18 01:07 신고
      댓글 주소 수정 및 삭제

      감사합니다.
      사실 적어주신 내용을 검색해서 이미 시도 해봤었는데,
      되지 않았었거든요.
      근데, Dapy님께서 알려주신거라 다시 해봤더니,...되네요.
      사이트에 보면, 해당 코드 입력을 draft.blogger에서 하라고 되어 있었는데, 그걸 무시하고 해서 그런것 같기도 하네요(확실하지는 않지만).

    • Favicon of http://paperinz.com BlogIcon dapy
      2011.03.18 08:32 신고
      댓글 주소 수정 및 삭제

      아~ ㅋ 함튼 된다니 다행입니다 페북 댓글로 보다 멋진 블로거가 되길 바라겠습니다

  4. Favicon of http://kwonik2.tistory.com/ BlogIcon 권익이
    2011.03.18 02:57 신고

    궁금한게 있는데요, '페이스북 계정ID' 는 어떻게 확인하나요? 페이스북 URL을 변경했는데요...--;

    • Favicon of http://paperinz.com BlogIcon dapy
      2011.03.18 08:36 신고
      댓글 주소 수정 및 삭제

      그거 저도 이것 저것 시도해 봤는데 페북 내에서는 확인이 안 되더라구요 ㅋ

      http://www.facebook.com/insights/ 요기 가셔서 우측 상단에 insights for your website 버튼을 누르면 박스가 뜹니다 link with 항목에 자신의 페북 계정을 선택하면 그 하단에 메타 태그가 나오는데요 거기에 나오는 숫자가 계정 id 입니다

    • 권익이
      2011.03.18 15:49 신고
      댓글 주소 수정 및 삭제

      와우! 감사합니다. 역시, 물어보는게 제일 빠른 길이네요^^;

  5. Favicon of http://www.bluebus.kr BlogIcon 블루버스
    2011.03.22 14:01 신고

    붙이긴 잘 붙였는데 댓글 창 내에 관리만 표시되질 않아요.ㅎㅎ
    그래도 당장 문제는 없겠습니다.

  6. Favicon of http://redmato.com BlogIcon 호련
    2011.03.26 19:46 신고

    덕분에 잘 달았습니다!! 그런데 하단에 경고가 뜨면서 'Warning: http://redmato.com//1015 is unreachable.' 라고 나오는데... 이건 왜 그럴까요?ㅠ 앱 id가 invalid하다고 뜨는군요...페이스북 개발자 문서를 보면 정확히 넣은 듯 한데 이상하네요 ㅠ.ㅠ)

    • Favicon of http://redmato.com BlogIcon 호련
      2011.03.26 20:02 신고
      댓글 주소 수정 및 삭제

      앗ㅎ 다른 포스팅은 제대로 나오는군요. 처음에 잘못한게 아직 남아 있어서 그런지..ㅎㅎ 덕분에 정말 좋은 팁 얻었습니다. ^0^ 감사해요~

    • Favicon of http://paperinz.com BlogIcon Dapy
      2011.03.27 10:37 신고
      댓글 주소 수정 및 삭제

      unreachable 은 정상적인 경우에는 뜨는 경우가 생기는데 페북에서 인식하는데 시간이 약간 걸리기 때문인듯 싶어요 새로 글을 포스팅한경우 이런 일이 자주 발생합니다 ㅋ

      페북 댓글로 더욱 멋진 블로그로 거듭나길 바라겠습니다 ^^*

  7. Favicon of http://greyblood.tistory.com BlogIcon 신c
    2011.04.04 17:47 신고

    덕분에 잘 설치했습니다.

  8. Favicon of http://blog.anyang.go.kr BlogIcon 안양시티
    2011.04.08 14:53 신고

    좋은 글 덕분에 잘 달았습니다. 감사합니다 ^^

  9. gameholic
    2011.04.08 22:03 신고

    그런데 페이스북 댓글 쓸때 자신의 프로필 말고 자신의 페이지가 링크되도록 올릴 수 없나요?

    • Favicon of http://paperinz.com BlogIcon Dapy
      2011.04.08 22:50 신고
      댓글 주소 수정 및 삭제

      댓글 쓸때 개인 계정 말고 페이지를 선택해서 글을 쓸 수 있습니다 저는 모든 답변을 페이스북 페이지로 선택해서 납깁니다 댓글창 하단 우측편에 있어요

  10. Favicon of http://pang2love.tistory.com BlogIcon 황팽
    2011.04.29 13:41 신고

    좋은글 감사합니다.
    질문이 하나 있어서요.
    잘 따라서 했는데
    시험삼아 제 블로그에 페이스북 계정으로 댓글 썻는데
    페이스북에 노출되는 블로그 글 정보와 메인 이미지가 다른 분들과 좀 다른데
    그거 자체를 설정하는 방법이 있나요??

  11. Favicon of http://livespot.tistory.com BlogIcon 연하킬러
    2011.05.11 21:25 신고

    아...대박입니다. 바람처럼님 소개받고 글 보고 넣었더니 ㅠㅠ 제 블로그도 페북댓글과 연동이 되었어요. 저도 뭔가 해낸느낌 ㅋㅋ 감사합니다. 블로거분들은 여러모로 좋은 일을 하시네요 ㅋㅋ

  12. 김민영
    2011.05.23 22:56 신고

    헙...따라해본다고 했는데..중간에서 스톱! 어려워요...ㅠ

  13. Favicon of http://phototour.tistory.com/ BlogIcon 임종태
    2011.05.24 16:55 신고

    요즘 문제가 되는지 에러가 많이 나는군요.
    더군다나 이제는 덧글달기 창이 스크립트는 제공 안되고..다이나믹만 제공 되는 듯...

  14. Favicon of http://phototour.tistory.com/ BlogIcon T
    2011.07.06 17:35 신고

    App id를 적용했음에도 불구하고 전 왜 Comment Moderation Tool에 항상 0 이라고만 나올까요?
    사람들이 덧글을 달아도 달았는지안달았는지를알기가 어렵더군요.
    관리하는 기능에 대해서 전 적용이 안되네요.

    • Favicon of http://paperinz.com BlogIcon Dapy
      2011.07.06 18:42 신고
      댓글 주소 수정 및 삭제

      음 저는 잘 되는데 뭐가 문제일까요? 현재 제가 설명한 내용이 예전이라 설치 방법이 좀 바뀌었던데 확인할 시간이 없어 그냥 손 놓고 있었네요. 관련 내용 다시 한번 살펴보겠습니다.

  15. 이리터
    2011.09.07 22:40 신고

    잘 배워갑니다 !

  16. Favicon of http://cocosoft.kr BlogIcon 정찬민
    2011.09.22 16:07 신고

    html 5 코드도 이번에 나왔더라구요 그걸 적용하는방법은 없나요?

    • Favicon of http://paperinz.com BlogIcon Dapy
      2011.09.22 17:30 신고
      댓글 주소 수정 및 삭제

      앗 그런가요? 요즘 좀 바빠서 확인할 틈이 없었네요. 그거에 관한 포스팅은 아직 없습니다. 주말에 함 살펴봐야 할듯 싶어요.

  17. Favicon of http://www.evboyatadilat.com BlogIcon tadilat
    2012.01.12 09:26 신고

    아주 맘에 들어요

  18. Favicon of http://ulsanmalgum.tistory.com/ BlogIcon 수에르떼
    2012.01.30 11:53 신고

    저는 티스토리 도메인이라 안되는건가요?
    개인 도메인을 사용하는 사이트만 가능한가요?
    도메인등록이 안되서 앱 생성도 안되네요 ㅠㅜ
    딴분들 보니 티스토리 도메인도 다신분들 계시네요..
    일단 더 연구해보고 성공 시킬께용 ㅋㅋ

  19. Favicon of http://jinsoo1.dothome.co.kr BlogIcon JJ
    2012.09.03 14:49 신고

    안녕하세요 현제 웹 포폴을 만들고 있는데 게시판을 페이스북 연동해서 사용하려고 합니다~

    그런데 넘 어렵네요~ㅋㅠ.ㅠ

    어떻게 하다보니 되긴 했는데 다른 브라우저에서는 글이 써지는데 IE에서만 글이 안써져요~

    왜그런지 혹시 아시는지요..ㅠ.ㅠ

    참고로 제가 현제 작업중인 사이트 올려봅니다~

  20. 여기
    2012.09.20 11:47 신고

    이 댓글박스는 뭐죠?

  21. Favicon of http://uc.ns01.biz/ BlogIcon 도궁넷
    2016.07.14 14:49 신고

    북한야동【 EC.DNSET.COM 】가이아나야동
    남한야동【 EC.DNSET.COM 】감비아야동
    가나야동【 EC.DNSET.COM 】과테말라야동
    가봉야동【 EC.DNSET.COM 】그레나다야동
    그리스야동【 EC.DNSET.COM 】기니비사우야동
    기니야동【 EC.DNSET.COM 】나고르노카라바흐공화국야동