自分のブログの個別投稿ページにTwitterのツイートボタンを配置するメモ。
まず↓このページに行く
Twitterボタン|About
「リンクを共有する」をチェックする。
すると、オプションを選択できるようになる。
- 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ボタン用のプラグインを使う必要がある。
コメント
[…] めて安心。 推奨プラグイン(VK ExUnit)までインストールすると、今まで苦労して設置したSNSボタンとか、単体のプラグインで実現していたカスタムCSSとかの機能が標準で装備されてたの […]