2011/12/20

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

このエントリーをはてなブックマークに追加
ブロガー必見だよ!

この記事の最新版を書き起こしました

新記事はコチラ→http://ideahacker.net/2012/01/10/753/

このページを見てる人に説明は不要かと思いますが、ツイートボタンっていうのはコレです。


簡単にリンクを共有することが出来るボタンですね。
今では個人ブログから企業の公式HPまで、様々な場所で見かけるようになりました。
今回はこのツイートボタンの設置方法・カスタマイズの参考になる情報をまとめます。

ツイートボタンの設置方法


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

1,Twitterの公式サイトにGO

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

2,ツイートボタンを選択し、必要な情報を打ち込んでいきます。

3,生成されたHTMLコードをコピーして、ブログ・HPなどに貼り付けます。

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

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


<a href="https://twitter.com/share" class="twitter-share-button"
data-url="共有されるURL"
data-text="ツイート本文"
data-via="ユーザー名"
data-lang="言語"
data-size="ボタンの大きさ"
data-related="関連アカウント"
data-count="ツイート数のカウントの有無"
data-hashtags="ハッシュタグ">
Scriptが読み込まれなかった場合に表示される文字</a>

<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="//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

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


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

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

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

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

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



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

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



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

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

ここでちょっと豆知識
HTMLコードを生成したら必ず付いてくる<script>!function......</script>というコードですが、これはHTML構文内に1回だけ書けばOKです。
つまり、1つのページに複数のツイートボタンを設置する場合…
<body>
...
<a href="https://twitter.com/share" class="twitter-share-button" data-via="Leoroid64" data-lang="ja">Tweet</a>
<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="//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-via="Leoroid64" data-lang="ja">Tweet</a>
<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="//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-via="Leoroid64" data-lang="ja">Tweet</a>
<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="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
...
</body>
↑こんな記述をするのは無駄で、以下のようにスマートに書くことが出来ます。
<body>
...
<a href="https://twitter.com/share" class="twitter-share-button" data-via="Leoroid64" data-lang="ja">Tweet</a>
...
<a href="https://twitter.com/share" class="twitter-share-button" data-via="Leoroid64" data-lang="ja">Tweet</a>
...
<a href="https://twitter.com/share" class="twitter-share-button" data-via="Leoroid64" data-lang="ja">Tweet</a>
...
<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="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</body>
このように、JavaScriptのコードは</body>タグの直前に1回だけ記述しましょう。
こうすることでHTMLの構造がスマートになるだけではなく、JavaScriptの無駄な読み込みを抑えてページ表示速度も改善されます。

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


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

<a href="http://twitter.com/share
?url=共有したいURL
&text=ツイート内に含める文字
&via=ツイート内に含まれるユーザー名
&related=関連アカウント">
<img
src="使いたい画像のURL"
alt="Scriptが読み込まれなかった場合に表示される文字" /></a>

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

<a href="http://twitter.com/share?url=共有したいURL&text=ツイート内に含める文字&via=ツイート内に含まれるユーザー名&related=関連アカウント"><img src="使いたい画像のURL" alt="Scriptが読み込まれなかった場合に表示される文字" /></a>

ややこしいですねぇ。

とりあえず作ってみた

最後に


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