트위터 호버카드 기능을 블로그에 적용하기

트위터 팁 2010. 4. 26. 08:21 윤석영(odlinuf)

• 트위터를 시작하시려는 분은 우선 트위터 기본 사용법을 역순으로 읽어보시는 걸 권합니다.
• 그리고 트위터에서 저를 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>[##_page_title_##] | [##_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>

붙여 넣었으면 적용 버튼을 눌러 마무리합니다.

자, 이제 여러분이 글을 쓸 때 아무런 링크를 연결하지 않고도 단순히 '@아이디'로 입력하면 자동으로 호버카드가 나타나서 트위터 프로필이 보일 겁니다. 호버카드 기능으로 더욱 재밌게 블로깅/트위팅 하세요! :)


Leave your tweet!

* 표시가 있는 곳은 꼭 입력해주세요.

  1. 이전 댓글 더보기
  2. schangkoo@hanmail.net 2010.10.31 02:21

    배우려고 하는데, 제대로 되었는지 궁금해요.

  3. 박기한 2010.10.31 03:44

    오늘첨 가입해서 아직 뭔지 몰것네요

  4. Serendipity7997 2010.11.01 04:54

    아..아무리 읽어봐도 어려운건 제가 이해력이 떨어져서 그런걸까요?ㅠㅠ..그래도 자세하게 알려주시니 그나마 감사하고 다행스럽다는..몇번이고 하다보면 되겠지라고 긍정적으로 생각하지만..그래도 어렵네요..에공..

    • 안되는사람도 2010.11.01 10:11

      그대로해도 안되는 사람도 있군요.
      아이디가 이상한건지..
      @arirangkorea ^^

  5. 이희봉 2010.11.05 17:26

    트위터를 알려주실분 있으시나요?

  6. Spaceman7 2010.11.05 17:29

    이구~~잘 몰러~~~

  7. hansara 2010.11.08 15:42

    오늘 첨 가입했는데 어떻게 해야 하는지 막막하네요ㅜ.ㅜ

  8. 박숙경 2010.11.10 11:12

    정보 감사합니다.

  9. telo 2010.11.10 13:33

    maho kalian !

  10. 김민성 2010.11.19 17:26

    광주인입니다..^^&

  11. kimnajung 2010.12.05 21:21

    좋은정보감사요^^

  12. kimnajung 2010.12.05 21:22

    좋은정보감사요

  13. BlogIcon 김홍화 2010.12.20 12:25

    도움이 많이 되네요
    ㅋㅋㅋ

  14. BlogIcon 윈컴이 2011.02.18 20:40 신고

    좋은 정보 감사합니다 ㅎㅎ

  15. 2011.02.18 22:06

    비밀댓글입니다

  16. 강시현 2011.02.18 22:06

    트위터가 머지 조금은 알수있을것같네요

  17. 강시현 2011.02.18 22:06

    트위터가 머지 조금은 알수있을것같네요

  18. BlogIcon BytesLand 2011.03.21 21:27

    I know that Twitter is loved by people all over the world, but, frankly speaking, cannot share this affection, because find absolutely nothing useful in this tool. If I am not right, please, make me think differently.

  19. ysj 2011.06.16 13:12

    for entry

  20. 게브 2011.08.23 15:04

    여기서 트위터 공부하고 가요

    정말 감사합니다

  21. BlogIcon ahmad 2013.10.25 09:48

    aku ingi bertemu chan kelvin

© 2009 Twitteran. 윤석영's blog is powered by Tistory. Blog design Criuce Job+The Unstandard 
맨 위로