트위터 API 플랫폼과 OAuth – Twitter for Websites

이 포스팅은 원래 트위터 OAuth만 다룰려고 했었지만 트위터 API 플랫폼과 얽힌 부분이 많기 때문에 좀 더 포괄적으로 적어보려고 합니다. 단, 이 포스팅은 소개 정도에 그치기 때문에 자세한 내용은 해당 문서를 꼭 읽어 보시길 바랍니다.

트위터 API 플랫폼 훑어보기

트위터 개발자 페이지에 있는 슬라이드입니다:

Developing for @twitterapi (Techcrunch Disrupt Hackathon)

View more presentations from Raffi Krikorian

슬라이드를 보면 트위터 API 플랫폼에 대해 간단한 설명이 나와있습니다. OAuth는 API 사용을 위한 사용자 인증에 쓰이며 현재는 OAuth 1.0a를 구현중인데 곧, OAuth 2.0을 공개할 예정인가 보네요. 참고로 페이스북은 OAuth 2.0을 구현하고 있습니다.

트위터 API를 사용하는 두 가지 방식

슬라이드에서도 나와있듯이 트위터 API를 사용하는 방법은 크게 두 가지로 구분할 수 있습니다. 첫 번째는 트위터에서 제공해주는 웹용 컴포넌트를 가져다 쓰는 방식(Twitter for Websites)이고 두 번째는 트위터 API를 직접 사용하는 방식(REST/Stream API)입니다. 이번 포스팅에서는 Twitter for Websites에 대해서 살펴보겠습니다.

Twitter for Websites

트위터에서 웹 사이트를 위해 제공하는 여러 컴포넌트로 직접 API를 호출하지 않고 트위팅, 팔로우 버튼 등을 웹 페이지에 넣으면 사용자의 로그인 정보(정확하게는 .twitter.com에 저장된 쿠키)를 사용해 트위팅, 팔로우 기능을 하게 됩니다. 만약 로그인 정보가 없다면 로그인 창이 나타나게 됩니다. 컴포넌트라고 말은 거창하지만 사실 태그 하나와 약간의 자바스크립트로 이루어져 있고, 이것을 페이지에 붙여 넣으면 끝입니다. 참 쉽죠? 트위터에서 제공하는 컴포넌트는 다음과 같습니다:

Tweet Button, Follow Button

제공되는 기본 버튼의 종류

말그대로 트윗과 팔로우 버튼입니다. 편리하게 트윗 카운팅도 제공해 주며 자신의 웹 사이트 정보나 언어 등을 입력해 제공되는 기본 버튼을 커스터마이징 할 수도 있습니다. 언어를 한국어로 설정하면 한국어로된 버튼도 만들어 줍니다. 이 버튼을 클릭하면 다음과 같은 화면이 나옵니다:

트윗 버튼 클릭하면 이런 창이 나옵니다

익숙한 창이죠? 한 가지 재미있는 건 여러 파라미터들을 설정해 줄 수 있다는 겁니다. 파라미터 설정을 통해 버튼 커스터마이징을 할 수도 있고, 어떤 텍스트를 트윗창에 넣을 것인지, 어떤 URL을 공유할 것인지, 해시태그로 논의를 이어갈 것인지, 누구를 멘션할 것인지 등을 설정해 버튼을 생성할 수도 있고, 자신만의 버튼을 만드는 것도 가능합니다.

Embedded Tweets

임베디드 트윗은 트위터 사이트의 특정 부분을 아예 가져다가 붙일 수 있습니다. UI도 그대로 가져오니 상당히 편리하겠네요. 사용자들도 동일한 경험을 할 수 있겠죠?

트윗 임베드하기

트위터 문서대로라면 트윗 세부 페이지마다 임베드 버튼이 노출되어야 하는데 어째서인지 관련 버튼이 보이질 않네요;;

나는 이런 버튼 안보이는데?

저 버튼을 누르면 유튜브에서 동영상 퍼가듯이 관련 코드가 나오고 복사 붙이면 됩니다. 그런데 이렇게 복사 붙이기를 하지 않고 json을 통해 임베드 트윗에 관련된 데이터를 받아온 후, 동적으로 보여줄 수 있는 방법도 제공하고 있는데요. 이를 oEmbed라고 한다네요.

Web Intents & Javascript callback events

Web Intents는 팝업 창으로 이루어진 트위터 API 사용 방법으로 웹 페이지에 끼워 넣어도  따로 다른 페이지에 왔다갔다 할 필요도 없고, 말그대로 웹에 최적화된 방법이라고 할 수 있습니다. Web Intents 역시 위의 방법들처럼 사용자의 로그인 정보가 담긴 쿠키를 사용해 API를 사용하게 되며(만약 로그인 정보가 없다면 팝업으로 로그인 창이 뜨게 됩니다) tweet, reply, retweet, favorite, follow의 기능을 사용할 수 있습니다. 트위터의 거의 핵심적인 기능들을 사용할 수 있다는 거죠. 반대로 이정도 기능을 사용할꺼면 굳이 REST/Stream API를 사용할 필요가 없다는 말도 됩니다. 뒤에서 더 설명하겠지만 API를 사용할 경우 할 수 있는건 더 많아지지만 앱 등록부터 OAuth 인증까지 신경써야 하는 부분이 많아집니다.

Web Intents를 사용하는 방법은 매우 쉽습니다.

1.

<script type=”text/javascript” src=”http://platform.twitter.com/widgets.js”></script> 태그를 임포트 하구요.

2. 사용하고 싶은 기능을 <a> 태그로 만들어 주면 됩니다. 버튼과 마찬가지로 href 속성에 쿼리스트링 형태로 파라미터를 넘기는 것도 가능합니다.

링크를 클릭하면 스크립트가 알아서 적당한 크기의 팝업 창을 띄워줍니다. 그리고 이미지 리소스들도 잔뜩 지원해주니 맘에 드는 새 한마리 가져다가 쓰시면 됩니다

Web Intents나 Tweet/Follow Button을 사용할 때, 이벤트 콜백을 지원하는데요. 이것을 Intent Events라고 부르고 다음과 같은 종류가 있습니다:

• widgets.js 파일 로딩이 완료 됐을 때
• tweet, follow, retweet, favorite 기능이 완료 됐을 때
• 트윗, 트윗 카운트, 팔로우, 유저 이름을 클릭했을 때

Share Bookmarklet

북마클릿. 아마 이건 즐겨찾기가 우리한테 더 친숙할  겁니다. 즐겨찾기에 자바스크립트를 한 줄 넣어놓고, 트윗하고 싶은 페이지에서 한 번 누질러 주면 요런 팝업창이 뜹니다:

맘에 드는 페이지에서 즐겨찾기를 누르면 바로 공유할 수 있습니다

즐겨찾기에 등록해놓고 써보세요:

javascript:(function(){window.twttr=window.twttr||{};var D=550,A=450,C=screen.height,B=screen.width,H=Math.round((B/2)-(D/2)),G=0,F=document,E;if(C>A){G=Math.round((C/2)-(A/2))}window.twttr.shareWin=window.open('http://twitter.com/share','','left='+H+',top='+G+',width='+D+',height='+A+',personalbar=0,toolbar=0,scrollbars=1,resizable=1');E=F.createElement('script');E.src='http://platform.twitter.com/bookmarklets/share.js?v=1';F.getElementsByTagName('head')[0].appendChild(E)}());

 @Anywhere

아마 웹 사이트 중에 트위터로 로그인(Connect to Twitter)을 해서 서비스를 이용해 보신 적이 있으실 텐데요. 바로 @Anywhere의 기능 중 하나입니다. 이 외에도 username을 찾아서 트위터 링크를 만들어 준다던지, 해당 username에 마우스를 올려다 놓으면 정보 창이 뜬다던지, 팔로우 버튼, 트윗 폼 같은 기능이 제공됩니다.

사용법은 기존보다 조금 더 복잡한 편인데 바로 컨슈머 키(또는 API key)가 필요하기 때문입니다. 컨슈머는 OAuth의 용어로 서비스 프로바이더(트위터)를 이용하는 클라이언트(여러분의 웹 애플리케이션)를 말합니다. 컨슈머 키를 얻기 위해선 자신의 애플리케이션 정보를 등록해야 합니다. 참고로 REST/Stream API를 사용하기 위해서도 이 등록절차를 거쳐야 합니다.

사용하는 방법은 위의 방법들과는 다르게 자바스크립트를 하나 임포트 한 후, jQuery 스타일로 CSS 셀렉터로 엘리먼트를 가져와 필요한 기능을 적용시키게 됩니다. 예를 들어, 트위터 사용자 유저네임이 있을 때 해당 유저의 트위터 페이지로 링크를 시키는 기능(linkify)을 적용하고 싶다면..

간단한 마크업을 한 후..

링크가 된 부분이 보이시나요?

Web Intents 보다 더 강화된, 트위터 친화적인 사이트를 만들고 싶으시다면 @Anywhere가 제격일 것 같네요.

 

트위터 OAuth와 Access Token 얻기로 이어집니다.