트위터 공유 버튼 만들기
트위터 공유 버튼을 통해 텍스트, 해쉬태그, URL, 트위터 계정을 미리 작성할 수 있습니다.
트위터 계정을 연결 하려면 트위터에서 팔로우 되어 있어야 합니다.
트위터 Content 파라메터
파라메터 | 설명 |
text |
트윗을 작성하기 전에 미리 텍스트를 작성합니다. |
url |
트윗에 URL을 연결합니다. |
hashtags |
트윗에 해쉬태그를 기본으로 등록 합니다. |
via |
특정 트윗 계정을 언급합니다. (댓글과 비슷합니다.) |
related |
공유 URL의 컨텐츠와 관련 계정을 쉼표로 구분하여 넣습니다. |
버튼 디스플레이 파라메터
파라메터 | 설명 |
size |
large로 셋팅하면 큰 버튼을 볼 수 있습니다. |
lang |
트위터가 지원하는 언어코드를 적습니다. |
HTML의 data-* 어트리뷰트를 이용한 예제
<a class="twitter-share-button" href="https://twitter.com/share" data-size="large" data-text="custom share text" data-url="https://dev.twitter.com/web/tweet-button" data-hashtags="example,demo" data-via="twitterdev" data-related="twitterapi,twitter"> Tweet </a>
IFRAME 예제
<iframe src="https://platform.twitter.com/widgets/tweet_button.html? size=l& url=https%3A%2F%2Fdev.twitter.com%2Fweb%2Ftweet-button& via=twitterdev& related=twitterapi%2Ctwitter& text=custom%20share%20text&hashtags=example%2Cdemo" width="140" height="28" title="Twitter Tweet Button" style="border: 0; overflow: hidden;"> </iframe>
자바스크립트 Factory 예제
twttr.widgets.createShareButton( "https:\/\/dev.twitter.com\/web\/tweet-button", document.getElementById("tweet-container"), { size: "large", text: "custom share text", hashtags: "example,demo", via: "twitterdev", related: "twitterapi,twitter" } );
HTML 예제
<a href="https://twitter.com/share? url=https%3A%2F%2Fdev.twitter.com%2Fweb%2Ftweet-button& via=twitterdev& related=twitterapi%2Ctwitter& hashtags=example%2Cdemo& text=custom%20share%20text"> Tweet </a>
어떤걸 써도 공유하기 기능은 할 수 있습니다.
디자인은 자유도 높게 바꿀 수 있습니다.
'인터넷 기술' 카테고리의 다른 글
테스트 장비에 도메인 설정하기(hosts파일 적용) (0) | 2017.12.02 |
---|---|
[우분투] 명령어 몇가지 (0) | 2017.11.30 |
트위터 주소 등록시 미리보기에 대해... (0) | 2017.11.19 |
엑셀에서 줄바꿈 문자열 치환하기 (0) | 2017.11.17 |
페이스북에 주소 등록시 미리보기 이미지에 대해... (0) | 2017.11.16 |