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






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




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




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




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




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


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



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



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

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

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

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

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


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

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




이것저것 입력해 보셔도 무방합니다만,
귀찮으시면 저처럼 바로 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 설정으로 글전체를 따라다니지 않게 하기.
위 글을 참고하셔서 한번 점검사항 점검해 보시고,
천천히 적용해 보시면 될겁니다 ^^









댓글(62)

  • 이전 댓글 더보기
  • 2011.03.29 09:52 신고

    이거 앱 개발자 아이디 등록하려면 폰번호나 신용카드 입력하라는데 신용카드는 해외결제카드 없는데
    모바일은 어떻게 확인받나요 ㅠ

    • 2011.03.29 10:09 신고

      꼭 신용카드는 입력하지 않아도 될 것 같은데요~
      앱을 통해 크레딧 형태로 돈을 받는 앱이 아니니까요~
      앱 개발자 아이디 등록할 때 저는 그런화면이 나타나지 않던데.... 바뀐건가요~?

  • 2011.03.30 10:39

    좋은정보감사드립니다 흐흐흐

  • 2011.05.18 00:34 신고

    시언님 감사드립니다^^ 역시 너무나 최고의 블로그입니다, 그동안 항상 소셜댓글이 전체글을 따라다녀서 삭제했었는데 치환자를 사용해야하는거였군요. 좋은밤 되세요

  • 2011.07.10 15:54 신고

    안녕하세요 티몰스님 좋은 정보 감사드립니다..^^ 제 블로그에도 like botton 을 설치했는데

    <div id="fb-root"></div><script src="http://connect.facebook.net/ko_KR/all.js#xfbml=1"></script><fb:like href=redmedusa.net[# #_article_rep_link_# #] send="true" width="450" show_faces="false" font=""></fb:like>

    위와같이 본문에서 설명한대로 입력했는데 좋아요 버튼은 문제없이 뜨기는 하나 좋아요 버튼을 클릭하면 자동으로 좋아요 취소가되어서 좋아요 버튼이 먹통이됩니다. 혹시 왜그런지 아시는지요..답변부탁드립니다..ㅠㅠ

    • 2011.07.10 16:22 신고

      좋아요 버튼같은 경우에는 티스토리 자체에서 플러그인형태로 제공하는 것이기 때문에 따로 문제점을 찾기가 어렵습니다 ㅠ_ㅠ;;;
      ColorFilter 님의 블로그에서 확인해보니, 정상작동하는 포스트가 있고 그렇지 못한 포스트가 있네요;;;

      위 소스코드는 소셜댓글 부분인데, 아직 적용하지 않으신것 같습니다^^

    • 2011.07.10 19:26 신고

      답변감사드립니다..^^ 좋아요 버튼은 티스토리 플러그인을 사용하지 않고 제가 따로 html수정으로 붙여넣었는데요, 저는 소셜댓글 부분은 적용하지않고 좋아요 버튼만 적용하고 싶은데, 혹시 정확하게 적용되는 코드를 알고계시면 가르쳐주실수 있으신지요.. 제가 군대에 있는지라 알아보는데 제한이있어서..답변부탁드립니다ㅠㅠ 행복하세요

  • 2011.07.11 23:20 신고

    겟 코드를 클릭했는데 이상하게 로딩중이라고 나오고 창이 나올 생각을 안하는데 어떻게 해결 할 수 있을까요?

    • 2011.07.15 11:29 신고

      흠...글쎄요... 그 부분은 처음보는 현상이라;;;

    • 2011.07.20 22:56 신고

      저도 계속 코드를 불러오는데 아무리 기다려도
      코드가 안나와서 다음날 하니까 나오더라구요..
      아무래도 페이스북 서버쪽 문제인거 같아요.

  • 2011.07.16 15:40 신고

    티몰스님 안녕하세요~ 또 오게되었네요, 저도 페이스북 댓글창을 달았는데 페이스북 댓글창과 그 아래 티스토리 댓글창과의 여백이 좀 심한데 혹시 여백 줄이는 방법도 알고 계시는지요?^^;

    • 2011.07.16 15:44 신고

      일정부분의 여백이 디폴트(기본값)으로 제공되는것 같습니다... 따라서 줄이는 방법이 현재로선 없습니다;;;
      저도 여백 유지중이랍니다 ^^;;;

  • 2011.07.20 22:55 신고

    제 블로그에 적용해보니 이제는 앱ID가 필요없나봐요 ㅎㅎ
    코드생성을 하니까 앱ID 입력부분은 안나오네요
    덕분에 잘 적용했어요 ~~

    • 2011.07.21 20:56 신고

      이 글이... 그러니까 3월 20일 작성한거라...
      아마 그 외에도 많이 바뀌진 않았을런지 ㅎㅎㅎ

  • 페이스북페이지 만들기
    2011.07.31 12:21

    안녕하세요 저는 직접 앱을 개발하지 않고 페이스북에서 제공하는 iframe 앱을 이용하여
    댓글 달기를 설치하려고 하는데 댓글은 설치가 되는데 다른 사람의 글을 볼수 가 없습니다

    다른 사람은 제가 등록한 댓글을 볼수 있는데 저는 볼수 없더라구요

    이문제를 어떻게 해결해야 하는지요 ㅠㅠ

  • 2011.08.23 10:28

    게시물이 나를 위해 매우 유용합니다. 그것을 읽을 수 반갑습니다.튜토리얼 주셔서 감사합니다.

  • 2011.10.11 16:25

    난 당신이 게시물에 표시된 모든 아이디어 동의합니다. 그들은 매우 설득력이 있고 확실히 작동합니다. 그럼에도 불구하고 게시물 우선 매우 짧은 있습니다.

  • 2011.11.26 15:45 신고

    감사합니다~ ^^
    덕분에 댓글창 잘 달았어요~~

  • 2011.12.23 17:34 신고

    항상 제 블로그에 와야지만 댓글을 볼수있는데..
    어떻게 해야하나요..?

    페이스북 페이지에서는 댓글확인을 할 수 없나요??;;

    • 2011.12.24 10:21 신고

      글이 1000개가 넘게 있는 블로그 같은 경우에 일일이 확인 할 수 없겟죠?ㅋㅋㅋㅋ
      제 블로그의 아래 글 참고하세요~
      http://underclub.tistory.com/636

  • 2012.01.30 17:55 신고

    안녕하세요? 좋은 정보 감사합니다. ^^ 근데 질문이 있습니다. html5 형식으로 해서 적용 했는데 정작 본페이지에서 이런 메세지가 나타납니다. 어떻게 하면 좋을까요? The comments plugin requires an href parameter.

    • 2012.03.18 08:16 신고

      파라미터가 잘 안먹혀있는듯 한데욥??ㅠㅠ
      블로그 치환자를 확인해보세요 ㅠ

  • gandro
    2012.03.18 00:35

    좋은 정보 감사합니다. 한가지 여쭤볼게요 시간 나실때 답글 부탁드려요. 랩하는 프로그래머님의 페이스북 댓글달기창은 페이북으로만 로그인해야 댓글을 달 수가 있게 되어있는데 이건 어떻게 설정을 하면 되나요?

    그리고 죄송합니다 하나만 더 여쭤볼께요. 여기 댓글을 달면 제 페이스북 담벼락에 댓글을 달았다고 나오는데요. 페이스북 로그아웃을 하고 이 페이지에 들어오면 제가 쓴 댓글이 안보이는게 맞는건가요? 페이스북을 처음하다보니... 아시면 좀 알려주세요. 제 블로그에서 페이스북 댓글을 달면 제 페이스북에서는 보이는데 마찬가지로 로그아웃을 하고 제 블로그를 보면 제가 쓴 댓글이 안보이네요. 여기처럼 로그인안해도 댓글들이 보이는 방법이 있나요?

    페이스북에 로그인해서 글 2개를 남겼는데 혹시 보이시나요?

    시간 나실때 페북초보 좀 도와주세요..ㅜ.ㅜ 감사합니다...

    • 2012.03.18 08:22 신고

      1번 사항은 자동설정인거 같습니다.
      페이스북 계정으로 로그인 되어 있어야지만.. 소셜댓글을 입력할 수 있는 창이 나타나니까요.

      두번째 사항은, 댓글을 달고나서 로그아웃 후 접속해도 소셜댓글은 표시가 되요. 로그아웃 후 블로그에서 안보인다면 무언가 문제가 있는건뎅;;;; 답답글은 일단 보여요.

      http://underclub.tistory.com/636
      툴로 관리해보세요.

  • gandro
    2012.03.18 12:29

    덕분에 많이 배웠습니다. 감사합니다.

    페이스북은 조금 어렵네요. 더 공부해야겠습니다.. ^^

  • 2012.08.05 18:50

    비밀댓글입니다

  • 2012.08.05 20:32

    비밀댓글입니다

  • 2012.11.01 07:40 신고

    감사합니다 :-)

  • 2013.04.27 21:56 신고

    유용하고 상세한 정보 감사합니다^^ 잘 사용할께요~

  • 2013.05.18 12:17

    아... 정녕 네이버는 소셜플러그인 설치가 안되는건가요;; 아.. 달고 싶은데 ㅋㅋ
    처음에 포털사이트 제공 블로그는 제한이 좀 많다는게 무슨 소리인지 잘 몰랐는데
    이제 서서히 느껴갑니다.ㅡㅡ;;;

    • 2013.05.19 10:21 신고

      네이버는 약간 패쇄적인 정책을 사용하고 있어 안되는걸로 알고있습니다.

Designed by JB FACTORY