웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > webdevetc

Facebook Comment 사용방법 및 알림 설정하기

Last Modified : 2017-12-07 / Created : 2017-12-07
4,130
View Count

페이스북의 댓글 기능을 추가하고 사용하는 방법에 대하여 알아보려합니다. 먼저 제가 페이스북 댓글을 사용하는 이유는?



# 페이스북 댓글을 사용하는 이유

사실 초기에는 webisfree.com에서 직접 소셜 기능의 댓글 서비스를 지원했습니다. 이 경우 다양한 SNS의 api를 연결하여 로그인 기능 역시 가능해야했는데 결국 개발 및 관리에 시간을 많이 소비하는 문제가 있습니다. 또한 로그인할 경우 회원 역시 관리가 필요했고 개인정보 동의 등 신경 쓸 부분이 많았죠...

물론 장점도 많을 수 있지만 새로운 글을 올리고 제공하는 현재의 웹서비스에서는 큰 장점을 찾기는 어려웠습니다. 이런 이유를 종합하면...

  • 소셜은 페이스북의 비중의 워낙 커 페북만 써도 큰 차이 없음
  • 방문자의 댓글 사용 비중이 전체적으로 높지 않음. 댓글 서비스 보다는 좀 더 많이 사용하는 서비스에 집중하기로 함

어쨌든 결국 모든 댓글 서비스를 들어내고 현재는 페이스북에서 지원하는 댓글 서비스만 사용하고 있습니다. 페이스북 댓글 역시 반응형을 지원합니다.


# 페이스북 댓글 사용방법

페이스북을 사용하려먼 facebook에서 제공하는 sdk와 댓글이 들어갈 부분에 적용할 소스코드가 필요합니다. 둘 다 페이스북 개발자 페이지에서 얻을 수 있습니다.

페이스북 댓글 코드정보 바로가기 >
https://developers.facebook.com/docs/plugins/comments?locale=ko_KR

SDK와 댓글 모두 위 링크에서 찾을 수 있습니다.

@ comment.html
<div class="fb-comments" data-href="siteUrl" data-numposts="5"></div>

위 코드를 댓글이 넣고 싶은 자리에 추가합니다. 위 코드는 sdk는 빠져있으니 알아두세요. sdk는 위 링크에서 찾을 수 있습니다. 또한 페이스북을 사용중이라면 이미 sdk가 포함되었을 수 있으니 확인이 필요합니다.


# 페이스북을 앱 계정 또는 관리자에 연결하기

페이스북 댓글을 사용할 경우 메타 태그를 사용하여 페이스북에 존재하는 앱계정과 연동하거나 아니면 관리자 계정을 지정할 수 있습니다. 이렇게해야만 댓글이 추가되거나 기타 상황들을 앱계정의 안내를 통해서 전달받을 수 있으며 작성된 댓글들을 관리할 수 있게됩니다.

@ comment.html
<meta property="fb:app_id" content="app id" />

위 html 코드는 자신이 가지고 있는 app id를 사용하여 연동하는 방법입니다. 이제 등록된 app의 Acrivity Log에서 어떤 일이 생겼는지 확인이 가능합니다. (참고로 app id를 웹사이트에 늦게 등록하게되면 이미 등록된 댓글의 정보를 받기 얻기 어렵습니다.)

? 앱 아이디가 뭔가요
app id는 페이스북에 페이지를 개설할 경우 제공되는 고유 id입니다. 이를 댓글 서비스에 등록.. 연동하여 사용할 수 있습니다.


! 관리자을 지정하는 방법

이번에는 댓글에 app id가 아닌 관리자를 지정합니다. 참고로  댓글에 연결 가능한 것은 fb:app_id 또는 fb:admins 중 단 하나만 지정할 수 있으니 꼭 알아두세요.

@ comment.html
<meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID}"/>


# 현재 페이지에 작성된 댓글의 수, comment count

작성된 댓글의 개수는 아래와 같이 코드를 사용하여야 알 수 있습니다. 페이지가 로딩되면 아래 html 태그에 자동으로 현재 카운트 숫자가 비동기식으로 추가됩니다.
<span class="fb-comments-count" data-href="https://example.com/"></span>
현재 webisfree의 상단에 나오는 커맨트 숫자도 이 코드가 적용된 부분입니다. 아래 스크린샷을 봐주세요.

스크린샷) 댓글 숫자가 나오는 부분
이제 페이스북 댓글기능의 많은 부분을 함께 알아보았습니다.



# 마치면서

댓글은 사용자들이 콘텐츠에 더 관심을 가지도록 유도하면 웹페이지에 더 높은 로열티를 제공하는 유용한 기능입니다. 댓글 기능을 모두 구현할 경우 필요한 물리적 시간 등이 많이 필요하므로 요즘은 페이스북 댓글 하나.. 또는 소셜 댓글인 Disqus등이 많이 사용되죠.

Previous

레거시 함수, 레거시 코드란 무엇인가?

Previous

git이 왜 필요하나. 반드시 써야하는가?