WordPressにプラグインを使用しないでツイートボタンを設置する方法

前回に引き続きソーシャルボタンの設置方法。
今回はツイートボタンとはてぶボタンです。

ボタン設置のためのコードを取得

Twitter / Twitterボタンにアクセスしてボタン設置のためのコードを取得します。

『リンクを共有する』をチェッそクするとその下にボタンのオプションが表示されます。

URLを共有：

デフォルトの『ページのURLを使う』のままでOK。ページごとのURLを共有できます。

ツイート内テキスト：

こちらもデフォルトのままでも問題ありませんが、タイトルを【】で囲いたいので後ほど書き換えます。
あとで書き換えやすいよう、仮で「ページタイトル」と入れておきます。

数を表示：

ツイートされた数は非表示にしたいので、今回はチェックを外します。

ユーザー：

ツイート本文に『@XXXXさんから』と表示される部分。ログインしているアカウントがデフォルトで入っているのでそのまま。

推奨：

ツイートした後に表示されるおすすめユーザー。

ハッシュタグ：

今回は入れる必要がなかったのでブランクのまま。

言語設定：

ツイートボタンの表示言語。Tweetにしたければ英語に。

プレビューのボタンもちゃんと生きていますので、どのように表示されるのか確認ができます。
本当にツイートされちゃうので気をつけてください…

取得したコードを書き換える

設定が終わったらツイートボタンのプレビューの下にあるコードをコピーして編集します。
書き換え前のコードはこんな感じ。

<a href=”https://twitter.com/share” class=”twitter-share-button” data-text=”ページタイトル” data-via=”@自分のアカウント” data-lang=”ja” data-count=”none”>ツイート</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-text=”ページタイトル”』のページタイトルの部分を

【<?php the_title(); ?> | <?php bloginfo(‘name’); ?>】

と書き換えて【記事のタイトル | ブログ名】と表示されるようにします。

『data-via=”planbworks75″』の部分が自分のアカウントになっているかどうかの確認もしてくださいね。（2014.02.21 追記）

『via=”@自分のアカウント”』の部分を自分のアカウントに書き換えてください。（2014.05.21 追記）

完成

書き換えたコードはこんな感じ。
このコードを配置したい場所に記述します。

<a href=”https://twitter.com/share” class=”twitter-share-button” data-text=”【<?php the_title(); ?> | <?php bloginfo(‘name’); ?>】” data-via=”@自分のアカウント” data-lang=”ja” data-count=”none”>ツイート</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>

ツイートボタンの配置もできました！
OGPの設定がない分、いいね！ボタンよりもハードルが低いような気がします。