アイデアハッカー

ページの先頭へ

トップに戻る

2014年2月15日 Web制作

【2014】Twitterのツイートボタンを設置＆カスタマイズする方法

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

Twitter Buttons

前は日本語のページだったんですが、気付いたら英語のページのみになっていました…
それでは、順番に解説していきます。

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です。

それでは生成されるコードを分解して見てみましょう。

1

2

3

4

5

6

7

8

9

10

11

12

<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>

これで基本的な説明は終わりです。あとは右側に表示されたコードをブログなりHPなりに設置するだけでOK！

カウント数を上に表示したい

ツイート数のカウントがポップアップ風に表示されているボタンをよく見ますが、なぜか公式だと作れない不思議。
作り方は簡単で、コード内の「data-count」を書き換えるだけです。

data-count="vertical"

ただ、ボタンサイズをラージ（data-size="large"）にしていると表示されないので注意！

オリジナルの画像を使いたい

ちょっとめんどくさいですが、自前で用意した画像を使うことも可能です。
試しに作ってみたのがコチラ。

記述が少し変わるので、間違えないように注意！

1

2

3

</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>

以上、ツイートボタンの設置＆カスタマイズ方法でした。