트위터 공유 버튼 만들기

트위터 공유 버튼을 통해 텍스트, 해쉬태그, URL, 트위터 계정을 미리 작성할 수 있습니다.

트위터 계정을 연결 하려면 트위터에서 팔로우 되어 있어야 합니다.

트위터 Content 파라메터

버튼 디스플레이 파라메터

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>

어떤걸 써도 공유하기 기능은 할 수 있습니다.

디자인은 자유도 높게 바꿀 수 있습니다.