WordPressにTweetボタンを設置する

自分のブログの個別投稿ページにTwitterのツイートボタンを配置するメモ。

まず↓このページに行く
Twitterボタン｜About

Twitterボタン生成ページ

「リンクを共有する」をチェックする。
すると、オプションを選択できるようになる。

ボタンの種類を選択すると、オプションが選択できるようになる。

URLを共有

「ページのURLを使う」を選択すれば記事ごとのURLを自動で拾ってくれる。企業サイトのように特定のURLに誘導したい場合はURLを入力。

ツイート本文

「ページのタイトルを使う」を選択。やはり、記事ごとのタイトルを自動で拾ってくれる。特定の文言を入れたい場合は、それを入力する。

ユーザー

デフォルトで自分のIDのメンションが挿入されている。任意に変更可能。

推奨

省略可。ここに特定のユーザ名を入力すると、ツイートボタンを押した後に、そのユーザーのフォローを促す画面が表示される。カンマで区切って複数入力可。ただし2つまでしか表示されない。既にフォローされている場合は表示されない。

ハッシュタグ

省略可。ツイート内容にハッシュタグを入れることができる。カンマで区切って複数入力可。

ボタン大

チェックを入れると大きいサイズのボタンになる。

Twitterによるカスタマイズのオプトアウト

何言ってんだか意味がわからないが、Twitterトップページに表示される「おすすめユーザー」などを表示させる仕組みの材料にするか否かということらしい。チェックを入れるとこの仕組みに影響を与えない。入れないでおく。

言語設定

デフォルトの「Automatic」でよい。

すべてのオプションを確認したら、右の「コードのプレビューを見る」の下に見本ボタンが表示されているので、クリックして確認する。問題がなければ、その下にソースコードが生成されているので、これをコピーして、Wordpressテーマのメイン投稿ページの記事本文の前後にペーストすればよい。

私は自作のテーマを使っているので、index.phpを直接編集した（どのphpファイルを編集するかはテーマによって異なる）。

<?php the_content(); ?>

これが、記事本文のphpコード。これの前後に先ほどコピーしたTwitterボタンのコードをペーストして挿入する。

<!-- Twitterボタンのコードここから　適時改行を入れてあります-->
<a href="https://twitter.com/share" class="twitter-share-button" data-via="ittonjp" data-size="large">Tweet</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>
<!-- Twitterボタンのコードここまで -->

<?php the_content(); ?><!-- これが記事本文 -->

<!-- Twitterボタンのコードここから -->
<a href="https://twitter.com/share" class="twitter-share-button" data-via="ittonjp" data-size="large">Tweet</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>
<!-- Twitterボタンのコードここまで　-->

これで記事の前後に配置できた。

こんな感じ

ただし、自作でなく既存のテーマを使っている場合、挿入した部分はテーマのアップデートで無くなってしまう。

その場合は子テーマを作成してそこで編集するか、SNSボタン用のプラグインを使う必要がある。