트위터 호버카드 기능을 블로그에 적용하기
• 트위터를 시작하시려는 분은 우선 트위터 기본 사용법을 역순으로 읽어보시는 걸 권합니다.
• 그리고 트위터에서 저를 follow 하세요! : )
트위터가 프로필 미리보기 기능인 호버카드(hovercards)를 적용한 지 (4월 말 현재) 4개월이 지났습니다. 트위터를 저처럼 주로 웹브라우저로 이용하는 사람에게는 아주 유용한데요, 트위터는 개발자를 위한 공간에 일반 블로거도 이 호버카드 기능을 자신의 블로그에 쉽게 적용할 수 있도록 장치를 마련했습니다. 이름은 애니웨어(Anywhere).
제 트위터 아이디 @odlinuf 에 마우스 포인터를 살며시 올려놔 보세요. 트위터 웹에서 아이디에 마우스 포인터를 올려놨을 때와 똑같이 작은 팝업창이 나타나는 걸 확인할 수 있습니다. (2010년 4월25일 현재 트위터 웹에 이 기능이 빠져 있습니다.)
이번 글에서 어떻게 이 기능을 블로그와 접목하는지 그 방법에 대해 설명하겠습니다. 단, 티스토리나 텍스트큐브닷컴, 텍스트큐브 등, 블로거 여러분이 스킨 소스코드를 편집할 수 있는 블로그 서비스여야만 한다는 점 미리 알아두세요. (다음, 네이버 등 포털사 서비스도 스킨 소스코드를 편집할 수 있는지는 잘 모르니 확인해보시고요.)
우선 트위터 Anywhere로 이동합니다. 트위터에 로그인한 상태에서 아래 "Start using it now" 버튼을 누릅니다. 로그인하지 않더라도 버튼을 누르면 로그인 화면이 나타납니다.
Application Name
애플리케이션 이름을 적는 부분입니다. 그림에 표시했듯이 우리말로도 가능합니다. 영문으로 적을 때 주의사항은 'twitter'가 포함되면 다음 단계로 넘어가지 않는다는 겁니다. 트위터는 자사 서비스 외에 제 3자가 'twitter'라는 용어를 포함해 영리활동하는 것을 아주 꼼꼼하게 제한합니다.
Application Website
애플리케이션을 설치할 웹사이트, 즉 블로그/웹사이트 주소를 적어 넣습니다.
Organization
애플리케이션을 사용할 조직/단체의 이름을 적는 곳인데, 첫번째 이름과 같아도 상관없습니다.
Callback URL
Application Website와 똑같이 블로그/웹사이트 주소를 적어 넣으면 됩니다.
Default Access type
두 가지 중 어느 것을 선택하든지 크게 상관없습니다.
Application Icon
아이콘 이미지를 업로드하는 부분으로, 그림 파일을 업로드 하고 싶으신 분은 "파일 선택" 버튼을 누르고 자신의 컴퓨터에 저장된 아이콘 파일을 찾아 선택하면 됩니다. 나중에 해도 상관없습니다.
이제 마지막 단계로, 큼지막하게 적힌 글자를 그 아래 입력창에 대소문자 구별해서 그대로 써넣습니다.
그리고 맨 아래 "Register application" 버튼을 누르면 아래 그럼처럼 API 이용 약관이 나타나는데요, 거절하려고 위 작업을 한 것이 아니니 "I Accept" 버튼을 눌러서 다음 단계로 이동합니다. :)
아래와 같이 다음 화면에 나타나는 자바 스크립트 코드를 잘 복사해둡니다. 참고로 아래는 제 블로그에서만 쓸모있는 소스코드이므로 여러분이 복사해서 가져다 붙여넣기 해도 작동하지 않습니다.
<script src="http://platform.twitter.com/anywhere.js?id=VKF66wvk9CKrrEQZonA&v=1">
</script>
<script type="text/javascript">
twttr.anywhere(function(twitter) {
twitter.hovercards();
});
</script>
그럼 이제 여러분 블로그/웹사이트의 스킨 소스코드, 티스토리 경우 skin.html 파일을 열어 <head></head> 부분을 펼칩니다. 위 자바 스크립트가 들어갈 자리는 바로 이 <head>와 </head> 사이입니다.
<head>
<title> | </title>
.
.
.<script src="http://platform.twitter.com/anywhere.js?id=VKF66wvk9CKrrEQZonA&v=1">
</script>
<script type="text/javascript">
twttr.anywhere(function(twitter) {
twitter.hovercards();
});
</script>
.
.</head>
붙여 넣었으면 적용 버튼을 눌러 마무리합니다.
자, 이제 여러분이 글을 쓸 때 아무런 링크를 연결하지 않고도 단순히 '@아이디'로 입력하면 자동으로 호버카드가 나타나서 트위터 프로필이 보일 겁니다. 호버카드 기능으로 더욱 재밌게 블로깅/트위팅 하세요! :)
Tweet
Leave your tweet!
좋은 정보 알려주셔서 대단히 감사합니다. 열심히 배워볼께요. 사랑합니다.
헉.. 진정하시고 걍 좋아만 해주심 안될까요;;
새로운 마음으로 열심히 배우겠습니다
사랑합니다 오영자
좋은 정보 감사드립니다. ^^; 저도 시간날 때 적용하도록 하겠습니다.
별말씀을요. 좋은 건 주고받고 나눠야 ㅎㅎㅎ
정말 놀랍도록 자상하게 설명해주셨군요. 명쾌한 설명에 감사하드립니다. 사랑합니다.
처음 들어온날
저도.. 제 웹사이트에 적용했습니다. :)
좋은 인연이 되게 해 주심에 감사드리고
더 좋은 결과로 서로 이바지할 수 있게 되기를 바랍니다
건강하고 맛있게 보내기를 바랍니다^^
좋은 정보 계속 기대할께요 ^^
아직 너무 어렵네요T_T 어버버~ 님을 팔로우 하는 것도 모르겠어요 ㅠㅠ 아우
좋은정보 감사 열심히 할려니 머리가 띵하네요
글 잘 봤습니다.
전 스크립트가 안나오고 맨 api 키등등이 나오고 맨아래
Note: xAuth is not enabled for applications by default. Email api@twitter.com to request xAuth access.
일케만 나오는데 모가 문제일까요?
특별히 다르게 한건 없습니다.
트위터에 오늘계정 신청했는데!아직 어렵네요~ㅎㅎ.
자신은 없지만 좋은 정보 감사합니다.
트위터 가입하고 첨 팔로우 해봤습니다. ㅎㅎ 좋은글들이 많네요. 아직 이해할 수 없는 단계도 많지만 (덜덜) 천천히 시작하려고요. ^^
혜린혜진아빠
혜린혜진아빠
안녕하세영
비밀댓글 입니다
좋은 정보가 정말 많네요~ 앞으로 꼼꼼히 읽어보며 유용하게 배워가도록 하겠습니다!^^ 근데 저도 며칠 전에 무작정 계정은 만들었는데 오늘 시스믹 설치하고 들어가려니 비번이 생각이 안납니다!!ㅠ 어떻게 해아 찾을 수 있을까요~ 이 까막눈...ㅠㅜ
ㄴㄴㄴ
ㄴㄴㄴㄴ
좋은하루
ㅁㅁ
##wkfahfmrpTtmqslek??/
,,,l;
,,,l;
새로운마음으로열심히배우겠습니다 ㅋㅋ오영자
새로운 마음으로 열심히 배우겠습니다 사랑합니다
오영자