Twitterのツイートボタンを設置するためのコード生成ツールがリニューアルされていました。ちょくちょく修正されて毎度迷ってしまうので困ってしまいますよね。。。
Google+1などのボタン設置については下記記事を御覧ください。
目次
Twitterのコード生成ツールはこちらです。URLもリニューアルされると変わったりするので注意して下さい。
「What would you like to embed?(何埋め込みたいの？)」この項目は未入力でも構いませんが、フォローボタンを作りたい場合は、@moreiicのようなTwitterIDを入力しておきます。
作りたいボタンを選びます。ツイッターボタンを作りたいので「Twitter Buttons」を選択します。
作りたいButtonの種類を選択します。シェアボタンを作りたい場合は「Share Button」を選択します。その後、コードが生成されるのでCopyCodeを押して下さい。
シェアボタン
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
サンプル：Tweet
フォローボタン
<a href="https://twitter.com/moreiic?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="large" data-text="sss" data-url="fsafa" data-related="aaaa,aaaa" data-lang="ja" data-show-count="false">Follow @moreiic</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
サンプル：Follow @moreiic
aタグとscriptタグで構成されています。scriptタグは何処に置いていても正常に動きますし、複数のボタンを設置していても１つあればOKです。
予め決まったテキストを入力しておきたい場合や、URLを設定しておきたい場合は、aタグに少しコードを追加します。
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-text="文字列を入れたら反映される" data-url="URL入れる部分" data-lang="ja" data-show-count="false">Tweet</a>
サンプル：Tweet
<a href="https://twitter.com/share" class="twitter-share-button" data-url="" data-via="" data-text="" data-related="" data-count="" data-lang="" data-counturl="" data-hashtags="" data-size="" >ツイート</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
このdataで始まる部分の記述方法で修正＆設定が可能です。
各要素の解説です。
必要ないものは削除しても問題ありません。必要なものだけカスタマイズして下さい。
ワードプレスなどを使用していてURLなどの指定方法がわからない場合は下記の記事を参考にして下さい！
ツイッターボタンの作り方のまとめでした。ツイッター公式のコードですが挙動が重い時があるので軽さ重視なら自分でアイコンを用意してリンク型シェアボタンの方が凄くスピーディに動いてくれます。もし興味があれば下記の記事でご紹介しています！爆速SNSボタンです。
