サイトのトップへ戻る

Twitter 開発者 ドキュメント日本語訳

サイト内検索

ツイートボタン

ツイートボタンは、閲覧者がTwitter上であなたのコンテンツを簡単に拡散できるようにするため、ウェブサイトに表示する小さなボタンです。 ツイートボタンは二つのパーツで構成されています:Twitter.comのツイート書き込みボックスへのリンク と、 Twitter公式の見栄えになるようリンクを補強して即座にツイートボタンだと分かるようにするためのTwitterウィジット JavaScriptです。

ツイートボタンジェネレータ を使うと、画面フォーム上から操作して簡単にHTMLマークアップを生成し、あなたのウェブサイトのテンプレートにコピーペーストできます。

あなたは iOS や Android のアプリケーションを開発していますか? iOSAndroid用のTwitterキットを使用して、あなたのアプリケーションにツイート書き込みボックスを追加してください。



ツイート作成の流れ

ツイートボタンを選ぶと、あなたがボタンのマークアップに定義したり、ページから抽出した値が事前に入力されたツイート書き込みボックスが、小ウィンドウで新規にポップアップ表示されます。

Screenshot of a Twitter composer pre-populated with web intent values

Twitter では、ツイート主がツイートの投稿に成功した後にアカウントへのフォローを勧めることがあります。 ここで表示されるアカウントは ウェブインテントの viaパラメータとrelatedパラメータによって決められます。

Screenshot of a Tweet web intent confirmation page with related account follow suggestions

ツイートが公開された後、あなたのウェブページでは tweet イベント が発生します。 ツイートの最終的内容についての情報は、親ウェブページには渡されません。



ツイートボタンをあなたのウェブサイトに追加する方法

1.TwitterのウィジットJavaScript がエレメントを見つけてツイートボタンへのリンクを補強できるようにするため、twitter-share-button クラスの付いたa(アンカー)エレメントを新たに作成します。Twitter ウェブインテントのツイート書き込みボックスへのリンクを作成するには、href属性に https://twitter.com/intent/tweetの値を設定します。

<a class="twitter-share-button"
  href="https://twitter.com/intent/tweet">
Tweet</a>

2. ツイート用のウェブインテントのクエリパラメータをカスタマイズすることで、ツイート文を事前に入力したり、関連するアカウントをお勧めしたりします。

<a class="twitter-share-button"
  href="https://twitter.com/intent/tweet?text=Hello%20world">
Tweet</a>

3. data-* 属性を使ってツイートボタンのパラメータをカスタマイズします。

<a class="twitter-share-button"
  href="https://twitter.com/intent/tweet?text=Hello%20world"
  data-size="large">
Tweet</a>

4. 読み込み用のコードを使って、非同期にTwitterのウィジットJavaScriptを読み込みます。 このJavaScript コードでは、現在のページに実装された既存の TwitterのウェブウィジットJavaScriptのバージョンを確認し、 ウィジットJavaScript が読み込まれた後にファンクションキューを初期化して実行し、TwitterのCDNから ウィジットJavaScript を非同期に読み込みます。



ツイートテキストコンポーネント

text

textパラメータに設定した値は、ツイート書き込みボックスに選択状態で表示されます。ツイートのつぶやき主は一回の削除操作でその文を簡単に削除できます。

text パラメータを明示的に設定していない場合、ウェブページの <title>エレメントが自動的に埋め込まれることがあります。

url

The url パラメータには、Twitter上で拡散するHTTPやHTTPS のURL絶対パスが含まれます。 拡散する URL は、公開ツイート上では Twitter’s t.co serviceで短縮化されます。 拡散するURL用に Twitter Card を表示することができます。

url パラメータを明示的に設定していない場合、ウェブページのcanonical link element (<link rel="canonical">)やlocation.hrefが自動的に埋め込まれることがあります。

<link rel="canonical"
  href="https://dev.twitter.com/web/tweet-button">

拡散するURLがあなたのページのcanonical representationと異なる場合は、data-counturl属性を設定してください。

hashtags

hashtags パラメータを使用して、ツイートへ付ける hashtags のコンマ区切り一覧を追加します。各ハッシュタグからは、前に付ける “#” は省いてください。; ツイート書き込みボックスが自動的に言語ごとに適切にスペース区切りしたハッシュタグを追加します。

via

via パラメータを使用して、Twitter ユーザー名にツイート主であることを表す属性を付けます。 この属性は、” @username さんから”という形でツイート主の言語に翻訳され、ツイート内に表示されます。

A via パラメータは、 me のrelトークンが付いてTwitter プロフィールページにリンクされているlink エレメントやa(アンカー)エレメントが自動的に埋め込まれることがあります。

<link rel="me"
  href="https://twitter.com/twitterdev"
>


ボタンのカスタマイズ

ツイート数

ツイートボタンには、ツイート内でURLが拡散された回数のカウントが表示されます。 You may wish to set a separate count URL from the URL to be shared using the counturl data attribute.

<a class="twitter-share-button"
  href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fdev.twitter.com%2Fweb%2Ftweet-button%3Fsrc%3Dtwitter"
  data-counturl="https://dev.twitter.com/web/tweet-button">
Tweet</a>

既定では、ツイートカウントはツイートボタンの右に表示されます (右から左へ表記する言語の場合は左に表示されます)。 ツイートカウントを非表示にする場合はdata-countnoneの値を設定し、ボタンの上にカウントを表示したい場合はverticalを設定します。

data-count の値 結果
horizontal
vertical
none

注意:カウントが正しく増加しないように見える場合は、このツイートボタン FAQ のエントリーで説明されているように、あなたのサーバがHTTP HEADリクエストをサポートしているか確認してください。

サイズ

大き目のツイートボタンを表示するには、 data-size 属性に largeの値を追加します。

data-size result
default
large



エンジェル戦記