
なんか2年前も同じような記事を書いた気がするんですが、色々と仕様が変わっているかもしれないので新しく書き起こしました。
とりあえず公式のツイートボタン作成画面を見てみましょう。

前は日本語のページだったんですが、気付いたら英語のページのみになっていました…
それでは、順番に解説していきます。
Button options
Share URL(共有するURL)
Use the page URL | 設置したページのURLを共有 |
自分で入力 | 指定したURLを共有 |
Tweet text(ツイート内に含むテキスト)
Use the title of the page | 設置したページのタイトルがツイート内に含まれる |
自分で入力 | 入力したテキストがツイート内に含まれる |
Show count
ツイートされた数を表示する場合はチェック。
Via
ツイート内に含むユーザー名(@○○○○)
省略可
Recommend
ツイート後に表示されるユーザー名(@○○○○)
おすすめユーザーみたいな感じで表示されます。
省略可
Hashtag
ツイート内に含むハッシュタグ(#○○○○)
省略可
Large button
大きなボタンを使用する場合はチェック。
Opt-out of tailoring Twitter
不明。そのままで問題なし。
Language
使用する言語。JapaneseにしとけばOKです。
それでは生成されるコードを分解して見てみましょう。
|
<a href="https://twitter.com/share" class="twitter-share-button" data-url="共有するURL(省略するとそのページのURLを共有)" data-text="ツイート内テキスト(省略するとそのページのタイトルが含まれる)" data-via="ツイート内に含むユーザー名(省略可)" data-lang="ja(言語)" data-count="none(カウントの非表示(省略するとカウントを表示))" data-size="large(大きいボタンを使用(省略すると普通のサイズに))" data-related="ツイート後に表示されるユーザー(省略可)" data-hashtags="ツイート内に含まれるハッシュタグ(省略可)"> ツイート</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> |
これで基本的な説明は終わりです。あとは右側に表示されたコードをブログなりHPなりに設置するだけでOK!
カウント数を上に表示したい
ツイート数のカウントがポップアップ風に表示されているボタンをよく見ますが、なぜか公式だと作れない不思議。
作り方は簡単で、コード内の「data-count」を書き換えるだけです。
data-count="vertical"
ただ、ボタンサイズをラージ(data-size="large")にしていると表示されないので注意!
オリジナルの画像を使いたい
ちょっとめんどくさいですが、自前で用意した画像を使うことも可能です。
試しに作ってみたのがコチラ。
記述が少し変わるので、間違えないように注意!
|
<a href="http://twitter.com/share?url=共有したいURL&text=ツイート内テキスト&via=ツイート内に含むユーザー名&related=ツイート後に表示されるユーザー&hashtags=ツイート内に含まれるハッシュタグ"> <img src="使いたい画像のURL" alt="画像が表示されない場合に表示される文字" /> </a> |
このように「&」で繋げて各種パラメータを設定すれば、画像をツイートボタンと同じ挙動にすることが出来ます。
最後に
コードを生成すると付いてくるJavaScriptのコードですが、このコードはHTML内に1つあれば大丈夫です。無駄なコードはページの読み込み速度に悪影響を与えるので、2つ目以降は必ず削除するように。
出来れば</body>の直前に記述し、コンテンツの読み込み後にスクリプトがロードされるようにしましょう。
例
・
・
・
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</body>
</html>
以上、ツイートボタンの設置&カスタマイズ方法でした。
関連するかもしれない記事