ワードプレス(WP)に各SNSのブックマークボタンを導入する

ソーシャル時代必須のSNSブックマークボタンを導入したいと思います。

とりあえず今回は記事ページにのみ追加しますが、今後トップページにも設置したくなるかもしれないので、1ページに複数記事へのブックマークボタンを設置する場合に対応できるようにしておきます。

スポンサーリンク

個々のサービス毎にボタンを設置していくのは手間なので、最初はプラグインで一発設定できないかと探したら、ありました。

「WP Social Bookmarking Light」という国産プラグイン一発で複数SNSのブックマークボタンを導入してくれます。しかし現行バージョンではOGPに対応していないことや、ボタン配置の自由度、今後のバージョンアップのしやすさなどを考慮して、個別に導入することにしました。

もし、それほどコダワリのない場合には「WP Social Bookmarking Light」もオススメします。ただOGPの設定は行われないようなので、「WP-OGP」などもインストールする必要があります。

必ず設定しておきたいOGP

OGPのロゴ

ブックマークボタン導入の下準備としてOGP(The Open Graph Protocol)を設定します。OGPはhead内に記述する情報で、中身は記事のタイトルや本文などです。OGPが設定されているとSNSは記事情報を正確に取り込んでくれます。設定しない場合と比べてアクセスが数倍変わってくる場合もあるようで、OGPを設定しないブックマークボタンに意味はないとも言わわれています。必ず設定しておきましょう

OGPの導入として、以下の2つのプラグインを試してみました。

  • WP-OGP
  • Open Graph Pro

残念ながら「WP-OGP」にはバグがありソースを修正する必要があるので、「Open Graph Pro」の方が導入が簡単という情報を見つけたのですが、私の環境では、なぜか一部のOGPが出力されなかったので、「WP-OGP」を利用することにします。

FacebookにてOGPを利用する場合には、Facebook上にてアプリ設定を行う必要があるのですが、アプリ設定から「WP-OGP」の導入&バグ修正までIDEA*IDEAさんに記事がありますので、そちらをご覧ください。

WordPressのOGPプラグイン『WP-OGP』を正しく設定する方法 | IDEA*IDEA

Facebookいいね!ボタン

OGPの設定が終わってしまえば、Facebookいいね!ボタンの設定の半分は終わりです。早速、公式ページからボタンを作成します。

「URL to Link」にはURLを入力しますが、後にそれぞれの記事ページに書き換える必要がありますので、とりあえず適当なトップページなどの仮アドレスを入力しましょう。出力されるコードは「HTML5」「XFBML」「IFRAME」から選べますが、私は安定性&デザインコントロールしやすそうな「IFRAME」を選びました。

出力されたコードをテンプレートに記述します。先ほど入力した仮のURLは記事ページのURLに置き換えられるように、<?php the_permalink(); ?>に変更します。

URL部分を修正
<iframe src="//www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;send=false&amp;layout=button_count&amp;width=110&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=20&amp;appId=0123456789" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:20px;" allowTransparency="true"></iframe>

Twitterボタン

TwitterボタンからはOGPの情報は参照されません。公式Twitterボタンからコードを作成し、導入するだけです。

ボタンのオプション→「URLを共有」は「ページのURLを使う」で問題なさそうですが、<?php the_permalink(); ?>でURLを指定できるようにしておきます。これは、後にトップページなどで1ページに複数のボタンを導入する場合に備え、その時に同じコードが使えるようにする為です。

デザインですが、私はボックスタイプ(垂直タイプ:当サイトの記事下にあるタイプがそうです)のボタンを使いたかったのですが、現在、選べなくなっています。とりあえず以前の値を指定すれば使えます(data-count=”vertical”属性を追加します)。他、横幅の変更などはCSSで対応します。

URL部分を修正
<a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink(); ?>" data-via="plustakk" data-lang="ja" data-count="vertical">Tweet</a>

CSSを追加して横幅を変更

水平タイプの場合
iframe.twitter-count-horizontal {
    width: 105px !important;
}
垂直タイプの場合
iframe.twitter-count-vertical {
    width: 65px !important;
}

はてなブックマークボタン このエントリーをはてなブックマークに追加

OGPは必要としません。公式はてなブックマークボタンで作成したHTMLコードに、記事のURLとタイトルが反映されるように修正後、テンプレートに導入します。

URL部分を<?php the_permalink(); ?>に、
記事タイトル部分を<?php the_title(); ?>に変更。
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="standard" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>

mixiイイネ!とmixiチェック
mixiチェック

まず「mixiイイネ!」と「mixiチェック」の違いについて公式にありますが、それほど大きな違いはないようです。様子をみて、どちらか片方だけにしても良いかもしれません。

どちらのボタンを設置するにしても、ミクシィ デベロッパーセンターに登録し識別キー(チェックキー)を発行する必要があります。登録には住所や電話番号などを入力する必要があります。

デベロッパーセンターへ登録が終われば後はコードの設置のみです。mixiチェックは技術仕様のコードを、「mixiイイネ!」は Partner Dashboardの「mixi Plugin」から取得できます。

なお、mixiチェックはOGP情報を使用するので、「WP-OGP」の導入、並びにhtml宣言に「xmlns:mixi=”http://mixi-platform.com/ns#”」を追加します。Facebookとmixiの両方でOGP対応させたhtml宣言は下記のようになります。

FacebookとmixiのOGP対応させたhtml宣言
<html dir="ltr" lang="ja" xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:mixi="http://mixi-platform.com/ns#" >
mixiイイネ!
URL部分を<?php the_permalink(); ?>に修正
<div data-plugins-type="mixi-favorite" data-service-key="0123456789" data-size="medium" data-href="<?php the_permalink(); ?>" data-show-faces="false" data-show-count="false" data-show-comment="true" data-width=""></div>
mixiチェック
URL情報などはOGPから
<a href="http://mixi.jp/share.pl" data-key="0123456789" data-button="button-6">mixiチェック</a>

Google+1ボタン

公式ページからコードを取得します。

他のボタンと同様にURLを指定できるようにするため、詳細オプションから「+1 ボタンの対象とする URL:」で適当なアドレスを入力後、<?php the_permalink(); ?>に置き換えます。

URL部分を修正
<g:plusone size="medium" annotation="none" href="<?php the_permalink(); ?>"></g:plusone>

Google+1ボタンでは、OGPと同じ役割の「+スニペット」というコードも追加できます。 しかしOver the Vertex of Technology by 朝山貴生によるとOGPが設定されている場合はOGPから情報を取得してくれるようなので、私は「+スニペット」は設定しませんでした。

終わりに

お疲れ様でした。以上で設置は完了です。各サービスのボタンを個別に作成したので骨は折れましたが、今後のバージョンアップなどのメンテナンスがしやすいと思います。

またTIPSとして、当サイトのように記事の上下にソーシャルボタンを設置する場合、<script></script>で記述されたまったく同じJS部分が重複する場合があると思いますが、通常はより下にあるJSのみを残せば動作します。

 

 

スポンサーリンク