SNS 중에서도 facebook은 정말 많은 이용자 층을 가지고 있고 다양한 플러그인을 제공하고 있습니다. 또한, 친구들과 공유하기가 쉽고, 재미가 있다는 점 등으로 인해 많은 분들이 사용하는 서비스인데요. 페이스북의 플러그인을 활용하면 자신의 블로그나 사이트 등에 페이스북으로 곧장 공유가 가능한 댓글 창을 설치할 수 있습니다.
과거에는 '그거 뭐 별 거 있겠어?' 같은 생각 때문인지 페이스북의 파괴력을 간과했던 것인지 아니면 잘 몰라서였는지 이유는 알 수 없지만 큰 호응을 얻지 못했던 방법이었습니다만 요즘에는 거의 왠만한 사이트에는 대부분 페이스북 댓글 창이 설치되어 있습니다. 오히려 없는 곳을 찾기가 힘들 정도라 해도 과언이 아닌데요. 특히나 콘텐츠 중심의 사이트(블로그, 뉴스 플랫폼 등)에서는 거의 필수처럼 여겨지고 있습니다.
티스토리는 HTML 소스코드 수정이 가능하다는 최고의 장점 덕분에 블로그에도 페이스북 소셜 댓글 플러그인을 설치할 수 있습니다. 이미 많은 분들이 페이스북 댓글 창을 자신의 블로그에 설치하여 운영 중인 상황입니다.
페이스북 소셜 댓글을 반응형으로 설치하는 것의 장점은 뭐니뭐니해도 페이스북 소셜 댓글 창의 크기가 어떤 기기(PC, 테블릿, 스마트폰 등)에서도 적당한 사이즈로 보여진다는 점이며 심지어 모바일에서도 활용가능합니다.
Note
사이즈가 완벽하게 정해져 있는 경우에는 반응형 소스코드를 따로 삽입하지 않더라도 적절한 크기로 모바일에서 댓글 창이 표시되는 것으로 테스트 되었습니다(아이폰, 아이패드 등). 하지만 특정한 상황이나 특정한 사이즈의 여타 다른 기기 또는 매우 좁거나 넓거나 높은 해상도를 가진 화면에서는 어떻게 표시될지 확신할 수 없기 때문에, 페이스북 소셜 댓글 또한 style 삽입을 통해 반응형으로 적용합니다.
티스토리에서 제공 중인 모바일 스킨을 사용하거나 여타 다른 블로그 서비스(네이버, 다음 등)에는 포털측에서 해당 기능을 제공해주지 않는 이상 아예 설치가 불가능하거나 모바일에서 활용이 불가합니다. 따라서 좀 더 많은 댓글과 소통, 고객과의 커뮤니케이션, 콘텐츠 공유 등이 필요하다면 모바일도 놓쳐서는 안 될 소중한 댓글 공간이 될 것입니다.
오늘은 일반적인 XHTML로 구현된 소스코드를 자신의 블로그에 삽입하는 방법외에 HTML5와 반응형 소스코드를 넣은 페이스북 소셜 댓글 플러그인 설치 방법을 알려드리고자 합니다.
티스토리 블로그에 페이스북 댓글 반응형으로 설치하기
가장 먼저 페이스북 개발자 사이트의 플러그인 페이지 ↩로 접속합니다. 접속한 다음, 왼쪽 편에 보이는 메뉴 중에서 comment를 클릭합니다. ▼
다음으로 우측에 있는 항목을 살펴보고 자신의 사이트에 맞게 값을 입력해줍니다. 블로그 주소는 입력하지 않아도 됩니다. (추후에 수정 예정) ▼
이제 아래에 있는 Get code를 클릭합니다. ▼
상단에 있는 4개의 탭이 있습니다. 이 4개 중 현재는 IFRAME과 URL방식은 공식적으로 페이스북 소셜 댓글 창의 소스코드를 구현하지 않고 있습니다. 따라서 HTML5 방식과 XHTML 방식 둘 중 하나를 사용해야 합니다. 여기에서는 HTML5 소스코드를 얻습니다. ▼
이제 소스코드 2개가 나옵니다. 위쪽에 있는 코드는 HTML 코드에서 <body>와 </body> 태그 사이에 넣어줍니다.
두번째 소스코드는 실제로 페이스북 소셜 댓글을 설치할 곳에 넣어주는 코드입니다. 스크립트가 각각 구분되어 있습니다. 주의하세요. ▼
이제 설치할 장소를 정해야 합니다. 이것은 사용자 마음대로 설정할 수 있습니다만 저같은 경우에는 가장 알맞다고 판단되는 곳, 그러니까 본문 하단으로부터 이어지면서 태그가 표시되는 장소와 트랙백, 댓글 창이 나타나는 부분 사이에 위치시켜두었습니다. ▼
이곳의 위치는 티스토리 치환자를 찾아야합니다. 티스토리에서 트랙백과 댓글 창을 표시해주는 부분은 actionTrail이라고 명명되어 있습니다. 따라서 관리자-HTML/CSS 수정에서 actionTrail을 검색하여 해당 위치를 찾은 다음, actionTrail 바로 위쪽에다가 소스코드를 넣어주면 됩니다. ▼
이제 마지막으로 소스코드 1개만 수정해주면 됩니다. 일반적으로 페이스북 소셜 댓글 창은 댓글 창을 하나의 사이트에 하나만 표시하는 것으로 생각하고 있습니다. 예를들어, A라는 홈페이지가 있다면 A라는 사이트의 페이스북 댓글 창을 1개로 규정짓는 것이지요. 나의 페이스북 친구가 나의 사이트에 방문하여 안부를 묻는 방명록처럼 생각하시면 이해가 쉬울 것 같습니다.
하지만 이 곳은 블로그. 블로그에는 각각의 포스트(글)가 있고 우리가 원하는 것은 각각의 포스트마다 개별적인 댓글이 달리는 것입니다. 제가 만약 맛집 글 1개와 아이폰 관련 글 1개를 올렸을 경우 아이폰 관련 글에는 아이폰과 관련된 댓글만 달릴테고, 맛집 글에는 당연히 맛집과 관련된 댓글이 달릴테니까요. 쇼핑몰도 마찬가지입니다. 셔츠 포스트와 바지 포스트가 있는데, 바지 포스트에 셔츠가 좋으니 나쁘니 같은 댓글은 그 누구도 원하는게 아닙니다.
따라서 개별 링크를 일괄적으로 적용하기 위해 페이스북 댓글창의 고유 링크를 만들어줘야합니다. 다행스럽게도 티스토리에서는 포스트 각각을 구분할 수 있는 치환자를 제공 중입니다. (아주 오래 전 제가 이 블로그를 통해(2011년 3월 경) 페이스북 댓글 설치 방법 ↩을 포스팅 했을 때, 이 부분 때문에 애를 먹는 분들을 정말 많이 봐왔었는데, 지금도 이 부분을 해결하지 못하여 페이스북 댓글 창을 포기하시는 분들을 종종 보곤 합니다. 의외로 쉬운 부분인데, 놓치는 부분입니다. 당연히 포스트별로 댓글이 달리겠거니 생각하기 때문일 수도 있고, HTML과 치환자 컨트롤이 능숙하지 못해서 일 수도 있을 것 같습니다.)
위에서 적용했던 실제 소스코드를 다음의 티스토리 치환자를 활용하여 아래와 같이 적용하세요. 원래 블로그에서 소스코드 공개를 위해 syntaxhighlighter 3.0.83를 적용하여 사용중입니다만, 티스토리에서 도저히 치환자를 표시할 방법이 없는 관계로 부득불 http://pastie.org 라는 기능을 이용했습니다. ▼
일반적인 블로그나 사이트의 경우 이대로 그냥 적용해도 됩니다. 또, 가로사이즈가 정해져 있는 사이트의 경우 width="가로사이즈 값"이라는 속성을 지정해주면 고정된 크기의 댓글 가로 사이즈로 적용할 수 있습니다. 하지만 반응형 웹에서는 가로 사이즈가 가변적이기 때문에, 특정 사이즈를 고정해버리면 가로 사이즈에 따라 빈공간이 생기거나, 일부가 잘려나가는 현상이 발생합니다. ▼
페이스북 소셜 댓글 창의 기본 가로사이즈 값(width)는 디폴트로 550입니다. 즉, 아무런 값을 지정하지 않으면 기본적으로 550 가로사이즈로 출력됩니다. 본문 가로사이즈가 550 이상이라면 당연히 공백이 발생할테고 가로사이즈가 550 미만이라면 잘림이 발생할 것입니다. 이 부분을 해결하기 위해 style 태그를 하나 추가해줍니다. 이 소스는 <body>와</body>사이에 넣어주면 됩니다. 이왕이면 위에서 추가했던 페이스북 소스코드 근처에 배치하면 좋겠죠?
참고사이트 : 재원에이전시
2014.5.16일 내용 추가
소스코드가 조금 변경되었습니다.
기본 소스코드에서 width 값을 아예 지정하지 않으면 이제는 디폴트 550 사이즈로 출력되네요. 따라서 width에 100% 값을 넣어주어야 합니다. width 값이 추가되었습니다. 최종 소스코드는 아래와 같습니다.
이렇게 모든 소스를 적용하게 되면 <body>와 </boy>태그 사이에 들어간 페이스북 댓글 관련 전체 소스는 아래처럼 됩니다. ▼
이제 모든 작업이 완료되었습니다. 이미 적용된 경우를 구경하고 싶으신 분들은 이 페이지 바로 아래에 있는 페이스북 댓글 창을 찾으신 다음 브라우저의 가로 사이즈를 마우스로 드래그하여 줄였다 늘였다 해보시면 됩니다.
즐거운 콘텐츠 공유 및 페이스북 활용되시면 좋겠네요. ^^