블로그 포스팅을 트위터에 알리는 간단한 위젯 공개 Beta0.1

얼마전에 2009 블로그 포럼을 하고 난뒤에 한가지 고민이 생겼습니다. 

'블로그를 하는 분들이 어떻게 하면 트위터를 더 쉽게 접근할까? '

포럼의 Opening 발표에서 강팀장은 

Blog = 새로운 Contents를 생산해 내고 저장하는 이상적인 매체

Twitter = SNS 기반의 Contents 배포에 효율적인 도구

이라고 소개를 했었습니다. 
2009/11/11 - [2009 Blog&Twitter 포럼] - SNS은 블로그등 Contents 배포에 효율적인 도구

그래서 블로그의 콘텐츠를 트위터에 쉽게 알릴 수 있는 도구가 있으면 아마도 많은 블로거들이 트위터를 통해 방문자수를 늘리고 좋은 콘텐츠를 많은 사람과 공유할 수 있지 않을까 하는 생각이 들었습니다. 

몇군데를 찾아보게 되었습니다. 어떻게 하면 쉽게 블로그에 설치하고 트위터에 쉽게 알릴 수 있을까?

그런데 생각외로 트위터와 블로그를 연결하는 위젯은 몇가지 있는데... 블로그 포스팅을 트위터에 알릴 수 있는 위젯이나 기능은 별로 없다는 것을 괜시리 아쉽게 했습니다.

블로그의 좋은 콘텐츠를 트위터에 알릴때는 블로거 본인이 직접 알리기도 하겠거니와 중요한 요소는 그 콘텐츠를 본 사람이 콘텐츠에 대해서 만족을 했을때 스스로 트위터에 알리도록 해야 한다는 것입니다.

현재 티스토리는 블로그 주인이 포스팅을 작성한 뒤에 자동으로 트위터에 알릴 수 있도록 하는 플러그인가 있긴합니다. 

하지만 이 플로그인은 블로그 주인이 한번만 트위터에 포스팅을 하는 기능이고, 다른 사람이 추천을 할 수 있는 것은 아닙니다. 

그리고 다음 위젯뱅크에 가면 트위터에 메세지를 보내는 위젯이 있긴 하지만 그 또한 블로그에서 트위터로 메세지만 보낼 수 있게 되어 있습니다. http://widgetbank.daum.net/widget/view/459?sortType=&searchKeyword=트위터&pageBottomId=453&pageTopId=459&pageBottomCnt=1067&pageTopCnt=936

포스팅 자체를 트위터에 알리도록 해야 하는데......

해외를 찾아보니... 좋은 도구가 있더군요.

backtype.com 에서 제공하는 리트윗 버튼입니다. 사용타입은 2가지가 있는데...

긴 버튼 형식과

화면 출처 : http://rukxer.net/2461102

버튼 형식

화면출처 : http://sshong.com/2513112

입니다. 

어떻게 보면 강팀장이 찾던 가장 좋은 도구 입니다. 

그런데 설치할려니... 해외 사이트이고 회원가입을 하고 트위터 계정을 등록시키고 해당 코드를 복사해와야 한다는 것입니다. 

물론 과정은 어렵지 않았습니다. 하지만 backtype.com 사이트에 접속해서 어떻게 등록해야 하는지 막막한 생각도 들었습니다. 만약 영어에 거부 반응이 있다면 설치하는데 어려움이 있을 것 같았습니다.

그렇다면.... 그냥 트위터에 알릴 수 있는 간단한 위젯을 만들자.

라는 결론에 도달했습니다.

트위터에 알릴 수 있는 간단한 위젯이라면.... 위에 경험들을 살려서 몇가지 전제조건을 충족해야 했습니다.

1. 블로그 주인도 알릴 수 있어야 하지만 무엇보다 블로그 내용을 본  다른 사람이 쉽게 알릴 수 있어야 한다.

2. 별도의 회원가입을 거치지 않고 설치할 수 있어야 한다.

3. 블로그 주인은 이왕이면 트위터 계정이 있으면 좋겠지만, 다른 사람이 트위터에 알리는 것이기에 블로그 주인은 트위터 계정이 없어도 된다.

4. 트위터에 알려진 콘텐츠는 그 경로를 통해 블로그에 접속하는 사람이 얼마나 되는지 쉽게 알 수 있어야 한다.

5. 간단하게 설치하고 사용할 수 있어야 한다.

이렇게 5가지 전제조건입니다.

1. 블로그 주인도 알릴 수 있어야 하지만 무엇보다 블로그 내용을 본  다른 사람이 쉽게 알릴 수 있어야 한다.

다른 사람이 블로그 내용을 트위터에 알리기 때문에 트위터 아이디로 쉽게 트윗을 할 수 있어야 했고, URL 은 트위트의 140자 제한때문에 Short URL로 자동 변환하게 해야 했습니다.

그리고 한번 알릴 사람은 다음에 알리때 트위터 아이디를 넣지 않아도 되도록 자동로그인 기능을 추가하고 쉽게 풀수 있게 했습니다. 

2. 별도의 회원가입을 거치지 않고 설치할 수 있어야 한다. 

쉽게 편하게 사용하고 특별한 영리 목적이 없기 때문에 별도의 회원가입 없이 트위터를 받아갈 수 있도록 했습니다.

3. 다른 사람이 트위터에 알리는 것이기에 블로그 주인은 트위터 계정이 없어도 된다.

블로그 주인이 트위터 계정이 없더라도 사용할 수 있으며, 트위터 계정이 있다면 다른 사람이 블로그 내용을 트위터에 알렸을때 @트위터계정으로 누가 자신의 글을 보냈는지 멘서(message)로 알 수 있는 기능을 고려하였습니다.

4. 트위터에 알려진 콘텐츠는 그 경로를 통해 블로그에 접속하는 사람이 얼마나 되는지 쉽게 알 수 있어야 한다.

알려진 블로그 내용은 트위터를 통해 블로그로 유입하게 되면 화면에서 바로 몇 사람이 트위터에서 주소로 클릭해 왔는지 방문자 숫자를 바로 표시했습니다. 위에 있는 backtype 은 알림 횟수(retweets) 수라면 제가 만든 위젯은 retweets 후 방문자 수 입니다. 

5. 간단하게 설치하고 사용할 수 있어야 한다.

아직 html에 접근하기 힘든 분들에게 어려움을 가질 수 있지만, 스크립트를 블로그에 간단하게 설치만 하면 사용할 수 있도록 했습니다. 

무엇보다 다른 위젯과 달리 리트윗(트위터 알리기) 버튼을 클릭해도 트위터도 이동하지 않고 블로그안에서 알릴 수 있다는 것입니다. ^0^ (과연 장점이 될지는 아직도 고민중이긴 하지만.. ^^)

이렇게 해서 블로그 위젯을 만들게 된 것입니다.

해외에 있는 다른 트위터 관련 위젯보다 아직 부족한 것이 많습니다. 하지만 유용하게 사용할 수 있다면 많은 분들에게 도움이 되지 않을까.. 하는 생각을 해 봅니다.

현재는 티스토리 계열의 블로그에만 설치할 수 있는데... 반응이 괜찮다면 네이버외에 스크립트가 허용되는 블로그라면 쉽게 달수 있도록 버전을 업그레이드 시켜 볼려고 합니다. ^^

소스는 다음과 같습니다.

티스토리 용입니다.

* 블로그 화면화면에 나오는 갯수에 따라서 별도의 소스를 이용하도록 했는데... 수정했습니다. ^^

이제 아래 소스 하나만으로 사용이 가능합니다. 

<div align=center>

<script src="http://2u.lc/packer/js/rt.js/default"></script>

<script>

  var fn = 'default';  // RT 디자인

  var username = 'Twitter username';  

  var hosturl = 'Blog 고유주소';  ※ 주의 사항 Blog 고유주소를 넣을때는 하위 경로까지 넣으면 안됩니다.

  var url = hosturl+('[샾샾_article_rep_link_샾샾]');

  var title = '[샾샾_article_rep_title_샾샾]';

  _rt(fn, username, url, title);

</script>

</div>

- RT 디자인 : 이후 디자인을 다양하게 지원할 계획입니다. 지금은 Beta 버전이기 때문에 default 로 그대로 둡니다.

- Twitter Username : 블로그 주인장의 트위터 ID 를 넣습니다. 만약 계정이 없다면 비워두면 됩니다.

- Blog 고유주소 : 자신의 블로그 주소를 넣으면 됩니다. 블로그 주소는 필수항목입니다. 그래야 트위터에서 자신의 블로그 포스팅으로 들어올 수 있습니다. 

※ 주의 사항 Blog 고유주소를 넣을때는 하위 경로까지 넣으면 안됩니다. ^^

예를 들어 http://ebizstory.com/tc/ 가 블로그 주소라고 하더라고... http://ebizstory.com 까지만 적어야 합니다. 

절대 도메인 자체로 넣어주셔야 해요~~

소스 다운 로드 : 

트위터to블로그위젯_여러포스트용.txt

제 블로그에 적용한 내용입니다.

전.... 한 페이지에 하나의 포스트가 나오기 때문에 소스가 간단합니다. ^^

<!---- 블로그 내용 트위터로 보내는 위젯 시작---->

<div align=center>

<script src="http://2u.lc/packer/js/rt.js/default"></script>

<script>

  var fn = 'default';  // RT 디자인

  var username = 'ebizstory'; // Twitter username

  var hosturl = 'http://ebizstory.com';  //블로그 고유 URL

  var url = hosturl+('[샾샾_article_rep_link_샾샾]');

  var title = '[샾샾_article_rep_title_샾샾]';

  _rt(fn, username, url, title);

</script>

</div>

<!---- 블로그 내용 트위터로 보내는 위젯 끝---->

이제 막 만들어 공개하는 위젯이기 때문에 여러가지 개선사항이 많습니다. 

그리고 현재로는 티스토리 용만 만들어졌기 때문에... 다른 블로그에서는 사용하지 못하는 것이 아쉽습니다.

어느정도 반응이 괜찮으면 더 많은 블로그에 적용될 수 있도록 계속 개발해 보겠습니다. ^^

위에 소개한 해외 블로그 위젯도 공유합니다. ^^

사이트 주소는 http://backtype.com

설치 방법 :

긴버튼형 -  Rukxer 님의 트위터로 글 보내는 리트윗 버튼, Backtype 달기 : http://rukxer.net/2461102

버튼형 - 서울비님의 티스토리 블로그에 Retweet 버튼 달기 예시 : http://seoulrain.net/1412

본 포스팅 내용은 저희 연구실 블로그로 이관 했습니다. ^^
주소는 http://www.estorylab.com/18 입니다.
여기 접속하시면 위 위젯의 업그레이드 버전 및 설치에 대해서 자세한 지원을 받을 수 있습니다. 

^^ 개인적으로 진행하기 힘들어 결국 팀원들의 도움을 청하였습니다. 홍홍홍~~ ^0^ 너그러이 이해를.. 

덧붙임말 :

그런데... 위젯을 설치하고 나면 반응이 좋은지 어떻게 알까요?? ㅡ.ㅜ

음.... 혹시 설치하신 분 계시면 이 포스팅에 트랙백이나 댓글을 남겨주시면 어떨까요? ^^

하긴 아직 위젯 이름도 짖지 않았군요. ^^

그리고 괜찮다 싶으면... 아래 추천하시는 것도 잊지 마시구요~ ^^ 

감사합니다. 아자~아자~!!

2009 블로그 포럼이후 뭔가 과제로 남아서 마음을 누르고 있던 것을 하나 벗어던진 것 같아 기분이 좋습니다. ^^ 다들 화이팅 입니다~~ ^0^

덧붙임말 :

벌써.... 버그 관련 보고를 해 주신분이 계시더군요. ^^

위 위젯은 스크립트 방식입니다. IE6 버전에서 깨짐 현상이 있더군요. 아무래도 CSS쪽 문제인것 같습니다. ^^ 한번 더 고민해보고 해결 방법을 찾아보겠습니다.

잘 안되면... 그냥.. Flash 방식으로 쓰기 쉽게 만들어 보겠습니다. ^^

화이팅~~ 입니다.

덧붙임말 (2009.11.27):

블로그 갯수마다 다른 소스를 이용하도록 한 방식에서 통합 방식으로 소스를 변경했습니다. ^^

트위터 방문자(twt visitors)가 상위 도메인 접근에 따라 다르게 나오시던 분들은 통합 소스를 사용하면 제대로 됩니다. 아궁... 일해야 하는데.. 이것만 지켜 볼려니.. ㅋㅋㅋ