홈페이지를 좀더 소셜하게 만들어주는 페이스북 소셜플러그인 – 코멘트 플러그인 적용 방법

지금 이 글의 왼쪽에 보면 페이스북의 좋아요 버튼(Like Botton)이 있다. 만약 나에게 페이스북 계정이 있다면 이 버튼을 클릭할 수 있다. 그러면? 내가 이 콘텐츠를 좋아요(Like)했다는 사실이 내 페이스북 프로필 페이지에 올라가게 되고, 이 사실을 친구들이 알게 된다. Like 행위자 입장에서 본다면 친구에게 적극적으로 알린다는 것이 아니라 그냥 좋아서 누르는 소극적 행위일 수도 있지만 이 Like 버튼을 제공한 콘텐츠 제작자는 누군가가 이 콘텐츠를 다른 사람들에게 널리 퍼트려주기를 적극적으로 부탁하고 있는 것이라 할 수 있다. 

2010 F8에서 발표하는 페이스북 창업자 마크 주커버그
페이스북의 <2010년 개발자 컨퍼런스 F8>이 작년 4월 21일 샌프란시스코에서 열렸는데 이 자리에서 페이스북의 창업자 마크 주커버그는 오픈소셜그래프(Open Social Graph)라는 개념을 발표했다. 아래 발표 동영상을 보면 알겠지만 오픈소셜그래프 개념은 아래와 같은 의미를 내포하고 있다. 
페이스북을 넘어 웹 전체를 소셜화한다.
현재까지의 웹은 구조화되지 않는 링크들이 서로 연결되어 있는 형태였다. 그리고 이 링크들간의 연결을 구조화시켜주는 것이 검색이라는 서비스였다. 전세계에서 가장 많이 쓰는 검색서비스 중 하나인 구글의 사명은 바로 이 점에 착안하고 있다. (구글의 사명은 “세상의 모든 정보들을 조직화하여 전 세계 모든 사람들이 접근해 이용할 수 있도록 하는 것이다”) 구글이 자체 개발한 알고리즘에 의해 연결되어 있는 정보들을 사람들은 목적의식을 가지고 검색한다. 그리고 이런 검색 행위에 대한 데이타들은 모두 구글의 서버에 저장되어 좀더 정교한 검색을 가능하게 하는 용도로 활용되고 정보들간의 링크를 좀더 구조화한다. 
하지만 이용자들은 구글 서버에 쌓이는 이 데이터를 활용할 수 없다. 내가 과거에 무엇을 검색했는지, 어떤 링크를 클릭해보았는지, 내 친구들은 무엇을 찾고 있는지 알기가 어렵다. 반면 페이스북은 이러한 데이타들간의 링크들에 사람들의 행위와 관계를 결합시켰다. 페이스북의 친구들은 내가 무엇에 관심을 가지고 있는지를 안다. 개인 프로필 페이지에 올리는 글과 사진, 링크와 동영상 등과 같은 콘텐츠로, 내가 좋아하는 페이지와 내가 쓰는 댓글 등으로 관심사를 파악한다. 
구글은 데이타를 검색하지만 페이스북은 사람들의 행위와 관계를 검색한다.
이전의 페이스북은 페이스북 서비스 내에서의 관계에 집중했다. 반면 소셜오픈그래프(Social Open Graph)는 그동안 페이스북 내에서 형성된 정보와 사람, 정보와 정보, 사람과 사람들간의 관계를 웹 전체로 확대하는 개념이라고 할 수 있다. 마크 주커버그가 이야기했듯이 “사물과 사람 간의 연결들이 페이스북 내에서만 일어나는게 아니고 웹 전반에 걸쳐서 일어나게” 한 것이다. 그리고 페이스북은 이것을 가능하게 하는 다양한 기술들을 선보였다. 그 중 가장 많이 쓰이는 것이 Like Botton, Like Box이다. 
Like Botton은 앞서 설명한대로 이 글의 왼쪽 상단에 있는 버튼인데 이 버튼을 클릭하면 내 담벼락에 내가 이 콘텐츠를 좋아한다는 사실을 사람들에게 알려주게 된다. Like Box는 이 블로그의 사이드바에 붙어져 있는 [활동가를 위한 소셜미디어학교] 페이지의 Box와 같은 것읻. 페이스북 페이지에 올라온 콘텐츠와 이 페이지를 좋아하는 사람들을 어느 홈페이지에서나 보여줄 수가 있게 해주는 기능이다. (이 두가지 기능은 페이스북의 플러그인 페이지에서 쉽게 코드를 부여받아 설치할 수 있다.)
구글은 데이타를 검색하지만 페이스북은 사람들의 행위와 관계를 검색한다. 그리고 이제 이러한 행위와 관계는 페이스북 내에서만 이루어지는 것이 아니라 웹의 곳곳에서 생겨난다. 그리고 그 중심에 페이스북이 있다. 페이스북은 소셜오픈그래프로 웹 전체를 페이스북이 중심이 되는 플랫폼으로 만들려고 하고 있다. 구글이 세상을 지배할거라고 한 몇년 전의 예측이 페이스북에 의해서 빗나갈 수도 있을지 모르겠다. 이러한 계획 아래에서는 분명 프라이버시 문제가 심각하게 대두될 것이다. (여기서는 프라이버시 이슈를 다루고자 하는게 아니므로 이에 대한 이야기는 아래 글을 참고하기 바란다.)
페이스북의 코멘트 플러그인 적용 방법
여기서는 페이스북 코멘트 플러그인을 설치하는 방법을 소개하려고 한다. (Like botton과 Like Box를 적용하는 방법은 여러 군데 소개되어 있는데 코멘트 플러그인의 적용법을 알려주는 곳은 많지 않아서) 이 플러그인은 특정 웹사이트에 페이스북의 댓글 기능을 이용할 수 있게 해준다. 아래는 티스토리를 기반으로 한 블로그에 적용하는 방법이지만 동일한 과정을 거쳐서 웹사이트나 특정 웹페이지에도 적용할 수 있다. 단체에서 진행하는 캠페인 사이트 같은 곳에 유용할 수 있을 것 같다. (아직 해결하지 못한 문제는 이게 웹사이트 내의 개별 콘텐츠마다 다르게 적용되는 것이 아니라 하나의 웹사이트에 동일하게 적용된다는 점이다.)
1. Create Your App
Like Botton이나 Like Box와 다르게 코멘트 플러그인을 적용하기 위해서는 APP_ID를 부여받아야 한다. APP_ID는 옆 링크에서 받을 수 있다. ( http://developers.facebook.com/setup/ )
– Site name : 적용하려고 하는 사이트 이름을 쓴다. 자유롭게 쓸 수 있다.
– Site URL : 적용할 웹사이트의 주소를 쓴다. 이때 주의할 점은 반드시 주소 뒤에 / 를 붙여야 한다는 점이다. 
2. APP_ID확인하기
보안확인 절차까지 거치게 되면 페이지 하나가 출력되는데 여기서 어플리케이션 아이디(APP_ID_)라는 부분의 숫자 코드만 복사해둔다. (시크릿 코드와 그 밑에 나온 샘플 코드 등은 어디에 사용되는지 아직 모르겠음)
3. 페이스북 코멘트 플러그인으로 이동 
– Unique ID : 복사해둔 APP_ID를 입력한다. 
– Number of Comments : 페이지에 출력되는 코멘트의 수를 지정한다. 
– Width : 코멘트 플러그인을 설치할 곳의 가로 크기를 지정한다. 
– Get Code : 클릭하면 나오는 소스를 복사해둔다. 


4. 소스 수정하기
제공된 소스는 아래와 같은데 이 중에서 en_US를 ko_KR로 바꿔주고, APP_ID부분에 복사해둔 숫자코드를 붙여넣기 하면 된다.  

5. 티스토리 블로그에 적용하기
위 소스를 티스토리 블로그의 글 아래에 붙일려면 [관리자] – [스킨 편집]의 skin.html 소스에서 Ctrl+F 를 눌러서 [ # #_article_rep_desc_ # # ] 를 찾은 다음에 그 아래 부분에 붙여넣으면 된다. (티스토리가 아닐 경우에도 적용하고 싶은 부분에 코드를 삽입하면 된다. 일반 웹페이지에서 적용된 예는 함께하는시민행동의 캠페인 페이지에서 확인할 수 있다.) 그러면 아래와 같은 페이스북 코멘트 플러그인이 생성된다. (티스토리의  [ # #_article_rep_desc_ # # ] 코드는 띄어쓰기를 없애신 후에 찾으시면 됩니다.)

홈페이지를 좀더 소셜하게 만들어주는 페이스북 소셜플러그인 – 코멘트 플러그인 적용 방법”에 대한 답글 1개

Add yours

  1. 포스팅 잘 봤습니다. 그런데 티스토리 삽입할 때 어느 위치에 삽입해야 하나요? 그 부분이 포스팅에서 누락된 듯해요 ^^

    좋아요

    1. 아..본문에는 써놓았는데 실제 코드가 에디터에 적용되어버렸나보네요. [ # # _ article_rep_desc _ # # ] 코드를 찾으시면 됩니다… (다만, 위 코드에서 띄어쓰기를 모두 없애신 후에 찾으세요)

      좋아요

  2. ㅋㅋㅋ 조아신 님이 쓰신 글 그대로 따라해 본 내용을 포스팅해봤습니다. 괜찮겠죠?
    http://www.kimdol.net/178
    조아신님 블로그처럼 인터패이스 만들고 싶은데요 ^^
    먼저 질문이 많습니다.

    1. 위에 tweetmix를 패이스북 코멘트 플러그인 처럼 만들려면 어떻게 해야 하나요 ^^
    2. 오른쪽 사이드 매뉴 전체 폭을 넒히고 싶은데 어떻게 하는지요 ^^
    3. 블로그 맨 위 ACTION BASECAMP 바로 아래 , 등 으로 메뉴를 만드는 방법을 좀 알고 싶어요…
    4. 오른쪽 사이드바 신영복 선생님 영상 같은것 넣을려면 어떻게 하는 건가요 ^^

    초보라…너무 유치한(?) 질문을 했지요? 죄송요…좀 가르쳐 주세요 ^^

    좋아요

    1. ^^잘 적용하셨네요… 질문해주신 내용은 흠.. 하나하나씩 블로그에 정리해서 올리도록 하겠습니다.고맙습니다.

      좋아요

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중

Create a website or blog at WordPress.com

위로 ↑

%d 블로거가 이것을 좋아합니다: