Tweet Button（ツイートボタン）はオフィシャルのデベロッパーサイトで提供されているので、簡単に自分のサイトに追加することができます。ただ、ここで提供されているコードを利用するとボタンのデザインも自動的に行われて、変更することができません。
ボタンデザインをオリジナルにしたい場合はオフィシャルのコードを使わず、簡単なリンク設定でデザインをカスタマイズすることもできます。
オフィシャルコードを利用する
Twitterのツイートボタンはオフィシャルのデベロッパーサイトにてコードが提供されています。
コードはリンクを設定するアンカー部分と、スクリプト部分の２か所あります。
アンカー要素
アンカー要素はdata-urlやdata-textに必要な値を設定し、ボタンごとに用意します。
<a href="https://twitter.com/share" class="twitter-share-button" data-url="シェアしたいURL" data-text="シェアしたいURLの説明" data-via="ユーザー名" data-lang="言語" data-size="ボタンの大きさ" data-related="関連アカウント" data-count="ツイート数の表示形式" data-hashtags="ハッシュタグ"> JavaScriptがオフの環境用の文字列</a>
アンカー要素の各属性の説明
Tweet用属性の値はエンコードする必要がありませんが、ダブルクォーテーション( " )や < 、 > などは使えません。必要な際はURLエンコードしてください。
- data-url
- シェアしたいURLを指定します
省略した場合はカレントページのURLになります。 - data-text
- ツイート本文に挿入したいテキストを指定します。
省略した場合はカレントページのページタイトルになります。 - data-via
- ツイート本文に追加したいアカウント名を指定します。
日本語のフォーマット：「@〇〇〇さんから」
省略した場合は何も追加されません。 - data-lang
- 言語を指定します。
日本語は「ja」です。省略した場合は英語になります。 - data-size
- ボタンのサイズを指定します。
省略した場合は普通サイズ、large を指定すると大きなボタンになります。 - data-count
- ツイートボタンの横にシェアされた回数をどのように表示するか設定できます。
垂直方向にカウント数を表示：vertical
水平方向にカウント数を表示：horizontal
カウント数の表示なし：none
省略した場合はhorizontal - data-related
- ツイート完了後に、ここで指定したアカウントのフォローボタンを表示させることができます。
アカウント名の後にコロンでつけることで、説明文を表示することも可能です。
アカウント名:説明文
省略可能です。 - data-hashtag
- ハッシュタグを指定します。
省略可能です。 - JavaScriptがオフの環境用の文字列
- ユーザがJavaScriptをオフにしている場合はTweet Buttonが機能しませんが、代わりにここに記載した文字列が表示されます。
スクリプト要素
SCRIPT要素は1ページ1コードあればよく、Tweet Button毎に用意する必要はありません。カスタマイズの必要もないので、下記コードをそのままHEAD要素などに追加します。
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
ボタン設置例
ツイートボタンを設置する際の簡単な例です。
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://rfs.jp/" data-text="smart 開発者向けサイト" data-via="rfs_jp" data-lang="ja" data-count="none" data-hashtags="smart">Tweet Button</a>
ツイートボタンのデザインをカスタマイズする方法
アンカーのHREF属性にhttp://twitter.com/shareと、クエリ文字列を指定します。基本的にはオフィシャルウィジェット用と同じで、data-のプレフィクスを取った名前で指定できます。
<a href="http://twitter.com/share ?url=シェアしたいURL &text=シェアしたいURLの説明 &via=ユーザー名 &related=関連アカウント"> ...</a>
クエリ文字列はURLエンコードする必要があります。
ボタンのデザインはアンカータグ内に画像を指定したり、アンカータグにクラス名やID名をつければCSSで指定できます。
例
<a href="http://twitter.com/share?url=http%3A%2F%2Fexample.jp%2F&via=account_name">ツイート</a>
クエリ文字列は全て省略可能で、シンプルに下記のようにしても動作します。
<a href="http://twitter.com/share">ツイート</a>