2010-09-15

소셜댓글(2), 내 블로그에 트위터 입력창(tweet box)을 달아보자

아래의 소셜댓글, 내 블로거에서 페이스북 댓글을 남긴다에 이어서 이번에는 트위터 댓글창을 직접 블로거에 달아 보겠습니다.
무엇보다도 제3자의 서비스가 아니라 트위터의 개발자 페이지에서 공개한  정식 어플이고, 이미 많이 알려진 TweetButton이나 ShareButton과 다른 점이라면 트윗 입력창이 바로 나온다는 점이고, RT이기 때문에 반응추적이 쉽다는 점입니다.


1. @Anywhere Application 페이지로 가서 어플리케이션을 만듭니다.



ApplicationName은 적당히 정하시고, 꼭 Read & Write를 선택하세요.

2. 발급받은 API Key가 들어있는 Javascript 코드를 블로그에 넣습니다.

어플 페이지 꾸미는 거는 천천히 하시고, 지금 필요한 것은 API Key의 Javascript 입니다.
블로거의 꾸미기-html편집으로 가서 가젯코드펼쳐서보여주기를 체크하시고 Ctrl+F로 /head를 찾아서 /head 위에 앞에서 얻은 스크립 코드를 넣습니다.

/head




3. data.post.body를 찾아서 아래의 코드를 바로 아래에 넣습니다.

data:post.body/


페이스북 댓글 기능도 넣었다면 그 소스코드도 이곳에 있습니다. (소셜댓글, 내 블로거에서 페이스북 댓글을 남긴다 참고)




label : 넣고 싶은 문구를 넣으시거나 삭제하세요. 삭제하면 트위터의 기본인 What's happening? 이 나옵니다.
defaultContents : RT @kwang10e 처럼 넣으시면 됩니다. 물론 자기 트위터 계정으로 바꾸시고요.

4.스킨 저장하고, 확인하세요.



추가(9월 16일)

1. 관련된 공식문서는 http://dev.twitter.com/anywhere/begin 를 참고하세요.

2. 트위터 입력박스(@anywhere tweet box)를 통해서 트윗을 보내면 via baksimgorkii blogger 처럼 표시가 됩니다. 처음에 API 만들때 application name 에 입력한 대로이니 이름도 신경써서 짓거나 나중에 수정해 주시면 됩니다.

3. 오늘 hovercard를 적용했습니다. 1단계에 나온 자바스크립중에서 넣지 않은 부분만 넣으면 됩니다. 후버카드는 @로 표시되는 트워터 계정이 실제로 존재하는 아이디라면 마우스를 올리면 간단 프로필이 나옵니다. 제 계정 위에 마우스를 올려 보세요. @kwang10e
참고로, 구글크롬 확장 프로그램 중에서 같은 기능을 하는 tweetbeat firsthand라는 것도 있습니다.


추가 (10월 21일)

만약 또 다른 사이트나 블로그에도 tweet box를 넣고 싶다면 (즉, 도메인이 다른)....
위의 과정을 처음부터 반복해서 새롭게 만들어도 됩니다만, 이미 만들어진 어플의 관리메뉴 중 [Manage Domains]를 클릭해서 사이트를 추가하면 됩니다. http://dev.twitter.com/apps 에 가서 도메인 추가하세요.



댓글 5개:

  1. 써놓고 보니 원본출처를 누락했네요.
    http://www.bloggerplugins.org/2010/08/add-tweet-box-to-blogger.html

    답글삭제
  2. 익스플로러(ie) 6.0 버전에서는 화면이 보이지 않습니다.

    답글삭제
  3. 티스토리에 적용했는데, 제대로 된 건지 모르겠네요.
    좋은 정보 잘 보고 갑니다.

    답글삭제
  4. 이 글을 쓰고 난 후에 제 트위터 계정이 @baksimgorkii에서 @kwang10e로 바뀌었는데, 해당 부분의 수정을 지금에서야 합니다.

    답글삭제
  5. Wow, awesome blog layout! How long have you been blogging for?
    you make blogging look easy. The overall look of
    your website is wonderful, as well as the content!


    Here is my webpage ... best appliance repair st petersburg

    답글삭제