페이스북 코멘트 소셜 플러그인, 블로그 완벽 설치법

페이스북에는 웹사이트와 연동해 기대효과를 얻을 수 있는 다양한 소셜 플러그인들이 있습니다. 최근들어 이 중 페이스북과 연동되어 블로그나 웹사이트에서 기존 댓글 기능보다 월등히 인터렉티브한 커뮤니케이션을 이끌어 내는 '코멘트(Comments)' 소셜 플러그인의 설치가 아닐까 싶습니다.

페이스북 소셜 플러그인 '코멘트(Comments)'는 블로그나 웹사이트에 의견을 남김과 동시에 SNS인 페이스북도 함께 업데이트 할 수 있어 친구들에게도 손쉽게 유용한 정보를 공유할 수 있다는 것이 큰 장점이자 매력인 까닭입니다.

그러나 설치과정에서 조금은 주의깊게 살펴야 할 부분이 있습니다. 웹과 HTML 지식이 있는 사용자라면 가이드에 따라 손쉽게 설치가 가능하지만 일반 사용자에게는 이마저도 어려울 수 있으며, 더욱 중요한 것은 겉으로는 정상적인 설치가 된 듯 하지만 몇가지 확인과정을 거쳐보면 제대로 설치되지 않아 무용지물 같은 결과를 초래하기도 합니다.

그런 까닭에 초보자를 위해 페이스북 '코멘트(Comments)' 플러그인 설치 시 체크해봐야 할 사항과 손쉬운 완벽설치 가이드를 안내해 드리니 도움이 되셨으면 합니다. 

먼저 페이스북 코멘트(Comments) 플러그인 설치 전.후로 아래 2가지 주요사항은 꼭 확인해봐야 하는 것을 기억하시길 바랍니다.

1. 설치전, 방문자 UX를 고려한 최적의 배치 포지션은 어디가 좋을 것인가?

2. 설치후, 해당 게시물이나 웹페이지가 페이스북 연동이 정상적으로 이루어지고 있는가?

참고로, 블로그 운영자를 위해 다음(daum)의 티스토리 블로그 기반으로 설명하도록 하겠습니다.

페이스북 '코멘트(Comments)' 소셜 플러그인 설치과정

[STEP 1]

먼저 페이스북 '코멘트(Comments)' 소셜 플러그인 기능을 사용하기 위해서는 페이스북 개발자 페이지로 접속해 소스코드를 생성해야 합니다.

페이스북 개발자 Social Plugins 페이지 - http://developers.facebook.com/docs/plugins/

위의 페이지 URL로 접속하면 아래와 같은 소셜 플러그인 가이드 페이지를 만나게 되는데 3번째 항목인 'Comments'링크를 클릭합니다.

[STEP 2]

Comments 항목을 클릭하면 아래와 같이 설정화면이 보여지게 되는데, 설정 항목별 설명을 덧붙이면 다음과 같습니다.

• URL to comments on - 설치할 블로그나 웹사이트 URL 주소 입력
• Number of Posts - 플러그인에 노출될 댓글의 수
• Width - 플러그인 가로폭
• Color Scheme - 플러그인 색상 지정

[STEP 3]

기본 값에서 설정값을 입력한 예시를 보여드리니 참고하시길 바랍니다. 아래의 예는 티스토리 블로그 2단 또는 3단 레이아웃 스킨에서 본문의 폭이 550px 이상인 레이아웃을 기초로 설정했으니 가로폭은 사용자가 적당히 조절하시면 됩니다.

 

[STEP 4]

설정값 입력이 끝나고 하단의 [Get Code]버튼을 클릭하면 아래와 같이 설정갑이 반영된 기본 스크립트 소스를 보여주는 팝업창이 나타나고 코멘트 소셜 플로그인 소스 코드를 얻게 될 것입니다.

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments href="designlog.org" num_posts="5" width="468"></fb:comments> 

[STEP 5]

이제 코멘트 소셜 플러그인 소스 코드를 생성했기 때문에 기본적인 과정은 끝난 셈입니다. 이제부터 블로그 게시물 별로 소셜 플러그인이 동작될 수 있도록 약간의 소스 코드를 수정해 주셔야 합니다.

기본적인 소스 코드 수정시, 다른 부분은 편집하지 마시고. 아래 예시와 같이 <fb:comments herf="   " 부분에 소셜 플러그인을 설치할 블로그 URL 뒤에 해당 게시물의 고유 링크 치환자를 추가로 넣어 주는 것이 핵심 포인트입니다. 티스토리 블로그의 게시물 고유주소 치환자는 [ ##_article_rep_link_## ]공통이므로 동일하게 적용하시면 됩니다.

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments href="http://www.designlog.org/[ ##_article_rep_link_## ]" num_posts="5" width="468"></fb:comments>

※ [ ##_article_rep_link_## ] 의  "[ ##" 과 "## ]"의 사이에 공백은 제거하시고 적용하세요  

이렇게 설치를 해야 구독자나 방문자가 자신의 페이스북 계정으로 해당 게시물의 링크가 연동되고 친구들이 링크를 따라 해당 게시물을 자세히 볼 수 있게 됩니다.

위와 같이 소스 코드 편집과정을 거치지 않고 기본 스크립트만 설치하게 되면 2가지 문제점이 발생하게 됩니다. 이유는 URL까지만 지정되어 있기 때문입니다.

1) 페이스북 공유 게시물 링크를 클릭하면 블로그 메인으로 접속되게 됩니다.

2) 블로그의 모든 게시물에 똑같은 댓글(Comments) 스트림이 노출되게 되며 정상적인 기능을 발휘하지 못하게 됩니다.

참고로 아래 이미지는 정상적으로 설치되었을 때의 모습을 담은 이미지입니다.

 

그리고 부연설명을 드리면 'Post to Facebook'을 체크하면 자신의 페이스북 담벼락에 해당 게시물을 공유하게 되며, 우측의 Posting as [사용자 이름] 뒤의 (Change)를 클릭하면 사용자가 운영 중인 여러 페이지로 해당 게시물이 멋지게 업데이트되게 됩니다.

끝으로 서두에 보여드린 이미지는 디자인로그의 포토샵 강좌 게시물을 운영 중인 페이스북 'Design' 페이지로 공유한 모습입니다. 아주 깔끔하게 링크 업데이트가 되어 있는 것을 확인할 수 있었을 겁니다. 여러분도 페이스북 '코멘트(commets)' 소셜 플러그인을 완벽하게 설치하셔서 많은 페이스북 사용자들과 보다 인터렉티브한 커뮤니케이션을 이루시길 바랍니다.