WordPress ソーシャルボタン導入完全ガイド

このブログで行った、ソーシャル関係に役立つ、Facebook や Twitter ボタン配置を、テーマファイルに直接書き込んでカスタマイズする方法を記録として残しておきます。

アイキャッチ画像をページ画像に

まずはアイキャッチ画像。

Facebook や Mixi チェックをなどを行った場合、 Facebook や Mixi で、ページの名前や画像が表示されます。これに OpenGraph という情報を、<head>タグ内に入れると、自分が好みの情報や画像を表示させることが出来ます。

ということで、このブログでも、WordPress ブログを Facebook や Mixi チェックで共有したときに

  • アイキャッチ画像を画像に
  • アイキャッチ画像がなかったり、一覽ページである場合、デフォルト画像を表示する

ことが出来るようにしました。

まず、<html> と <head> タグの宣言

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:mixi="http://mixi-platform.com/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head profile="http://gmpg.org/xfn/11">

そして、以下のコードをテーマファイルにある header.php  の <head> タグが閉まる直前ぐらいに置いておいてください。

<?php // Opengraph 宣言開始 if (has_post_thumbnail($post->ID ) ){<br />
$OpenGraphImage = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), '' );
} else {
$OpenGraphImage[0] = '【画像がない場合のデフォルト画像URL】';
} ?>
 <meta property="fb:page_id" content="【Facebook インサイト】" />
 <meta property="og:site_name" content="katzueno.com" />
<?php if (is_single()) { ?>
 <meta property="og:title" content="<?php wp_title();?>" />
 <meta property="og:description" content="<?php echo strip_tags(get_the_excerpt($post->ID)); ?>" />
 <meta property="og:type" content="article" />
 <meta property="og:image" content="<?php echo $OpenGraphImage[0]; ?>" />
<?php } else { ?>
 <meta property="og:title" content="<?php wp_title();?>" />
 <meta property="og:description" content="<?php bloginfo('description'); ?>" />
 <meta property="og:type" content="website" />
 <meta property="og:image" content="【デフォルト画像URL】" />
<?php } // Opengraph 宣言ここまで ?>

アイキャッチ画像 URL を出力することにちょっと時間がかかりました。

ポイントは $OpenGraphImage ではなく $OpenGraphImage[0] と [0] を加えていることです。アイキャッチ画像の URL を含め、記事の中で使われている全ての画像 URL が、変数に配列として挿入されるからです。

アイキャッチ画像 URL は、配列の一番最初 [0] に保存されるので、URL を入れる場所に [0] と入れます。

Facebook Insight

上記コード7行目「Facebook Insight」のコードを入れる部分があります。 ドメインを、個人の Facebook プロフィールや Facebook ページなどに紐付けて、なんと、何%のユーザーが「いいね」をしたか、共有されたユーザーの友達が何回クリックしたかの解析ができます!

設定は「Facebook Insight」からウェブサイトを登録し、個人のプロフィール、Facebook ページなどに紐付けすると、8行目などのコードを取得できます。そこに貼り付けちゃいましょう。

Facebook App 初期定義

Facebookページの「いいね」ボックスや、効率よいページの「いいね」ボタンの配置をするために、ウェブサイトを Facebook Apps として登録することをおすすめします。

Facebook Apps」のページから

「Set Up New App」をクリック。

もしかしたら、本人確認のために、クレジットカード情報を登録しないといけないかもしれません。あくまでも、 Facebook Apps を悪用してスパム行為をした際に、身分確認が出来るための対策で、お金はチャージされません。

そして、App Name は自分のサイトの名前を入力し「同意する」を選択すると、自分のウェブサイト専用のアプリIDが割与えられます。

そこの「アプリID」を書き留めてください。

そして、 <body> タグの直後に、以下のコードを貼り付けます

<div id="fb-root"></div>
<script>
 window.fbAsyncInit = function() {
 FB.init({
 appId  : '【アプリID】',
 status : true, // check login status
 cookie : true, // enable cookies to allow the server to access the session
 xfbml  : true  // parse XFBML
 });
 };
 (function() {
 var e = document.createElement('script');
 e.src = document.location.protocol + '//connect.facebook.net/ja_JP/all.js';
 e.async = true;
 document.getElementById('fb-root').appendChild(e);
 }());
</script>

「’//connect.facebook.net/ja_JP/all.js’」の部分で日本語の指定をしています。ここを「en_US」などにすると英語に・・・ここで、php で WordPress が現在設定している言語を指定してやるということもできますが、割愛です。

Mixi Developer ID をゲットして「チェックキー」入手

【参考】concrete5 に実装したチュートリアル

http://concrete5-japan.org/community/forums/development/post-971/

  • 自分のサイトをMixiに登録する必要があります
  • Mixi にログイン
  • Mixiロゴの直下にある、タブメニューから「Mixi Plugin」をクリック
  • 「新規サービス追加」をクリック
  • サービス名 = 自分のサイトの姪URL = メインのURL( http:// 付き)URL許可リスト = 自分のサイトをすべて(「 http:// 」なしで)「同意する」をチェックして、入力内容を確認する→作成する
  • そこで「チェックキー」を取得できます。

Google+1 ボタンを設置の準備

最近サービス開始、Google+1ボタンを設置する準備をしましょう。

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'ja'}
</script>
</body>

このコードを WordPress テーマの body タグが閉じる前に置きましょう。

はてブ・ Mixi チェック・ Twitter ・Fb「いいね」・Google+1 ボタン設置

さて、はてなブックマークボタン、Mixi チェックボタン、Twitter のツイートボタン、Facebook いいねボタンを設置。

一覽ページ:「index.php」「loop.php」「archive.php」等

index.php もしくは loop.php に設置してみましょう。これは、インデックスページにいながら、リンク先各個別記事のURLが共有出来るようになります。テーマによっては、別々になっていたり「loop.php」にまとめられていたりします。

いろんなパターンがありますので、これを参考に各自パラメーターを変更したりして遊んでみてください。

<a href="http://mixi.jp/share.pl" data-key="【Mixi チェックキー】" data-url="<?php the_permalink() ?>" data-button="button-5">Check</a><script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>
 <a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>" data-hatena-bookmark-title="<?php the_title() ?>" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
 <a href="http://twitter.com/share" data-url="<?php the_permalink() ?>" data-text="<?php the_title() ?>" data-count="vertical" data-via="【Twitter ID】" data-lang="ja">Tweet</a>
 <fb:like href="<?php the_permalink() ?>" send="false" layout="box_count" show_faces="false" font=""></fb:like>
 <g:plusone size="tall"></g:plusone>

シングルページ:「single.php」「page.php」用

タイトルの下ぐらいに以下のコードを上手く配置するといいでしょう。

<a href="http://twitter.com/share" data-text="<?php the_title() ?>" data-count="horizontal" data-via="【Twitter ID】" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
 <fb:like layout="button_count"></fb:like>
 <a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>" 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><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
 <g:plusone size="small"></g:plusone>
 <a href="http://mixi.jp/share.pl" data-key="【Mixi チェックキー】">Check</a><script type="text/javascript" src="http://static.mixi.jp/js/share.js"></script>

ということで、この結果が、みなさんがご覧いただいている、当ブログでございます。