오래 전부터 인간의 소통 욕구는 통신 수단의 발달과 함께 진화해 왔고, 또 여러 행태로 분출되고 있는 상황이다. 그런데 여기에 또 하나의 특화된 소통 수단이 등장하였으니, 그 이름은 바로 Twitter. 우리말로 옮기면 재잘거림 정도 되려나?

여타 다른 IM 수단과 차별되는 점은, 바로 지금 나는 무엇을 하고 있는가?라는 물음에 대한 특화된 답을 표현할 수 있는 수단이 생겼다는 것이다.
물론 이것은 불특정 다수에게 공개하여, 물론 그 불특정 다수는 전혀 니가 무엇을 하든지 관심이 없겠지만, 잠재된 스토커에게 자신의 발자취를 흘릴 수도 있고, 지인들을 초대해서 서로의 현재 상황과 관심을 공유하면서 또 다른 흥미를 나눌 수도 있을 것이다. 아니면, 단지 불평 불만의 지껄임들을 늘어놓을 수 있는 또 하나의 작은 불출 장소가 될 수도 있겠지.
처음에는 나도 별로 쓸모없게 보였지만, 새로운 표현 수단으로서 앞으로 어떻게 발전해 갈지가 흥미롭기도 하고, 잠깐 사용해본 소감은 중독성이 강하다는 것. 😮

이렇게 작은 지껄임을 늘어놓을 수 있는 안성맞춤의 공간은 물론 자신의 블로그가 제격일 것이며, 물론 Twitter에서도 여러 방법들을 소개하고 있다. 하지만, 이 곳에 소개되어 있는 flash를 사용한 방법들은 웹 표준에도 맞지 않거니와, 불러오는 시간도 비교적 오래 걸리고 입맞에 맞게 수정하기도 어렵다.
그럼, 나머지 하나는 Javascript를 쓰는 방법인데, 이것 또한 기능적으로 단 하나의 최근 재잘거림만 표시할 수 밖에 없고 twitter 서버가 버벅거릴 경우 전체 웹 페이지를 읽어드리는 속도가 지체될 수도 있다. (또 하나, twitter 서버에서 JSON Object를 불러오는 주소도 잘못되어 있어서, 결국 두 번 요청되는 결과를 가져온다.)

결국, Google해서 찾은 방법으로 Twitter API에서 제공하는 Callback을 지원하면서 Badge를 다는 방법이 있는데, 이것을 참고하여 입맞대로 수정이 간편하도록 고쳐서 블로그 귀퉁이에 달아두었다.

아래는 이 곳에서 Twitter Badge를 달아놓은 방법을 적어놓는다.

먼저, 블로그의 원하는 위치에 twitter 할 수 있는 장소를 아래와 같이 마련해 둔다.

<h2>Twittering</h2>
<div id="my_twitter"><img src="/blog/wp-images/spinner.gif" alt="" width="16" height="16" /></div>
<a href="http://twitter.com/사용자_이름" title="나의 Twitter 지껄임 기록"><img src="http://twitter.com/images/twitter_bubble_logo.gif" alt="나의 Twitter 주소" /></a>

최근 tiwitter 기록이 표시되는 부분과 클릭하면 자기의 전체 twitter 기록을 확인할 수 있는 곳으로 연결하는 Twitter 로고 부분이 있으며, Twitter 사이트로 연결되는 주소에 있는 사용자_이름은 자신의 계정에 맞게 수정한다.
여기서, spinner.gif 그림 파일은 Twitter 자료가 가져오는 동안만 표시된다.

다음, Twitter 구현을 위한 Javascript는 웹 문서의 head 부분에 직접 심거나, 혹은 따로 js 파일에 저장하고 불러드린다. 실제 Javascript의 실행은 페이지를 다 읽어드리고 나서 시작되므로 전체 웹 페이지의 로딩 속도에는 영향을 주지 않는다.

window.onload = initTiki;
 
function initTiki() {
  twitterStatus('http://twitter.com/t/status/user_timeline/사용자_ID_번호?callback=twitterCallback&count=표시될_지껄임_갯수');
}
 
function twitterCallback(obj) {
  var outputHTML = "";
  for (var i=0, j=obj.length; i<j ; i++) {
    var name = obj[i].user.screen_name;
    var twitteringText = obj[i].text;
    var time = obj[i].relative_created_at;
    outputHTML += "<div class='twittering'><span class='twitter_name'>" + name + ": <\\/span>" + twitteringText + "<span class='twitter_time'> " + time + "<\\/span><\\/div>";
  }
  if (document.getElementById('my_twitter')) {
    document.getElementById('my_twitter').innerHTML = outputHTML;
  }
}
 
function twitterStatus(url) {
  var twitScript  = document.createElement("script");
  twitScript.setAttribute("type", "text/javascript");
  twitScript.setAttribute("src", url);
  document.getElementsByTagName('head')[0].appendChild(twitScript);
}

여기서 initTiki() 함수에 있는 사용자_ID_번호와 표시될_지껄임_갯수는 자신의 등록 정보와 상황에 맞게 수정해야 함.

마지막으로 CSS 파일에서 Twitter 표시 모양을 입맞대로 꾸며주면 끝. (아래는 이 곳에 적용된 예)

/* Twitter */
#my_twitter { margin-top: 0.5em; font-size: 1.2em; }
.twittering { margin-bottom: 0.4em;}
.twitter_name { color: #008000 }
.twitter_time { color: #BA0909; font-style: italic; }

자, 이제 재잘거릴 준비는 다 됐으니, 입놀리기 간편한 Twittericfic만 설치해 주면 되겠지. 😉

새로 고침 – 나의 재잘거림은 블로그에서 대문으로 옮겨 달아둠.
새로 고침 둘 – Twitter API 중에서 relative_created_at 속성이 created_at으로 대치되면서 상대적 시간 표시 기능을 Twitter Fan Wiki에 있는 Relative Time Scripts를 참고해서 수정함.

관련된 주제의 글

• 자기 웹 서비스에 API를 추가하는 법 (0)
• 이제 Quicksilver에서 Twitter 하자! (0)
• 이 년간의 이러쿵저러쿵 (0)
• 시각 장애인들에게도 접근이 용이한 블로그 (0)
• 내 웹터의 새 주소 (2)