상세 컨텐츠

본문 제목

웹사이트에 트위터로 간편하게 글을 보낼수 있는 리트윗 버튼을 설치해 보자 - TweetMeme

log

by Dapy 2009. 7. 30. 16:03

본문

반응형

 

 

트위터에는 하루에는 많은 웹페이지가 링크가 된다  이를 위해 보다 편리하게 링크를 할 수 있는 서비스들이 제공되고 있고, 웹사이트나 블로그에는 트위터로 간편하게 글을 보낼 수 있는 기능을 제공하는 곳도 늘어나고 있다  본 블로그에서도 개인적으로 간단하게 만들었던 트위터로 블로그 글 보내기 기능을 소개한 적도 있다  다만 아쉬웠던건 몇명이나 이 기능을 이용했는지 전혀 알 수가 없다는 것이다

 

지금 소개하는 TweetMeme 는 웹사이트나 블로그의 글을 트위터로 보낼 수 있는 리트윗 기능을 제공하는 서비스이다  이 서비스의 좋은 점은 리트윗 즉 트위터로 글을 몇명이나 보냈는지 확인이 된다는 것이다  사실 이 서비스는 이전에 트위터로 글 보내기 기능을 설치할때 알게된 서비스이지만 그냥 설치 안 하고 있다가 좀 더 트위터와 블로그를 연계 하고자 싶어서 이제서야 설치를 하고 설치를 한 김에 소개까지 하고자 한다 ( 어제 이거 테스트 하느라 이상한 글이 몇개 트윗 되었는데 본 분이 있을지 모르겠군요  그바람에 언능 삭제하느라 진땀 뺐내요 ^^;;; )

 

아마 블로그에 접속해 본 분들은 이미 알고 있겠지만 위 이미지처럼 본문의 처음에 새로 생긴 버튼을 볼 수 있을 것이다  숫자가 현재의 글을 트위터로 보낸 사람 수이고 그 밑에 retweet 을 클릭하면 트위터로 글을 보내게 된다



테스트로 retweet 버튼을 눌러봤다  그럼 트위터가 열리면서 위처럼 웹페이지의 타이틀인 블로그 이름과 포스트 제목 그리고 tinyurl 이 메시지 입력창에 입력이 되게 된다  유저는 update 버튼만 누르면 되는 셈이다

 

회원가입없이 버튼 설치가 가능하며 아래의 사이트에 자세히 나와 있다 

http://help.tweetmeme.com/2009/04/06/tweetmeme-button/

 

버튼의 형태는 일반형과 compact형 두가지가 존재하는데 기본 형태는 똑같으니 여기서는 일반형만 간략하게 살펴 보겠다  기본 형태는 아래와 같다 ( 숫자는 임의로 붙인거에요 )

  1. <scripttype="text/javascript">
  2. tweetmeme_url = 'http://yoururl.com';  
  3. tweetmeme_source = 'talktweetmeme';  
  4. tweetmeme_service = 'bit.ly';
  5. </script>
  6. <scripttype="text/javascript"src="http://tweetmeme.com/i/scripts/button.js"></script> 

 

2 번줄은 트위터로 보내기 위한 웹페이지 주소를 입력하는 곳이다  이 줄이 없다면 현재의 페이지를 트위터로 보내게 된다  그러니 없어도 상관은 없다  본인은 일부러 티스토리의 치환자를 이용한 블로그 주소를 입력했다 

3 번줄의 경우 이 불이 없다면 리트윗은 'RT @tweetmeme <title> <link>' 이런 형태가 된다  만약 자신의 트위터 계정이 있다면 그것을 활용하면 더 좋을 것이다  talktweetmeme 대신에 원하는 아이디를 입력하면 된다  본인의 경우 Dapy 를 입력해 놓았다  이럴 경우 리트윗은 'RT @Dapy <title> <link>' 이런 형태가 된다

4 번줄은 tinyurl을 무엇으로 할 것인지 선택하는 것이다  이 줄이 없을 경우 bit.ly 를 이용해 tinyurl을 만들게 된다  위에 링크한 버튼 설치 페이지에 이용이 가능한 서비스들이 나와 있다

 

이렇게 완성된 코드를 이제 웹사이트나 블로그의 원하는 위치에 삽입을 하면 된다  

 

마지막으로 팁 하나,,,본인처럼 본문 처음에 삽입을 하려는 분들은 그냥 딸랑 삽입을 할 경우 버튼과 글이 따닥 따닥 붙어 보기가 좋지 않다  이걸 위 이미지처럼 보기 좋게 살짝 띄우는 방법을 소개할까 한다

<div id="tweetmeme_button" style="float: left; margin-right: 10px">
<script type="text/javascript"> 
tweetmeme_url = 'http://paperinz.com/1198';
tweetmeme_source = 'Dapy'; 
</script> 
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js">
</script>
</div>

위가 본인이 사용한 코드이다  위에서 보듯이 굵은 글씨로 된 첫째줄과 마지막째줄을 같이 사용하면 된다  첫줄에 보면 margin-right: 10px 라는게 보일 것이다  이게 오른쪽편에 10픽셀의 공간을 주는 것이다  

 

앞으로 블로그를 방문하는 트위터를 유저라면 리트윗 버튼 많이들 활용해 주기 바란다 ^^*

 

 

반응형

관련글 더보기

댓글 영역