Twitter 公式ツイートボタンの設置、仕様

更新：

公式ボタンはツイート数が表示されなくなったが、その後も提供されていて、以下の手順で公式ボタンのコードを取得できる。

  1. https://publish.twitter.com/ にアクセスし、「Twitter Buttons」をクリックする。
  2. 「Share Button」をクリックする。
  3. 表示されたテキストボックスまたは「Copy Code」をクリックするとツイートボタンのコードをコピーできる。

ボタンをカスタマイズしたい場合は「set customization options」のリンクをクリックする。 ここで予め埋め込みたいテキスト、URL、ユーザー名、ハッシュタグを指定できる。 「Large Button」のチェックをオンにすると少し大きいボタンが使える。 設定後、「Update」ボタンをクリックしてもとの画面に戻り、コードをコピーする。 詳しい仕様に関しては Tweet Button — Twitter Developers に書いてある。

旧仕様

昔は公式のツイートボタンが提供されていなかったので自作していたが、のちに公式のものが提供された。 以下のオプションが使えたが、その後仕様が変わり、現在上述のものしか提供されていない。

  • Share URL
    ツイート時に埋め込むURL。Use the page URL は ボタンを設置したページのURLを自動で埋め込む。
  • Tweet text
    ツイート時に埋め込むテキスト。Use the title of the page は ボタンを設置したページのタイトルを自動で埋め込む。
  • Show count
    ツイート数を表示。
  • Via
    ユーザー名を指定する。＠＊＊＊さんから と表示される。
  • Recommend
    推奨アカウントを指定する。
  • Hashtag
    ハッシュタグを指定する。ハッシュタグが埋め込まれる。
  • Large button
    ボタンを大きくする。
  • Opt-out of tailoring Twitter
    カスタマイズされたおすすめユーザーの選択。
  • Language
    言語を設定する。英語の場合ツイートボタンには「Tweet」、日本語の場合は「ツイート」と表示される。

すべての項目を設定する必要はなく、必要な項目だけ設定する。 ［Preview and code］にあるHTMLコードをサイトのHTMLソースに貼り付けるとツイートボタンが表示される。

さらにHTMLコードのAタグの属性に以下のオプションが使えた。

  • data-url
    上記（生成ページ） Share URL に相当。
  • data-text
    上記 Tweet text に相当。
  • data-count
    上記 Show count に相当。 生成ページでは数字の有無しか選べないが、data-count="vertical" とするとボタンの上に数字が表示される。 none（数字非表示）、horizontal（数字を横に表示）、vertical（数字を上に表示）がある。 昔は生成ページで vertical も選べた。
  • data-via
    上記 Via に相当。
  • data-related
    上記 Recommend に相当。
  • data-hashtags
    上記 Hashtag に相当。
  • data-size
    上記 Large button に相当。 medium（デフォルト） と large のみある。 data-size="large" で大きいボタンになる。 large は、data-count が none または horizontal の場合に指定可能。
  • data-dnt
    上記 Opt-out of tailoring Twitter に相当。
  • data-lang
    上記 Language に相当。

手動でツイートリンクを記述する

昔は公式のツイートボタンがなくて自作していた。 その後、公式ボタンが提供されたので、これで良いだろうと思っていたが、1つ気になる点が出てきた。 ツイッターに限ったことではないが、公式ボタンをクリックした後ポップアップするウィンドウが広告に被る場合がある。 それがグーグルにどのように評価されるか分からないが、気になる人は自分でボタンを作ると良いかもしれない。

ボタンを自作する場合は自分でリンクを記述する必要がある。

現仕様

リンクは https://twitter.com/intent/tweet の後にツイートしたいパラメータを記述する。 例えば以下のようになる。 

https://twitter.com/intent/tweet?text=%E3%83%86%E3%82%B9%E3%83%88&url=http%3A%2F%2Fexample.com%2F&hashtags=example%2ctest

引数には以下のようなものがある。

  • text
    ツイートするテキストを埋め込める。
  • url
    text の中に URL を埋め込んでも良いが、別途指定すると text の後に URL が追加される。 また url は http または https で始まっていないと反映されない。
  • hashtags
    ハッシュタグを指定できる。 ツイートした際は text、url の後に追加される。 #（シャープマーク）は書かなくても自動的に追加される。 複数のハッシュタグを記述する場合は半角カンマで区切る。
  • original_referer
    リファラの指定。 基本的に url と同じものを書く。

引数は UTF-8 でURLエンコードする。

表示例
ツイート

また、リンクを張る際、ページのURLやタイトルをページごとに書くのは面倒なので、JavaScript などを使用してリンクを自動生成すると良い。 引数の文字列に日本語が含まれ、文字コードが SJIS や EUC などの場合は UTF-8 にエンコードする。 

<a id="sns_twitter" target="_blank" href="https://twitter.com/intent/tweet?text=" rel="nofollow noopener"><img src="/data/img/twitter_logo_maru_50.png" width="50" height="50" srcset="/data/img/twitter_logo_maru_100.png 2x" alt="ツイート" /></a>

<script>
//Twitterリンク生成
window.addEventListener('DOMContentLoaded', function(){
    var text = encodeURIComponent(document.title);
    var url = encodeURIComponent(location.href);
    var href = 'https://twitter.com/intent/tweet?text=' + text + '&url=' + url;
    document.getElementById('sns_twitter').setAttribute('href', href);
}, false);
</script>

この例では script を直接書いたが、外部ファイルにして読み込ませた方が良い。

旧仕様

リンクは https://twitter.com/intent/tweet?source=webclient&text= というURLの後に UTF-8 でURLエンコードした文字列を自分のサイトに合わせて書く。 例えば以下のようになる。 

https://twitter.com/intent/tweet?source=webclient&text=%E3%83%86%E3%82%B9%E3%83%88+http%3A%2F%2Fexample.com%2F

この例では「テスト http://example.com/」という文字列をURLエンコードしている。 このリンクをクリックして Twitter にログインすると、ツイート入力欄に予めこの文字列が挿入される。 ここに書く文字列としては、ページのタイトルとURLを合わせたものがよく使われる。

さらに古い仕様では、URL が http://twitter.com/home?status= だった。 この場合、status= の後に UTF-8 でURLエンコードした文字列を自分のサイトに合わせて書いていた。

ツイートの確認

該当のURLがどれくらいツイートされているかはTwitterで検索できるが、そのURLは以下のようになっている。

話題のツイート
https://twitter.com/search?vertical=default&q=example.com&src=typd

すべてのツイート
https://twitter.com/search?f=tweets&vertical=default&q=example.com&src=typd

q= のところに自分のドメインやURLを入れる。これらのURLにリンクを張れば、昔のツイートボタンのようにバズられ具合がわかる。 .net のドメインは相変わらず引っかからないようだが、たいていのドメインは見られる。

公式ロゴ画像

ツイートボタンを自作する場合、テキストでリンクを張っても良いが、公式ロゴ画像を使った方が見た目が良い。 ロゴの使い方やダウンロードは公式サイトの Twitterについて | Twitterロゴ、ブランドガイドライン、ツイートツール にある。 ロゴのほかソーシャルアイコンでは丸、四角、角丸四角で囲まれた画像があらかじめ用意されている。 zipファイルをダウンロードして展開すると、EPS、PNG、PSD、SVG 形式のファイルが入っているので必要なものを使う。

このエントリーをはてなブックマークに追加