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

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

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

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

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

URLを共有:

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

ツイート内テキスト:

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

数を表示:

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

ユーザー:

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

推奨:

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

ハッシュタグ:

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

言語設定:

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

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

Advertising

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

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

<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の設定がない分、いいね!ボタンよりもハードルが低いような気がします。

Author

すずき のりえ
@planbworks

Webデザイナー / グラフィックデザイナー / エイチレフ合同会社 業務執行社員
コーポレートサイト・リクルーティングサイト、会社案内・入社案内がメインです。最近では医療・福祉系のお客様が多いです。
母校の専門学校で非常勤講師(DTP / 2015年10月〜, Web / 2021年10月〜)。2017年3月よりお茶のお稽古に通っています(裏千家)。

関連記事