Web

Customized Twitter plugin for your blog!

2009/06/02 20:56

블로그에 붙힐 자신만의 트위터 피드를 만들어보자!

새로운 블로그 디자인을 런칭하고 나서 많은 분들로부터 좋은 피드백을 많이 받았다. 그중에 방문자님들이 자주 물어보시던 것중에 하나가 바로 블로그 상단 우측의 Twitter 피드를 어떻게 구현했는지인데, 이렇게 된 김에 아예 튜토리얼을 만들어보기로 했다.

작동하는 원리는 의외로 간단하다. 보통 하듯이 Twitter에서 공식으로 제공되는 플래시/HTML 위젯를 이용할 수도 있지만, 커스터마이즈된 자바스크립트 파일을 이용해서 @reply는 보이지 않게 하는 기능의 추가 등 서버상의 문제로 피드가 로드되지 않을때도 블로그 로딩에는 영향을 주지 않도록 할 수도 있다.

(블로그 플랫폼이 설치형 텍스트큐브라는 전제 하에 설명하겠다. 티스토리나 텍큐닷컴 등 서비스형 플랫폼인 경우에는 코드의 경우에는 같겠지만 js파일을 각자 알맞은 방법으로 알맞은 위치에 업로드하고 링크해주면 되겠다.)

1. 자바스크립트 파일 업로드/코드 삽입

우선 Remy Sharp씨가 작성하신 최신 버전의 Twitter 자바스크립트 파일을 다운로드한다. FTP로 접속해 스킨 폴더에 js폴더 (또는 루트에 저장해도 상관없다, 단, 링크해줄때 경로에 주의)에 파일을 업로드해준다.

그리고 skin.html의 <head>태그 또는 <body>태그 안의 맨 마지막에, 다음 코드를 삽입해준다:

<!-- Twitter Script -->
<script src="./js/twitter-1.12.2.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
// twitter
getTwitters('tweet', { 
  id: 'kimatg', 
  count: 1, 
  enableLinks: true, 
  ignoreReplies: true, 
  clearContents: true,
  template: '"%text%"' + '<b' + 'r />' + '<di' + 'v class="twitterTime">-' + '<a h' + 'ref="http://twitter.com/%user_screen_name%/statuses/%id%/">%time%' + '</' + 'a>' +'</di' + 'v>'
});

</script>

위는 실제 내가 사용하는 코드를 그대로 복사한 것이다. Remy Sharp씨의 본래 포스팅에서 보여지는 코드와는, 특히 template부분이 살짝 다른데, <br />과 같은 html태그를 같이 저렇게 나눈 이유는 XTHML Validation을 돌렸을때 HTML코드가 들어갈 수 없는 곳에 적혀있다고 인식되어 테스트를 통과하지 못해서이다. 따라서 HTML코드로 인식하지 못하게 태그를 반으로 갈라 붙혀주었다.

다른 수로는 twitter-output.js와 같은 파일을 따로 만들어 링크하는 방법도 있다.

내 경우에 실제 li 안에 출력되는 코드는 다음과 같다. 

%text% <br /> <div class="twitterTime"> -<a href="http://twitter.com/%user_screen_name%/statuses/%id%/">%time%</a> </div>

2. 스크립트 설정

커스텀 스크립트인 만큼, 출력할때 몇가지 옵션을 지정해줄 수 있다.

  • id: Twitter.com에서 자신의 ID (유저네임 또는 유저번호ID)
  • count: 출력하고 싶은 트위터 업데이트의 갯수. 기본은 1이다.
  • clearContents: true/false – 컨테이너 내에 컨텐츠가 있다면 로딩된 후에 기존 코드를 지운다. 기본값은 true이다.
  • enableLinks: true/false – 트위트 속의 링크 주소를 인식해 실제 눌러지는 링크로 만들어준다. 기본값은 true이다.
  • ignoreReplies: true/false – @로 시작하는 트위트는 무시한다. 만약 1개의 트위트를 요청했을때 이 설정이 true로 되어있는 경우, 실제로는 2개를 로딩하고 2번째 트위트를 표시한다. 하지만 최근 트위트가 둘 다 @답변일 경우, 아무것도 표시되지 않는다.
  • (현재 막아둠) withFriends: true/false – 친구들의 트위트를 표시할 것인지 설정. 기본값은 false이다.
  • template: 각 li 엘리멘트 내 출력될 HTML 코드 템플릿을 설정한다. 템플릿 설정에 대해서는 밑을 참고하자.
  • prefix: 템플릿을 사용하지 않는 경우, 이것을 사용할 수 있다. 각 트위트의 앞에 문구를 삽입하고 싶으면 여기에 입력한다. (예: “Kimatg님의 말씀:” 위의 템플릿 변수를 여기서도 사용가능하다.)
  • timeout: 타임아웃되기까지의 시간을 ms(밀리초)로 입력한다. onTimeout이 설정되어있는 경우 timeout값은 기본으로 10초이다.
  • onTimeout: 타임아웃에 도달했을때 불러낼 함수. HTML은 원래 트위트가 출력되야할 부분에 출력된다.
  • onTimeoutCancel: true/false – 설정되지 않은 경우, timeout이 트리거된 후에도 Twitter 스크립트가 로딩을 완료하고 캔슬을 오버라이드할 수 있다. 이것을 피하려면 이 값을 true로 지정하라. 기본값은 false.

좀 복잡해보이지만 반드시 입력해야하는것은 id와 template밖에 없고,  위의 예제에서 보여줬듯이 나도 id, count, enableLinks, ignoreReplies, template 이렇게 5가지만 사용중이다.

3. Template 설정

Template 부분에 사용될 수 있는 변수(variable)들은 다음과 같다. 모든 변수는 %로 씌워줘야한다. 위 1단계의 예를 참고하자.

  • text – 트위트 내용 텍스트
  • id – 트위트 메시지의 id
  • source
  • time – (친숙한) 트위트 작성 시간 (1분 전 등)
  • created_at – 실제 작성 시간
  • user_name – 실제 이름
  • user_screen_name – 유저네임
  • user_id
  • user_profile_image_url – 아바타
  • user_url – 홈페이지
  • user_location
  • user_description

4. HTML 출력하기

이제 블로그에 피드를 출력해주는 HTML 코드를 입력할 차례다.
스킨에서 트위터를 표시하고싶은 알맞은 부분에, 다음 코드를 삽입해준다. 

	<div class="twitter">
		<div id="tweet">
		<p><img src="./images/loader.gif" alt="loading..."/></p>
		</div>
		<div class="follow"><a href="http://twitter.com/kimatg" title="Follow me on Twitter!">Follow me on Twitter<span></span></a></div>
	</div>

현재 설정은 id=”tweet”인 div에 피드를 출력하도록 되어있다. 만약 변경하고 싶다면, 자바스크립트 코드의 getTwitters (‘tweet’, { 줄에서 tweet를 원하는걸로 바꿔주면 된다. 마찬가지로 HTML에서도 id값을 바꿔어주는것도 잊지 말것. 🙂

<div id=”tweet”>안이 비어있지 않고 코드가 입력되어있는걸 볼 수 있는데, 바로 로딩 이미지이다. 로딩 애니메이션 이미지는 Ajaxload에서, 원하는 모양, 색상으로 받을 수 있다. GIF파일을 받은 후에 알맞은 폴더에 업로드하고 경로를 지정해주자. 위에서 설명한 clearContents: true로 인해서 업데이트 내용이 로딩되어 출력되면 기존 코드(이미지)는 사라진다.

그 밑의 <div class=”follow”>는 따라가기(Follow)링크이다. 자신의 Twitter 주소를 입력해 링크로 만들어주면 된다.

5. CSS로 스타일링

위에서 template를 설정해주지 않은 경우, 기본 템플릿으로 다음과 같이 출력된다. 

<div id="tweet">
  <ul>
    <li>
      <span class="twitterPrefix">Remy said: </span>
      <span class="twitterStatus">I just had a bizarre spaces moment - moving my cursor to the bottom of the screen switched space - annoying if it hadn't just gone away.</span>
      <span class="twitterTime">20 minutes ago</span>
    </li>
    <li>
      <span class="twitterPrefix">Remy said: </span>
      <span class="twitterStatus">Great quote - Michael J Fox: "my happiness grows in direct proportion to my acceptance, and in inverse proportion to my expectations."</span>
      <span class="twitterTime">7 days ago</span>
    </li>
  </ul>
</div>

위 코드의 경우, 접두사, 트위트 내용, 시간이 각각 따로 span에 나뉘어 출력된다. 각각 class값이 지정되어 있으니 style.css에서 원하는 부분을 잡아 스타일해주면 되겠다.