페이스북 댓글 박스 플러그인 설치 방법 (완벽 가이드)

log

by Dapy 2011. 3. 4. 10:53

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

그런데 정작 정보만 올려드리고 설치 방법에 대해서는 알려드리지 않았는데요 사실 어제 포스팅을 할려고 했는데 급 아이패드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_## ] 이렇게 주소를 사용하면 됩니다 블로그 서비스나 사이트마다 치환자는 다르게 사용되니 해당 치환자를 사용해 적용해 주면 됩니다 ([ ] 앞뒤에 한칸이 띄워져 있습니다 이는 치환자이기 때문에 포스팅을 위해 띄워놓았습니다 실제 사용시에는 붙여줘야합니다)

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

fbcomment.txt

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<head>

</head>

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

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

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

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

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

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

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

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

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