Please Enable JavaScript!
Gon[ Enable JavaScript ]

티스토리 블러그에 페이스북과 연동하여 댓글을 달수 있도록 구현

블로그

 

티스토리 블러그에 페이스북과 연동하여 댓글을 달수 있도록 구현

 

개발환경 : window 7

 

요즘은 소셜네트웍 서비스중 트위터를 제치고 페이스북을 많이 사용하는 것 같다. 그 판단의

기준은 나 또한 페이스북으로 소통을 많이 하기 때문이다. 그래서 그런 소통의 장을 좀더

확대 시키기 위해 블러그 댓글과 연계하기로 했다. 한동안 블러그에 자료를 업데이트 하지 못해

조바심이 났었는데 다시 마음을 다지며 시작해 보려 한다

 

 페이스북 플러그인 사이트에서 설정하기

 먼저 페이스북에서 제공하는 소스를 얻어야 한다. 요즘은 대부분 자바스크립트로 되어있으며

자동으로 설정값을 넣어주고 추출하면 그에 대한 소스를 팝업창으로 복사할수 있도록

제공하여 준다.

그럼 그것을 제공해 주는 사이트로 가보다.

주소는 다음과 같다. http://developers.facebook.com/docs/reference/plugins/comments/

 

페이지에서 보면 입력해야될 목록들이 있는데 첫번째는 블러그 주소이다.

두번째 Number Of Posts 는 표시해줄 댓글의 개수를 말한다.

세번째 Width 는 댓글 목록의 넓이를 말하는데 자기 블러그의 크기에 맞추면 된다.

네번째 Color Scheme 는 댓글의 바탕색이다.

그 아래에 있는 Get Code 버튼을 눌러 위에서 설정한 값에 맞는 소스를 팝업창으로

띄우자.

Get Code 를 누르면 설정값에 맞는 코드값을 팝업창으로 아래 그림과 같이 띄워준다.

탭에 보면 HTML5, XFBML, IFRAME 있다.

HTML5 는 우리가 흔히 말하는 HTML(HTML4) 의 업그레이드 버전이다. HTML 4.01, XHTML,

DOM 등 여러 버전의 난립을 막고 하나로 통일하기 위해 제정한 차세대 웹표준이라고 보면

된다. 프로그래머 입장에서는 다행스럽다. 다양한 버전이 존재한다면 그 구미에 맞춰

여러 경우의 수를 다 생각해서 짜야 되기 때문에 골치아프고 공수 또한 많이 들어간다.

아직 완벽하게 지원하지 않지만 이제 대세는 HTML5 라고 떠들어 대는 사람도 있다.

그래서 학원가에서는 커리큘럼에 넣는 곳도 있는데 국내에는 현장 환경이 그렇게 금방

도입할만큼 무르익지는 않은거 같다.


XFBML
은 페이스북에서 제공하는 JavaScript SDK 이다. 이것은 REST API, Graph API 등을

포함하고 있으며 페이이스북과의 연동을 용이하게 하기 위한 API 이다. 이것을 통해

페이스북에 자료를 받는다던지 내가 쓴 내용을 보내는 등의 외부 인터페이스가

가능한 것이다. 나의 블러그에는 XFBML 을 적용해 보았다

 

 티스토리 블러그에서 추출한 소스 설정  

 이제 추출한 코드를 블러그 관리자로 들어가서 복사해서 넣기만 하면된다.

우선 티스토리 블러그에 로그인한다. 그리고 관리자 메뉴에서 HTML/CSS 편집을 클릭해

들어간다. 페이스북 코드에서 1번 소스를 상단에 붙이자.

그리고 2번째 소스는 상단의 <html> 태그에 아래와 같이 추가한다.

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">

 

3번째는 소스를 조금 변경해야 하는데 [##_article_rep_link_##] 를 블러그 주소 뒤에

붙여 넣어야 한다.

수정한 소스를 [##_article_rep_desc_##] 아래에 복사해서 넣는다. 글의 하단이기 때문이다.

 

 완성된 결과

 아래 그림은 완성한 후에 테스트한 결과 이다.

간만에 작성할려니 오금이 저려서 혼났다. 다시 버릇을 들일려면 시간이 걸릴 듯 하다.

다음주는 브라질 대응하느라 야간에 근무해야 되는데 걱정이다.

이 나이에 밤샐려니 ㅜㅜ


Posted by 녹두장군

댓글을 달아 주세요

  1. Favicon of http://tytyyttr tyryy 2015.12.16 18:22  댓글주소  수정/삭제  댓글쓰기

    알려줘서감사해요