[블로그팁]티스토리에 페이스북 소셜댓글 플러그인 설치하기

어제는 간만에... 라고 하려다보니 4일전에도 굴국밥 포스팅을 했었네요...ㅎㅎ
암튼 다음뷰에선 맛집 카테고리가 인기가 가장 좋은 듯 합니다....

에효~~~ 먹으러 다닐 총알이 없어서 돈이 안드는 블로그팁과 인터넷관련 포스팅을 주로 하고 있는데
듣보잡 소리를 듣지 않으려고 발버둥 치는 것보다는 맘 편하게 먹고 하던거나 계속 하렵니다..ㅋㅋ

얼굴책 입문

계속 가입해야지 하고 생각만 하고 있다가 이웃블로거이신 백전백승님의 배움터에 좋아요를 한표 던지기 위해
지난주 해당 포스팅을 보면서 바로 페북에 가입해버렸답니다.

입문한지 얼마 되지 않았고 페북 팁등을 별로 접하지 못한 상태에서 잠깐씩 이것저것 만져보고 있습니다.
그러다가 이웃님들 블로그에서 많이 보이는 페북 소셜댓글에 대한 관심이 생기더군요.

페이스북 소셜댓글

긴 설명 필요없이 그냥 보시죠.

바로 요녀석입니다. 테스트겸 한풀이도 할겸 함 써봤습니다..ㅎㅎ

그럼 어떻게 블로그에 적용하는지 살펴볼게요.

페이스북 소셜댓글 설치준비

우선 제가 소셜댓글 플러그인을 적용하기 위해 참고했던 포스트를 먼저 소개할게요.

다음검색을 통해 관련팁을 구하는 중에 이웃블로거이신 티몰스님의 글이 보이길래 클릭해서 확인을 해봤답니다.
블로그에 페이스북 소셜댓글(댓글상자) 설치와 설치방법

이 글의 대부분은 티몰스님의 포스트를 참고했으며 과정 역시 비슷하지만 쭉 이어갈게요.
약간 다른 부분도 있으니 잘 살펴봐 주셨으면 해요.

먼저 위에 그림으로 보여드린 소셜댓글에서 왼쪽 아래의 Facebook 소셜 플러그인이란 링크를 클릭하시면
다음과 같은 페이스북 개발자 페이지로 이동하게 됩니다.

그리고 네모로 표시된 Comments를 클릭하시면 다음과 같은 화면으로 이동합니다.

이 페이지가 플러그인을 설정할 페이지입니다.

페이지를 찾아가기가 번거로우시다면 아래의 링크를 클릭하시면 바로 이동합니다.
https://developers.facebook.com/docs/reference/plugins/comments

위에 보이는 항목에 필요한 정보를 기입하시면 되는데요.

URL to comment on
- 댓글이 표시될 블로그 주소를 기입
Number of Posts
- 기본적으로 표시될 댓글 수(댓글에 대한 답글은 제한없이 표시됩니다.
Width
- 소셜댓글 박스의 가로 크기

입력폼을 채우면 아래에 미리보기로 확인이 가능합니다.

위에서 Get Code버튼을 클릭하면 위와 같이 설정한대로 코드가 표시됩니다.
복사한 후 블로그에 삽입하면 되는데요.

블로그에 코드 적용

복사한 코드를 블로그에 삽입하려면 아래와 같은 과정을 거칩니다.

HTML/CSS 편집으로 이동한 후에 html창에 추가를 해줄텐데요.

저는 티몰스님의 글에서와 같은 위치인 본문영역이 끝나고 태그와 트랙백, 댓글이 표시되는 부분의 사이에 소셜댓글을 넣었습니다.

회색박스로 표시한 부분 중 위에 있는 것이 태그표시 관련소스, 아래가 트랙백, 댓글표시 관련소스입니다.
그 사이에 소셜댓글이 출력되도록 코드를 삽입했습니다.

위 이미지에서 밑줄로 표시한 부분은 수정이 필요한 부분인데요.

get code를 눌러서 얻은 코드의 이미지를 보면 아시겠지만 처음 설정은 en_US라 되어 있습니다.
댓글을 남기기 전 표시되는 부분을 영문으로 보이게 하는 거구요. 한글로 보여지게 하기 위해
ko_KR로 수정합니다.

제 블로그 주소 뒷부분에 붙은 것(대괄호로 표시된 부분)은 본문글을 나타내는 치환자입니다.
이것을 붙여 주셔야 자신의 페이스북에서 본문요약과 함께 보여지게 됩니다.

약간의 수정을 거친 후 스킨을 저장하고 확인하면....