新ツイートボタンの設置＆カスタマイズ方法まとめ

個人ブログや企業の公式HPなど、今や世界中のWebサイトに設置されているツイートボタンですが、色々とカスタマイズしようとすると結構難しいものです。
ツイートボタンの各種パラメータなどの情報をまとめたので、参考にどうぞ。

簡単にリンクを共有することが出来るボタンですね。

設置方法

まずは設置の流れを簡単に説明します。

１，Twitterの公式サイトにGO

ボタン作成：https://twitter.com/about/resources/buttons

２，ツイートボタンを選択し、必要な情報を打ち込んでいきます。
３，生成されたHTMLコードをコピーして、ブログ・HPなどに貼り付けます。

…と、ただ設置するだけなら非常に簡単です。

しかし「ボタンにオリジナルの画像を使いたい」とか「ツイート内の本文をカスタマイズしたい」となると、少しだけ知識が必要になってきます。
それでは次に、ツイートボタンのパラメータを見てみましょう。

ツイートボタンの各種パラメータ

これがツイートボタンの中身です。
こう見ると複雑そうですが、書き換える部分は赤字のところだけなので安心して下さい。

data-url="〇〇〇〇"
ここに入力したURLが共有されます
（省略した場合はそのページのURLに）

data-text="〇〇〇〇"
ここに入力した文字がツイート本文に挿入されます
（省略した場合はそのページのタイトルに）

data-via="〇〇〇〇"
ここに入力したユーザー名がツイート本文に挿入されます
フォーマット：「@〇〇〇〇さんから」
（省略可）

data-lang="〇〇"
言語設定です
基本的に「ja」でいいでしょう

data-size="〇〇〇〇"
ボタンのサイズ設定です
省略した場合は普通のサイズに、data-size="large"にした場合は大きなボタンになります
Tweet
Tweet

data-related="〇〇〇〇"
ツイートボタンを押して、ツイートが完了した後に表示（宣伝？）されるユーザー名を入力します
あなたがオススメしたいユーザーを入力しましょう
（省略可）

data-count="〇〇〇〇"
ツイートボタンの横に「共有された回数を表示するか」という設定です
省略した場合はカウントが表示され、data-count="none"にした場合は表示されません
Tweet
Tweet

data-hashtag="〇〇〇〇"
ここに入力した文字がハッシュタグとして本文に挿入されます
（省略可）

「Scriptが読み込まれなかった場合に表示される文字」とは？
ツイートボタンの装飾や共有回数の表示はJavaScriptで制御されています。
JavaScriptをオフにしているユーザーにはここに書いてある文字のみが表示されるので「ツイート」とか「Tweet」にしておきましょう。

ここでちょっと豆知識

HTMLコードを生成したら必ず付いてくる<script>!function......</script>というコードですが、これはHTML構文内に1回だけ書けばOKです。
つまり、1つのページに複数のツイートボタンを設置する場合…

↑こんな記述をするのは無駄で、以下のようにスマートに書くことが出来ます。

このように、JavaScriptのコードは</body>タグの直前に1回だけ記述しましょう。
こうすることでHTMLの構造がスマートになるだけではなく、JavaScriptの無駄な読み込みを抑えてページ表示速度も改善されます。

ツイートボタンにオリジナルの画像を使う方法

オリジナルの画像を使いたい場合、少し記述が分かりにくくなります。
…といっても、そこまで難しくはないので安心して下さい。

分かりやすく書くとこんな感じです。
上記のコードを一行で書いた場合は下記のようになります。

ややこしいですねぇ。

とりあえず作ってみた

最後に

各種パラメータの意味さえ知っていればPHPやJavaScriptを使って色々と遊べそうですが、「言語？分かんね」って人にはどーでもいい記事ですねコレ。お疲れ様です。

ツイート