블로그에 페이스북 소셜댓글 (댓글상자) 설치 와 설치방법.

블로그에 페이스북 소셜댓글 (댓글상자)를 설치 ^^
소셜댓글로 무료로 배포하며 인기를 끌었던 라이브리를
얼마동안 설치를 해보니 이용율이 너무 저조하더군요...
그래서 마치 유행처럼 설치되던 라이브리는 떼 버렷습니다.

위와같은 형태로 설치를 할 수가 있습니다.

페이스북에 로그인하지 않은 상태에서는 위처럼 보이네요.
이때는 댓글 달기 버튼을 눌러버리면 페이스북 로그인 창이 뜹니다 ^^;

댓글을 작성하면 아래처럼 나타납니다.
여기서 끝이면 소셜댓글이 아니겟죠?

자신의 페이스북 담벼락, 뉴스피드와 동기화됩니다.


그렇다면 반대로 페이스북에서 댓글을 달면 어떨까요?

위와같이 페이스북 상에서 댓글을 남겨 봣습니다.

블로그 상에서는 위처럼 나타납니다.
물론 이것은 뉴스피드 에도 동일하게 나타납니다.

정말 신나는 기능이지요 ^^*
페이스북의 향상된 댓글상자 - 소셜댓글 기능은 참으로 멋집니다.
블로그 로만 플랫폼을 한정해서 생각만 해봐도 그렇습니다.
현재까지는 블로그의 포스트를 작성 후 발행을 하면
트위터나 페이스북에 플러그인을 사용하여 글을 올릴 수는 있는 반면에,
그 하나의 글에 대한 댓글은 블로그,트위터,페이스북 으로 분산되지요..
결국 블로그의 댓글 기능이 페이스북으로 통합될지도 모를 일입니다.

이전까지는 블로그의 글을 페이스북으로 밀어내기( 글 보내기 ) 는 되었지만,
페이스북의 댓글을 블로그로 끌어오기 는 안되었는데
위와같은 댓글상자 - 소셜댓글 기능으로 가능하게 되었습니다.

구글에서 말한것처럼, 페이스북은 자사의 데이터 공개를 싫어합니다. ..
위 전략은 페이스북과 블로거 또는 웹사이트 등 서로에게 윈윈할 거 같습니다.
페이스북은 새로운 유저를 발굴하여 가입시키게 할 수 있을테고,
블로그나 사이트 운영자 입장에서는 댓글을 따로 관리하지 않아도 될테니까요.

잡담이 길었습니다 .
그럼 티스토리 블로그에 치환자를 활용하여 설치 해볼까요?
처음에는 단순히 치환자 입력만 하면 될 것 같앗는데,
은근히 잘 안되서 잠깐 헤맷다는.......ㅋㅋㅋ

티스토리 블로그에 페이스북 소셜댓글 설치하기

가장 먼저 페이스북 개발자 페이지로 이동해 주세요.
[링크] 페이스북 개발자 페이지

이것저것 입력해 보셔도 무방합니다만,
귀찮으시면 저처럼 바로 get Code 버튼으로 소스코드를 얻어야 합니다.
스크립트 형태이기 때문에 해당 값은 언제든지 변경이 가능합니다.

처음 코드를 얻게 되면 앱스 ID 를 만들어야 합니다.
등록 하겟다를 클릭해 주세요 ㅋㅋㅋ

적절히 입력해 주시면 됩니다 ^^

보안문자도 입력해서 확인해주세요~

다른건 별 필요가 없는것 같고, App ID 는 꼭 메모해 두세요.
뭐, 저는 성격이 급해서 메모하지 않앗는데도 자동으로 되긴 되더군요..;;;
App Secret 은 어디에 쓰는 물건인지 모르겟습니다 ㅎㅎ


이제 다시 개발자 페이지로 이동을 한 다음,
위 처럼 소스코드 get 을 눌러 줍니다.

위 소스코드를 복사 해 주세요.

그런 다음 티스토리 관리자의 HTML 수정 페이지로 이동합니다.
이제 원하는 위치에다가 삽입만 하면 됩니다.

3.21 추가] 그럼 제 댓글창처럼 저곳의 위치에 넣으려면 ?

저는 위쪽으로는 태그트레일, 아래에는 액션 트레일 사이에 넣었습니다.

이제 위치를 확인했으니 스크립트를 넣기만 하면 되요 !

HTML 모드로 가신 다음에 태그트레일, 또는 액션트레일을 '찾기'로 해주세요.

※ 찾기 단축키 : Ctrl + F

스킨마다 조금씩 주석처리나 div class 부분이 다를 수 있으니,

가장 정확하게 찾는 방법은 치환자를 활용하는 방법 입니다.

즉, '찾기'에서 찾을 문자열을 _tag_label_rep 처럼 입력하세요.

이제 스크립트를 삽입할 공간을 결정하셧나요?
그렇다면 다시 페이스북 소셜댓글 소스코드로 되돌아 오세요!

<!-- 페이스북 소셜댓글 시작 -->
<div id="fb-root"></div>
<script src="http://connect.facebook.net/ko_KR/all.js#appId=앱ID&amp;xfbml=1"></script>
<fb:comments href=" http:// " 를 제외한 블로그 주소[치환자]
num_posts="표시될 댓글 수"
width="가로길이"></fb:comments>
<!-- 페이스북 소셜댓글 끝 -->

대충 위와같은 스크립트가 되는데요,
아래를 잘 읽고 적절히 넣어주세요~

기본적으로는 en_US 가 들어가 있을텐데요,
이 부분을 ko_KR 로 변경하시면 버튼이 한글로 나오죠 ^^

▣ appId = 앱스를 만들때 생성되었던 앱 ID .

▣ href = http:// 문구를 제외한 블로그주소[치환자] 를 넣어야 합니다.
블로그는 하나의 포스트가 각각의 URL 을 가지기 때문에,
각각의 소셜댓글 들을 URL 에 따라 다르게 관리를 해야되겟죠^^
(예) href=underclub.tistory.com/[ ##_article_rep_link_## ]

추가 ] 치환자가 변경이 된건지 , 어떻게 된건지는 모르겠습니다만,
오늘 (3.7) 확인해본 결과 슬래쉬를 제외해 주세요 ^^
결국 href=underclub.tistory.com[ ##_article_rep_link_## ]
처럼 주소와 치환자 사이에 슬래쉬를 제외해야 '주의' 오류가 나지 않네요~

블로그 주소와 치환자 사이에 슬래쉬(/) 잊지 마시구요.
치환자 사용시에는 양쪽 대괄호 옆의 공백을 지워주셔야 적용이 된답니다~

▣ num_posts = 말 그대로 표시될 댓글 숫자를 의미.

▣ width = 댓글창의 가로 길이를 입력해 줍니다. 본문사이즈보다 약간 작은게 이쁘네요~


추가 ]   그러고보니 높이 조절이 없네요 ... 상하여백을 줄여나가면, 줄일 수도 잇을텐데...
몇번 강제로 줄여보앗는데 영~ 보기가 싫어지네요... ㅋㅋ
개발자 페이지에서 찾아봐도 높이(height) 에 대한 얘기는 아예 없고....
아마 기본값이 지금 상태인거 같습니다만, 기본값이 최저값인거 같습니다 -_-;;;


3.22 추가 ] 혹시, 정상적으로 적용이 되지 않았으나,
어려움을 겪으시는 분들이 있으시다면....
 - 블로그에 페이스북 소셜댓글 설치 - 개별URL 설정으로 글전체를 따라다니지 않게 하기.
위 글을 참고하셔서 한번 점검사항 점검해 보시고,
천천히 적용해 보시면 될겁니다 ^^