記事共有用のソーシャルボタンを WordPress に手動で設置する方法(Twitter、Facebook、はてなブックマーク)

photo credit: celinecelines via photopin cc
photo credit: celinecelines via photopin cc

このブログでは各記事の冒頭と末尾に、SNS へ記事を共有してもらえるようにソーシャルボタンを設置しています。今までは Jetpack for WordPress プラグインを利用していたのですが、このたび手動で設置してみたのでやり方をまとめました。

目次

  1. やろうとしたこと
  2. Twitter
  3. Facebook
  4. はてなブックマーク
  5. 完成形

やろうとしたこと

今回目指したのは、個別の記事ページで記事のタイトル下と末尾の計2ヶ所にソーシャルボタンを入れること、そしてタイトル下のボタンはトップページなど記事一覧ページでもそのまま表示させること、です。

Twitter と Facebook、はてなブックマークのボタンをとりあえず設置しました。それぞれ、大まかに言って次の順番で作業しました。

  1. 公式サイトでコードを入手
  2. コードの中身を WordPress 用に修正
  3. コードを WordPress のテンプレートファイルに記述
  4. CSS を調整

Twitter

ツイートボタンは公式サイトの次のページで入手します(iPhone からアクセスするとページが表示されないので、PC からアクセスしてください)。

まず「ボタンを選択」の中から「リンクを共有する」を選びます。「ボタンのオプション」に「URLを共有」「ツイート内テキスト」とあるので、仮に「url」「title」などと入力しておきます(後で WordPress 用のテンプレートタグに書き換えます)。右下の「コードのプレビューを見る」に表示されるコードをコピーします。

コピーしたコードのうち、前半部分は次のような中身になっているはずです。

<a href="https://twitter.com/share" class="twitter-share-button" data-url="url" data-text="title">Tweet</a>

url とか title とあるのは、先ほど仮に入力したところです。実際はここに記事ごとの URL やタイトルが入るようにしたいので、それ用の WordPress のテンプレートタグに書き換えます。

Memo

ツイートボタンを個別の記事ページのみに設置する場合は、Twitter 公式サイトでコードを取得する際に「ページのURLを使う」「ページのタイトルを使う」を選ぶだけでよく、テンプレートタグを使う必要はありません。今回はトップページなどにも設置するので、ページ全体の URL やタイトルではなく、記事ごとの URL やタイトルが共有されるようにこのような作業をします。

テンプレートタグ
<?php the_permalink(); ?>
・・・記事のURLを出力する
<?php the_title(); ?>
・・・記事のタイトルを出力する

これを使って書き換えた後のコードがこちらです。ボタンを「Tweet」と英語表示にするために、data-lang="en" も付け加えました。

<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-lang="en">Tweet</a>

このコードを、WordPress のテーマのテンプレートファイルに記述します。私は Twenty Twelve をベースにしているので、記事の中身を出力する content.php に記述しました。まず、content.php で次のコードを探します。

<?php if ( comments_open() ) : ?>
・・・省略・・・
<?php endif; // comments_open() ?>
</header><!-- .entry-header -->

ここが記事タイトル下の「コメントをどうぞ」の文字を表示させているところなので、この </header><!-- .entry-header --> の前に先ほどのコードを <div> で囲って挿入します(自分はついでに「コメントをどうぞ」自体をコメントアウトして非表示にしました)。

<?php if ( comments_open() ) : ?>
・・・省略・・・
<?php endif; // comments_open() ?>
<div class="share-btn">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-lang="en">Tweet</a>
</div>
</header><!-- .entry-header -->

続いて、記事の末尾にもコードを入れます。content.php ファイルの後半に次のコードが書かれています。

<?php else : ?>
<div class="entry-content">
・・・省略・・・
</div><!-- .entry-content -->
<?php endif; ?>

ここに先ほどと同じコードを挿入します。ただし、そのまま記述するとトップページなどでもソーシャルボタンがタイトル下のものと合わせて2個表示されてしまいます。ここでは、個別の記事ページのみ記事末尾にソーシャルボタンを入れるようにしてみます。

<?php else : ?>
<div class="entry-content">
・・・省略・・・
</div><!-- .entry-content -->
<?php if ( is_single() ) : ?>
<div class="share-btn">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>" data-lang="en">Tweet</a>
</div>
<?php endif; // is_single() ?>
<?php endif; ?>

<?php if ( is_single() ) : ?><?php endif; // is_single() ?> でボタンのコードを囲むことで、個別の記事ページでのみコードが有効になるようにしています。

最後に、Twitter のサイトで取得したコードの後半部分を </body> タグの直前にペーストします。Twenty Twelve では footer.php ファイルにあります。

<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>
<?php wp_footer(); ?>
</body>
</html>

ツイートボタンの幅を調整したい場合は、スタイルシート(style.css)に次のように書きます。英語のボタンの場合、ツイート数が3ケタの状態で幅 90px がちょうどいい感じです(3ケタに達したことは1度しかありませんが…(꒪⌓꒪))。

.twitter-share-button {
width: 90px !important;
}

参考記事:

Facebook

次は Facebook です。いいね!ボタンのコードを公式サイトで取得します。

「Like Button」をクリック。

「Configurator」のところでカスタマイズします。

「URL to Like」は後で Twitter の時と同じようにテンプレートタグに置き換えるのでそのままで大丈夫です。

「Layout Style」でボタンのスタイルを変更できます。私は「button_count」にし、「Width」(横幅)を100にしました。

「Color Scheme」は色の設定。「Font」は日本語の場合、関係ありません。「Verb to display」はボタンに表示される文字の設定です。自分は「Send Button」や「Show faces」(いいね!してくれた人のプロフィール画像の表示)のチェックはオフにしました。

最後に「Get Code」をクリックします。

すると2種類のコードが表示されます。左上にいろいろボタンがありますが、私は「HTML5」にしました。

1つ目のコードがこちら。

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

ちょっと手を加えて、次のように js.async = true; のコードを挿入しておくとページの読み込み速度が遅くならないようです。

参考記事:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.async = true;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

そして、このコードは <body> タグのすぐ後に記述します。Twitter の時は </body> タグの前でしたが、Facebook では <body> タグの後です。試しに Twitter と同じ場所に記述してみたら、ボタンの読み込み速度がやや遅くなった感じがしました。

Twenty Twelve では、<body> タグは header.php ファイルにあります。

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">

コードを挿入すると次のようになります。

<body <?php body_class(); ?>>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.async = true;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="page" class="hfeed site">

続いて、公式サイトで取得したコードのうち、2つ目の方です。

<div class="fb-like" data-href="http://developers.facebook.com/docs/reference/plugins/like" data-width="100" data-layout="button_count" data-show-faces="false" data-send="false"></div>

ツイートボタンと同様、WordPress のテンプレートタグを使って修正します。

<div class="fb-like" data-href="<?php the_permalink(); ?>" data-width="100" data-layout="button_count" data-show-faces="false" data-send="false"></div>

修正したら、content.php のツイートボタンのコードを記述した場所に追加します。

<?php endif; // comments_open() ?>
<div class="share-btn">
・・・ツイートボタンのコード・・・
<div class="fb-like" data-href="<?php the_permalink(); ?>" data-width="100" data-layout="button_count" data-show-faces="false" data-send="false"></div>
</div>
</header><!-- .entry-header -->
</div><!-- .entry-content -->
<?php if ( is_single() ) : ?>
<div class="share-btn">
・・・ツイートボタンのコード・・・
<div class="fb-like" data-href="<?php the_permalink(); ?>" data-width="100" data-layout="button_count" data-show-faces="false" data-send="false"></div>
</div>
<?php endif; // is_single() ?>
<?php endif; ?>

最後に、CSS の調整です。いいね!ボタンがクリックされるとコメント記入用のウインドウが開くのですが、当初はこのウインドウがボタンの横幅と同じサイズまでしか開かず、途中で切れてしまう現象が起きました。

このウインドウは <iframe> タグになっていて、Twenty Twelve でもともと設定されている iframe { max-width: 100%; } のコード(最大横幅を親要素の横幅に合わせる)が原因でした。この <iframe> ウインドウには .fb_ltr というクラスが充てられているので、次のようにスタイルシートに追記しました。

.fb_ltr {
max-width: none !important;
}

参考記事:

はてなブックマーク

最後に、はてブボタンを設置します。公式サイトでコードを取得します。

作り方はツイートボタンとほぼ一緒です。「ページのアドレス」「ページのタイトル」に仮入力し、コードをコピーします。

コードの前半部分を見てみます。

<a href="http://b.hatena.ne.jp/entry/url" class="hatena-bookmark-button" data-hatena-bookmark-title="title" data-hatena-bookmark-layout="simple-balloon" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>

ツイートボタンと同様に、WordPress のテンプレートタグに置き換えます。

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="simple-balloon" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>

修正したら、content.php に追加します。

<?php endif; // comments_open() ?>
<div class="share-btn">
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="simple-balloon" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
・・・ツイートボタンのコード・・・
・・・いいね!ボタンのコード・・・
</div>
</header><!-- .entry-header -->
</div><!-- .entry-content -->
<?php if ( is_single() ) : ?>
<div class="share-btn">
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="simple-balloon" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
・・・ツイートボタンのコード・・・
・・・いいね!ボタンのコード・・・
</div>
<?php endif; // is_single() ?>
<?php endif; ?>

あとは取得したコードの後半部分を、footer.php のツイートボタンのコードと同じ場所に追加します。

<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
・・・ツイートボタンのコード・・・
<?php wp_footer(); ?>
</body>
</html>

完成形

これで3つのソーシャルボタンが設置できました。コードをコピペするだけだろうから簡単かな、と予想していたのが、いざやってみたらなかなか骨の折れる作業でした。「大変だったね!」と思ってくださった人は、ぜひこのできたてほやほやのソーシャルボタンを押して行ってくださいw

この記事が、これから自力でソーシャルボタンを設置したいと考えている方のお役に立てれば幸いです。

7 thoughts on “記事共有用のソーシャルボタンを WordPress に手動で設置する方法(Twitter、Facebook、はてなブックマーク)

  1. Pingback: 誰でも簡単に、ソーシャルボタンをきれいに並べる方法。【CSS3/flex-box】 | futapapa

  2. 072st

    はじめまして。
    こちらの記事を参考に、twitterのボタンを設置してみました。問題無く動作しているのですが、一点不具合が生じるケースに遭遇したので、もしお分かりになればご教示頂ければ幸いです。
    wordpressの記事タイトルではhtmlタグが利用できますが、記事タイトルにhtmlが含まれているとエラーメッセージが表示されます。
    例:記事タイトルに→タイトルほげほげ
    と入れた場合、どうもspanタグが解釈されず、こちらの記事の例でいくと”Tweet”の前にタイトル名が表示されてしまいます。
    これはtwitterの仕様として仕方ないのでしょうか?

    Reply
    1. hirose Post author

      072stさん、コメントありがとうございます。テーマやソースコードが分からないので何とも言えないところはあるのですが、ツイートボタン自体は div タグなどで囲われていますでしょうか?Twitter 側よりも、タイトルに HTML タグを含められたことが関係しているように思います。お使いのブラウザでソースコードを表示させ、タイトルに HTML タグを入れた時と入れない時とでソースコードがどう変わるかを確認されると糸口が見えるかもしれません。

      Reply
  3. Pingback: 灰色の時 – 記事末に、はてブ、Twitterのボタンを追加!

  4. Pingback: 更新履歴を兼ねたもの。ぐる娘

  5. Shimpei

    こちらのサイトを参考にソーシャルボタンを設置しました。
    私はWordpress初心者ですが分かりやすくてとても助かりました。ありがとうございます。

    そのお礼に(笑)Facebookのいいねボタンを押したのですが、コメント欄が途中で切れて表示されました。
    本記事中にあるコードが間違っているのかな?と思い、参考元サイトを見てみると、


    .fb_ltr {
    max-width: none !important;
    }

    ではなく、

    .fb-like iframe {
    max-width: none!important;
    }

    とありました。

    ご報告までに。

    Reply
    1. hirose Post author

      Shimpei さん、コメントありがとうございます。記事がお役に立ててよかったです。それといいねボタンについてもご指摘ありがとうございます。こちらでもよく調べてみようと思います。

      Reply

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です