ウェブサイトにFacebookのいいね！ボタンやTwitterのツイートボタンを設置することって多いと思います。
以前も記事にしましたが正しく設定されていないケースが非常に多いです。
これ、原因の一つがコピペだと思うんですよね。過去に作ったWebページのソーシャルボタンの記述をそのまま持ってきてるような。
もしくは、例えば作成マニュアル的なものを頑張って作成して、ずっとそれを参照してる、とか。
いずれもやめたほうがいいです。しょっちゅう仕様も変わるし、公式にコードを発行してくれるページがあるんだから、そちらを使いましょう。
ということで、Facebookのいいね！ボタンとTwitterのツイートボタン、それぞれ細かい仕様をまとめてみたいと思います。
この記事は、Twitterのツイートボタン編です。Facebookのいいね！ボタン編はこちら。
Twitter / Twitterボタン
※ツイートボタンの作成ページTweet Button | Twitter Developers
※ツイートボタンの仕様ドキュメント
↑のページからボタンの作成は可能です。
さらに、仕様のページも参照することでカスタマイズも可能です。
Facebookとは違い、ドキュメントをしっかりと読めば、オリジナルデザインのツイートボタンの作成も可能になっています。
仕様ドキュメントの方を詳細に解説するのは面倒なんで、そこまで興味のある方は英語ですがご自身でどうぞ。
なお、作成ページから生成されるコードはJavaScriptを利用したコードですが、それとは別にiframeによるコードも存在しています。
何らかの利用でJS使えない場合はそちらを使うといいかも。
JavaScriptを利用したコード
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://sample-url/" data-lang="ja">ツイート</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>
iframeを利用したコード
<iframe allowtransparency="true" frameborder="0" scrolling="no" style="width:128px; height:20px;" src="http://platform.twitter.com/widgets/tweet_button.html?url=http%3a%2f%2fsample%2durl%2f&lang=ja&count=horizontal"></iframe>
Facebookと同様、JSの場合とiframeの場合でパラメーターの記述箇所が違います。JSの場合、パラメーターの頭に「data-」が付くのも、同じ。
ボタンを選択（JS：data-count｜IF：count）
自動生成ページだと、ツイートボタンに使えそうなものは「リンクを共有する」というやつですね。
それ以外は、ボタン内に色々とテキストが入っているパターン。
どのボタンを選ぶかでボタンを押したときの機能も変わってきます。
仕様ドキュメントの方にある、「Hashtag Buttons」や「Tweet to Buttons」なんかが該当しますが、まあニーズないだろうからパス。
「リンクを共有する」ってのは、「class=”twitter-share-button”」で設定される「Share Button」です。
このボタンには、実は3種類の形があります。
パラメーターdata-count（count）に、以下の値を設定することで変更可能。
- none ：ボタンのみで数字のカウントを表示しない。
- horizontal ：ボタンの右に数字を表示。widthは110pxぐらい？
- vertical ：ボタンの上に数字を表示。widthは60pxぐらい？
なお、自動生成ページのオプションである「数を表示」は、↑のnoneとhorizontalの切り替えとなります。
で、このボタンのサイズなんですが、iframe形式で埋め込んでいる場合は、iframeのwidth等を指定すれば好みのサイズになります。
（小さくしすぎると隠れちゃいます。）
問題は、JavaScript形式の場合。この場合は、レンダリングの際に自動的にiframeが読み込まれるわけですが、その読込先の方でiframeのwidthが指定されているため、やけに幅が広くなってしまうのです。
そこでこれを解決するのが、またもやCSSのimport指定。
iframe.twitter-share-button {width: 110px!important;}
なんてふうに記述すれば、問題なし。
Pocketのボタンとかも、やけに幅取るんだよなぁ。
div.pocket-btn {width:115px !important;}
こんな感じ。
ソースを見ていけば、意外に簡単にわかります。
URLを共有（JS：data-url｜IF：url）
ツイート時に文中に追加するURLは、自動生成ページであれば「ページのURLを使う」というオプションによって、自動的に表示しているページのURLが設定されるようにできます。
でも実はこの「data-url（url）」の値というのは、設定されていない場合は自動的にページのhead内のcanonicalのURLを参照するようになってます。
（canonicalが無い場合は、表示しているURLそのまま。）
つまり、特定のURLをツイートさせたい場合以外は特に指定する必要はないわけですね。
ツイート内テキスト（JS：data-text｜IF：text）
ツイート時のデフォルトテキストです。自動生成ページで入力すれば、簡単に好きな文言を入れられます。
後からソースで変更する場合は、UTF-8でエンコードしたものを入れないといけません。
また、この値が未設定の場合は、自動的にページのtitle要素が表示されます。
ユーザー（JS：data-via｜IF：via）
ツイートする際に、特定のアカウント名を表示したい場合に使います。
viaという単語はあまり聞きなれませんが、「～経由で」という意味の英語です。
Twitterクライアントの中には、他人のツイートをRTする際にその相手の名前を「via @#name#」という形で付与するものがありますがあれと同じです。
日本時には「from」とかのほうが分かりやすいかも。
設定したい場合は、viaにユーザー名（スクリーンネームと言われる@で始まる名前）をいれます。
推奨（JS：data-related｜IF：related）
ツイートした後に、特定のアカウントのフォローを薦めたい場合に使います。
relatedには、ユーザー名（スクリーンネームと言われる@で始まる名前）を設定します。
複数のユーザーを進めることもでき、その場合はカンマで区切ります。
data-related=”snowadays,account2,account3″てな感じ。
さらに、ユーザー名の前に、摘要を入れることもできます。
ツイートの後のおすすめユーザー画面にて、ユーザーのプロフィール情報の上に、摘要が表示されます。
まあ、摘要っていってもほんとに見出しみたいなもんですが・・・。
↑の画像だと、data-related=”BarackObama:オバマ大統領,AbeShinzo:安倍総理” と記述しています。
気を付けなければいけないのは、このおすすめユーザーには表示の順番に優先順位があるということです。
まず、おすすめ画面には最大で2名しか表示されません。
また、閲覧しているユーザーがすでにフォローしている人は、おすすめ画面には表示されません。
その前提の下で、表示される優先順位は viaで指定したユーザー＞relatedで指定したユーザー（左から順番に） となります。
複雑なのは、viaの指定だけの時にはおすすめユーザー画面は出ないのに、viaとrelated両方指定している場合は、viaで指定したユーザーもおすすめ画面に出てきてしまうことです。
同じアカウントの場合でも二人並んでしまいますので、注意が必要。
ハッシュタグ（JS：data-hashtag｜IF：hashtag）
これはそのままハッシュタグのことです。
コード内に記述する際は、「＃」マークは不要です。
ボタン(大)（JS：data-size｜IF：size）
このチェックを入れるとボタンが大きくなります。
size=large、が大きいサイズで、mediumが通常サイズです。
カスタマイズされたTwitterからのオプトアウト（JS：data-dnt｜IF：dnt）
自動生成ページにあるこの項目、説明が全くないので意味わからないと思います。
Twitterは、ユーザーの行動をトラッキングして好みを把握し、それをもとにおすすめユーザーをサジェストするような仕組みがあります。
この仕組みのためには、ユーザーの行動をトラッキングする必要があるのですが、これには様々なWebサイトに設置されているツイートボタンを押したかどうか、も情報の一つになります。
このチェック項目にチェックを入れると、このトラッキングが無効になる（このツイートボタンを押したということがTwitter側に送信されなくなる）ので、それらのプライバシーが気になる場合にはチェックを入れておきましょう。
なお、コードに直接記述する場合は、data-dnt=trueとすればOKです。
→ Facebookのいいね！ボタン編はこちら！
