블로그에서 트윗 보내기 - 트위터 입력상자(Tweet Box)

트위터(http://www.twitter.com)나 기타 트위터 관련 애드온에서 트위터로 트윗를 보내는 걸 내 블로그에 설치할 수 있다면 더 좋겠지요. 블로그를 하다가 바로 메시지를 보낼 수도 있고요. 방문객이 블로그 운영자인 나에게 트윗을 바로 보낼 수도 있고요. 아니면 저처럼 블로그의 글을 조금 더 쉽게 트위터로 공유하게 할 수도 있습니다.

이 글 끝에 트위터 입력 상자가 있는데요, 이 입력 상자를 블로그에 넣는 방법을 소개합니다.

출처 : How to Add Tweet Box to Blogger (영어), 소셜댓글(2), 내 블로그에 트위터 입력창(tweet box)을 달아보자.

위 출처에는 트위터 입력 상자(Tweet Box)를 블로거닷컴에 설치하는 방법이 나와있습니다. 블로거닷컴은 위젯을 설치하는 게 자신만의 시스템 방식을 이용하기 때문에 일반적인 블로그나 웹사이트에서는 똑같이 해서는 안됩니다. 그래서 티스토리에서 사용할 수 있도록 내용을 약간 수정하였습니다. 기본적으로 티스토리에 설치하는 게 훨씬 더 쉽습니다.

트위터 입력 상자 만들기

먼저, Register an @Anywhere Application 페이지에서 트위터 입력 상자를 만들어야 합니다.

Application Name은 원하는 이름으로 아무거나 넣으시면 돼요. 이 이름은 Application의 이름이기도 하지만, 블로그에서 트윗을 보낼을 때, 메시지 아래에 표시도 됩니다.

Application Website와 Callback URL에는 블로그 주소를 넣으시고, Default Access type은 Read & Write를 선택합니다. 여기서 입력한 설정들은 나중에 수정할 수 있습니다.

입력 칸을 모두 채우고 Register Application 버튼을 누르면 끝납니다.
생성되는 자바스크립트를 복사해 둡니다.

티스토리에 트위터 입력창 설치하기

만들어진 자바스크립트 소스를 스킨 - HTML/CSS 편집에서 skin.html의 아무 곳에나 입력해도 됩니다만 가능하면 입력 상자를 표시할 위치에 넣어주세요. 블로그 로딩 속도를 중요하게 생각하시는 분이라면 </body>위에 입력하셔도 됩니다.

자바스크립트 소스만 입력해서는 입력 상자가 나타나지 않습니다. 입력 상자를 나타나게 할 위치에 <div>태그를 넣어야 합니다. div 태그와 자바스크립트를 함께 사용하는 것이 관리하는 측면에서 조금더 편리할 것 같네요.

아래와 같은 소스를 입력 상자가 나타나게 하고 자리에 넣어주세요. Your_API_key 자리에는 앞에서 만들었던 자바스크립트 소스에 들어 있는 API 키를 넣습니다. 혹시 잊어버렸다면 http://dev.twitter.com/apps에서 확인할 수 있습니다. 첫 번째 줄의 div의 id와 여섯 번째 줄의 "#tbox"가 같아야 합니다. 주의하세요. 이 id 값을 다르게 하면 입력 상자를 여러 개 만들 수도 있겠지요.

<div id="tbox"></div> 
<script src="http://platform.twitter.com/anywhere.js?id=YOUR_API_KEY&v=1" type="text/javascript"></script> 
<script type="text/javascript"> 
//<![CDATA[
  twttr.anywhere(function (T) { 
    T("#tbox").tweetBox({ 
      height: 100, 
      width: 600, 
      defaultContent: "@TwitterID" 
    }); 
  }); 
//]]>
</script>

위 소스에서는 매개변수로 height와 width, defaultContent를 사용했는데 몇 가지 더 있습니다. Tweet Box에서 사용할 수 있는 매개변수들과 설명입니다.

매개변수	형태	기본값	설명
counter	참/거짓	true	남은 글자수 표시
height	숫자	515(px)	높이, 단위는 픽셀, 단위 빼고 숫자만 입력
width	숫자	65(px)	"
label	문자	"What's happening?"	트위 박스 위쪽에 표시할 문장
defaultContent	문자	없음.	트윗 상자안에 기본적으로 표시할 문장

주의. label이나 defaultContent에서 사용할 문장에 공백이 있을 경우 큰따옴표로 감싸줘야 합니다.

defaultContent 자리에 여러분의 트위터 아이디를 넣으면 방문자가 여려분께 트윗을 바로 보낼 수 있습니다. 저처럼 치환자를 입력해서 트위터로 쉽게 공유할 수 있게도 할 수 있습니다. 본인이 어떻게 활용하느냐에 달려있어요. 더 자세한 사용법은 @Anywhere 도움말(영문)을 참고하세요.

블로그에서 트위터의 기능을 일부 사용함으로써 블로그도 활성화시키고, 트위터를 더욱 편하게 할 수 있는 좋은 툴입니다. 블로그와 트위터를 모두 사용하시는 분이라면 꼭 설치해 보세요.

 

관련글

트위터(Twitter)로 돈도 벌고, 기부도 하고...
여러분의 트위터는 얼마짜리에요?