BLOG Story
사이트와 블로그에 트위터 버튼, 트위터 공식 트윗 버튼 다는 방법
2proo
2012. 7. 20. 09:00
사이트와 블로그에 트위터 버튼, 트위터 공식 트윗 버튼 다는 방법
예전에 블로그에 SNS 공유 버튼 달기, 트위터 리트윗 버튼 다는 방법에 대해 포스팅했던 적이 있습니다.
아래 스크린샷처럼 소스 공개를 했었는데 1~2년이 지나고 나니 바뀌기도 많이 바뀌었고 트위터나 페이스북 자체의 공식 트윗 버튼과 좋아요 버튼도 소스가 많이 바뀌었네요.
예전에는 트위터 공식 버튼을 안쓰고 트윗미미(Tweet meme) 라는 외국 사이트의 트윗 버튼을 가져다 썼었는데 속도가 좀 느리고 공식 트위터 버튼과 생김새가 달라 거부감이 있던것도 사실입니다.
이 포스트에서처럼 이 블로그 스킨에는 게시물 상단과 하단에 SNS 공유 버튼들을 달아놨습니다.
상단에는 가로형, 하단에는 세로 박스형의 버튼들을 달아놨습니다. 사실 위나 아래 한군대에만 달면 블로그 로딩속도가 좀 더 빨라질 수 있는데 그냥... 위 아래 둘 다 달아놨네요.
트위터 버튼을 클릭하게 되면 아래 화면처럼 해당 게시물을 공유하도록 트위터를 할 수 있는 창이 나타납니다.
먼저 브라우저 상에서 트위터에 로그인이 안되어있다면 로그인 하면 되고 그 후에 트윗할 내용을 수정한 후 트윗하기 버튼을 누르면 팔로워들에게 해당 내용이 타임라인에 보내지게 됩니다. 그리고 아래 URL 주소는 트위터 공식 Short URL 도메인인 t.co 라는 단축 주소로 나가게 됩니다.
트위터 버튼을 다는 방법은 간단합니다. 예전과는 많이 달라졌지요. 훨씬 쉽고 간편하게 할 수 있습니다.
트위터 공식 홈페이지에 접속해서 개발자 페이지에 들어가면 웹사이트와 트위터 관련 플러그인들을 설치할 수 있는 도구와 문서를 마련해 놓았습니다.
트위터 개발자 사이트 : https://dev.twitter.com/docs/twitter-for-websites
개발자 사이트에서 Create a button for your website 링크를 클릭합니다.
하단과 같이 링크 공유하기 버튼, 팔로우 하기 버튼, 해시태그, 멘션 버튼등을 만들 수 있습니다.
그중에 링크 공유하기 버튼을 클릭.
트위터 트윗 버튼 설정을 할 수 있는 창이 나옵니다.
예전 트위터 버튼들은 URL 공유 및 트윗 문구, 출처 등을 일일이 소스 수정해서 바꿔줘야했지만 새로운 공식 트위터 버튼은 자동으로 해당 페이지와 게시물의 url 과 제목을 인식하여 보여주게 됩니다.
갯수 보이기는 리트윗된 횟수, 즉 트위터로 트윗된 횟수를 버튼에 표시해주는 기능입니다.
출처는 해당 게시물이나 페이지의 주인, 사이트 운영자 등의 트위터 계정을 트윗에 표시해주는 기능입니다.
추천이나 해시태그 역시 기본적으로 트윗상에 보여주게 되는데 수정이 가능합니다. 공백으로 놔둬도 됩니다.
만약 본인이 스포츠나 스포츠 뉴스 사이트의 글을 리트윗 했었다면 트위터 사이트에서 자신과 비슷한 취향의 글들을 공유했던 사람들을 팔로우 추천해주는 기능입니다. 즉, 같은 관심사를 가진 사람을 트위터가 인식하여 팔로우 할 수 있게 추천을 해주는 기능입니다. 해당 기능은 꺼도 되고 그냥 놔둬도 됩니다.
아래는 트위터 버튼의 세부 설정 사항입니다. 위에서 옵션과 기능을 모두 설정하면 우측에 미리보기 및 해당 트위터 버튼 소스를 보여주게 되는게 그 소스에서 조금씩 수정하면 좀 더 세밀한 설정이 가능합니다.
트위터 기본 공식 트윗 버튼의 소스에서 따로 설정해줄건 별로 없습니다.
다만 트위터 트윗 버튼을 가로형으로 놓느냐, 세로 박스 형으로 놓느냐 정도의 옵션만 챙겨보면 됩니다.
아래 카운트 값에서 horizontal 이 기본 가로형, vertical 버튼이 세로형 버튼입니다.
아래 소스가 트위터 공식 버튼, 가로형 소스 입니다. 아래 소스 그대로 사이트나 블로그에 복사해서 스킨의 원하는 위치에 붙여넣기 하시면 자동으로 URL과 게시물 제목을 읽어들여 트윗을 해줍니다. 소스중에 'Tweet' 글자를 '트윗하기'로 바꾸셔도 됩니다.
아래 소스는 세로형 트윗 버튼 소스 입니다. 위 소스와 다른점은 data-count="vertical" 가 추가된 점입니다.
위 소스들이 복사가 안되신다면 아래 소스 txt 파일을 열어보시고 트위터 버튼이 들어갈 스킨 위치에 붙여넣기 하세요.
예전에 블로그에 SNS 공유 버튼 달기, 트위터 리트윗 버튼 다는 방법에 대해 포스팅했던 적이 있습니다.
아래 스크린샷처럼 소스 공개를 했었는데 1~2년이 지나고 나니 바뀌기도 많이 바뀌었고 트위터나 페이스북 자체의 공식 트윗 버튼과 좋아요 버튼도 소스가 많이 바뀌었네요.
예전에는 트위터 공식 버튼을 안쓰고 트윗미미(Tweet meme) 라는 외국 사이트의 트윗 버튼을 가져다 썼었는데 속도가 좀 느리고 공식 트위터 버튼과 생김새가 달라 거부감이 있던것도 사실입니다.
이 포스트에서처럼 이 블로그 스킨에는 게시물 상단과 하단에 SNS 공유 버튼들을 달아놨습니다.
상단에는 가로형, 하단에는 세로 박스형의 버튼들을 달아놨습니다. 사실 위나 아래 한군대에만 달면 블로그 로딩속도가 좀 더 빨라질 수 있는데 그냥... 위 아래 둘 다 달아놨네요.
트위터 버튼을 클릭하게 되면 아래 화면처럼 해당 게시물을 공유하도록 트위터를 할 수 있는 창이 나타납니다.
먼저 브라우저 상에서 트위터에 로그인이 안되어있다면 로그인 하면 되고 그 후에 트윗할 내용을 수정한 후 트윗하기 버튼을 누르면 팔로워들에게 해당 내용이 타임라인에 보내지게 됩니다. 그리고 아래 URL 주소는 트위터 공식 Short URL 도메인인 t.co 라는 단축 주소로 나가게 됩니다.
트위터 버튼을 다는 방법은 간단합니다. 예전과는 많이 달라졌지요. 훨씬 쉽고 간편하게 할 수 있습니다.
트위터 공식 홈페이지에 접속해서 개발자 페이지에 들어가면 웹사이트와 트위터 관련 플러그인들을 설치할 수 있는 도구와 문서를 마련해 놓았습니다.
트위터 개발자 사이트 : https://dev.twitter.com/docs/twitter-for-websites
개발자 사이트에서 Create a button for your website 링크를 클릭합니다.
하단과 같이 링크 공유하기 버튼, 팔로우 하기 버튼, 해시태그, 멘션 버튼등을 만들 수 있습니다.
그중에 링크 공유하기 버튼을 클릭.
트위터 트윗 버튼 설정을 할 수 있는 창이 나옵니다.
예전 트위터 버튼들은 URL 공유 및 트윗 문구, 출처 등을 일일이 소스 수정해서 바꿔줘야했지만 새로운 공식 트위터 버튼은 자동으로 해당 페이지와 게시물의 url 과 제목을 인식하여 보여주게 됩니다.
갯수 보이기는 리트윗된 횟수, 즉 트위터로 트윗된 횟수를 버튼에 표시해주는 기능입니다.
출처는 해당 게시물이나 페이지의 주인, 사이트 운영자 등의 트위터 계정을 트윗에 표시해주는 기능입니다.
추천이나 해시태그 역시 기본적으로 트윗상에 보여주게 되는데 수정이 가능합니다. 공백으로 놔둬도 됩니다.
만약 본인이 스포츠나 스포츠 뉴스 사이트의 글을 리트윗 했었다면 트위터 사이트에서 자신과 비슷한 취향의 글들을 공유했던 사람들을 팔로우 추천해주는 기능입니다. 즉, 같은 관심사를 가진 사람을 트위터가 인식하여 팔로우 할 수 있게 추천을 해주는 기능입니다. 해당 기능은 꺼도 되고 그냥 놔둬도 됩니다.
아래는 트위터 버튼의 세부 설정 사항입니다. 위에서 옵션과 기능을 모두 설정하면 우측에 미리보기 및 해당 트위터 버튼 소스를 보여주게 되는게 그 소스에서 조금씩 수정하면 좀 더 세밀한 설정이 가능합니다.
트위터 기본 공식 트윗 버튼의 소스에서 따로 설정해줄건 별로 없습니다.
다만 트위터 트윗 버튼을 가로형으로 놓느냐, 세로 박스 형으로 놓느냐 정도의 옵션만 챙겨보면 됩니다.
아래 카운트 값에서 horizontal 이 기본 가로형, vertical 버튼이 세로형 버튼입니다.
아래 소스가 트위터 공식 버튼, 가로형 소스 입니다. 아래 소스 그대로 사이트나 블로그에 복사해서 스킨의 원하는 위치에 붙여넣기 하시면 자동으로 URL과 게시물 제목을 읽어들여 트윗을 해줍니다. 소스중에 'Tweet' 글자를 '트윗하기'로 바꾸셔도 됩니다.
<a href="https://twitter.com/share" class="twitter-share-button" data-dnt="true">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
아래 소스는 세로형 트윗 버튼 소스 입니다. 위 소스와 다른점은 data-count="vertical" 가 추가된 점입니다.
<a href="https://twitter.com/share" class="twitter-share-button" data-dnt="true" data-count="vertical">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
위 소스들이 복사가 안되신다면 아래 소스 txt 파일을 열어보시고 트위터 버튼이 들어갈 스킨 위치에 붙여넣기 하세요.
공식 트위터 트윗버튼 소스 .txt