公式ボタンはツイート数が表示されなくなったが、その後も提供されていて、以下の手順で公式ボタンのコードを取得できる。
ボタンをカスタマイズしたい場合は「set customization options」のリンクをクリックする。 ここで予め埋め込みたいテキスト、URL、ユーザー名、ハッシュタグを指定できる。 「Large Button」のチェックをオンにすると少し大きいボタンが使える。 設定後、「Update」ボタンをクリックしてもとの画面に戻り、コードをコピーする。 詳しい仕様に関しては Tweet Button — Twitter Developers に書いてある。
昔は公式のツイートボタンが提供されていなかったので自作していたが、のちに公式のものが提供された。 以下のオプションが使えたが、その後仕様が変わり、現在上述のものしか提供されていない。
すべての項目を設定する必要はなく、必要な項目だけ設定する。 [Preview and code]にあるHTMLコードをサイトのHTMLソースに貼り付けるとツイートボタンが表示される。
さらにHTMLコードのAタグの属性に以下のオプションが使えた。
昔は公式のツイートボタンがなくて自作していた。 その後、公式ボタンが提供されたので、これで良いだろうと思っていたが、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
引数には以下のようなものがある。
引数は 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 形式のファイルが入っているので必要なものを使う。