티스토리 블로그 페이스북 댓글 사용 방법

페이스북 댓글

블로그 몇 년 쉬다 다시 시작하려니 처리해야 할 일이 너무 많네요. 도메인하고 닉네임 변경하고 스킨까지 변경하였더니 처리해야 할 일이 태산입니다. 요즘은 SNS 계정을 정리 변경하고 있는데 한 숨만 나오네요. SNS 계정 정리하며 예전에 사용하던 SNS 공유 버튼을 재활용하려고 소스를 긁어와 붙여 넣었더니 엉망진창 되어 버리더군요. 새로 페이스북 좋아요 버튼을 가져와 붙였는데 모양이 영 마음에 안듭니다. 페이스북 좋아요 버튼은 그나마 다행이더라고요. 아예 사라져 버린 버튼도 있고 버튼 모양이 어이 없게 바뀌어 버린 것도 있더라고요. 예전의 버튼들은 마음에 들었는데 말이죠. 찜찜한 기분으로 SNS 사이트의 개발자 페이지 뒤적이다 페이스북 댓글 플러그인을 설치해 버렸습니다.


페이스북 댓글 플러그인

요렇게 생긴 것이요. 예전에 잠시 사용했었는데, 뭐 마음엔 안 들지만 다시 사용하려고요. 그 동안 SNS도 모두 안하고 있던 터라 소통할 채널도 필요하고 그리고 블로그 게시물을 확산 시킬 수 있는 다른 마땅한 것이 없으니 울며 겨자 먹기로~

 

예전부터 페이스북은 싸이월드 같은 기분이 들어서… 여튼 오늘은 티스토리 블로그에 페이스북 플러그인을 설치하는 방법을 알려드리겠습니다. 뭐 크게 어려운 것은 없습니다만 약간 아리송한 부분은 있을 수 있습니다.


페이스북 소셜 플러그인

페이스북 개발자 페이지에 있는 소셜 플러그인 페이지(https://developers.facebook.com/docs/plugins)로 이동하면 댓글, 팔로우버튼, 좋아요 버튼, 페이지 플러그인 등 다양한 플러그인을 사용할 수 있습니다.

페이스북 댓글 플러그인


페이스북 댓글 플러그인

좌측 메뉴 중 댓글을 클릭하면 페이스북 댓글 플러그인 페이지(https://developers.facebook.com/docs/plugins/comments)가 열립니다. 화면을 끌어 올리면


페이스북 댓글 플러그인 코드 생성 도구

위와 같은 댓글 플러그인 코드 생성 도구가 있습니다. 여기에서 중요한 곳이 ‘댓글을 남길 URL’ 항목과 ‘너비’ 항목입니다. 댓글을 남길 URL에 자신의 블로그 도메인만 넣으면 페이스북 댓글 플러그인은 제대로 작동하지 않습니다. 댓글이 달리긴 하는데 각 게시물에 댓글이 달리는 것이 아니라 도메인에 달리게 됩니다. 이 글의 주소가 http://mongri.net/2892 입니다. 만약 플러그인 코드 생성 도구에서 블로그 도메인만 넣었을 경우엔 이 글에 댓글을 달아도 http://mongri.net 에 댓글이 달리게 됩니다. 댓글이 엉뚱한 곳에 달리게 되는 것이죠.

 

너비 항목은 숫자로 지정하거나 비워 둘 수 있는데, 반응형 스킨에 사용할 것이면 100%로 지정해야 합니다. 너비 100%로 지정하면 너비가 얼마든 사용 가능한 최대 너비로 보여 집니다. 모바일로 접속하면 그 화면 크기 정도로 나올 것이고, PC로 접속하면 브라우저 너비 크기로 나오게 되는 것이죠.


댓글을 남길 URL 및 너비 설정

댓글을 남길 URL에는 티스토리 치환자 [##_article_rep_link_##]를 이용하여 입력하면 각각의 게시물에 댓글이 달리게 됩니다. 예시 http://mongri.net[##_article_rep_link_##] 이런 식으로 말이죠. 운영하는 블로그 도메인 뒷에 [##_article_rep_link_##]만 붙여 주면 됩니다. 너비는 100%로 입력하고, 게시물 수는 적당한 숫자를 입력해주면 되네요. 펼쳐 보기 기능이 있으니 10미만의 숫자로 입력하시면 됩니다. 모든 항목을 입력한 후 좌측 하단에 있는 코드 받기 버튼을 클릭하면


앱 ID 및 언어를 선택하세요

위와 같은 창이 열리며 소스가 나타납니다. 이미 App ID가 있다면 그걸 사용하면 되고요. 없다면 페이스북 개발자 페이지에서 새로 만들어 사용하면 됩니다. 공짜이니 시간만 투자하면 만들 수 있네요. App ID 만드는 방법은 ‘페이스북 플러그인 설치를 위한 App ID 만들기‘ 글을 참고하시면 되겠습니다. 나는 개발자도 아닌데 왜 이걸 만들어야 하느냐 물으신다면? App ID를 이용하여 페이스북 댓글 플러그인을 설치하면 댓글 관리나 관리자 지정 등의 관리 기능을 이용할 수 있습니다. 만약 나는 댓글 관리 같은 것은 귀찮아서 하지 않는다 하시는 분들은 App ID 없이 그냥 소스 복사해서 사용하시면 됩니다.


스킨 댓글 위치에 두 번째 소스 삽입

2번 소스는 스킨 편집에서 페이스북 댓글창 위치에 넣어 주면 됩니다. 참고로 몽리 블로그에는 태그와 댓글 사이에 넣어 두었습니다.


바디 아래 줄에 1번 소스 삽입

1번 소스는 <body> 아래 줄에 붙여 넣어 주면 됩니다.


메타 태그에 페이스북 앱 ID 삽입

만약 App ID를 이용하여 페이스북 댓글 플러그인을 설치하신다면, 댓글 관리를 위해 스킨에 메타 태그 한 줄 넣어 주셔야 합니다. <meta property=”fb:admins” content=”appid”/> 중 appid 부분을 자신의 App ID로 바꿔준 후 스킨 상단 메타 태그 있는 곳에 한 줄 추가해 넣으면 됩니다. App ID는 페이스북의 댓글 플러그인 소스 부분에 있으니 쉽게 확인할 수 있습니다.

티스토리 블로그 페이스북 댓글


페이스북 댓글 플러그인 적용 전

몽리 블로그 페이스북 댓글 플러그인 적용 전 모습은 이랬고요.


페이스북 댓글 플러그인 적용 후

페이스북 댓글 플러그인 적용 후 모습은 이렇습니다.


페이스북 댓글

페이스북 댓글은 이런 식으로 달리게 됩니다. 예전에는 페이스북에도 게시가 기본으로 체크 되어 있던 것 같은데.. 이게 언제 바뀌었나요 아니면 잘못 알고 있었나요. 댓글 달림과 동시에 페이스북에 공유되는 것이 훨씬 더 좋은데 좀 아쉽습니다. 그리고 이게 새로 만든 App ID라서 그런 것 같은데 원래 댓글 플러그인 상단 부분에 도구 버튼이 나타납니다. 


페이스북 댓글 관리 화면

댓글 관리 화면입니다. 이곳에서 페이스북 댓글 플러그인으로 작성된 댓글을 관리할 수 있습니다.


페이스북 댓글 관리 화면

오래전에 잠시 사용했던 App ID로 다시 접근하여 댓글 관리 화면을 캡쳐~ 뭐 이런식으로 댓글을 관리할 수 있습니다. 끝~

Leave a Comment