アフィリエイト拡散に影響？いいねボタン仕様変更、6/23迄修正必須

Facebookのいいね！ボタンとLike Boxの仕様が変わります。
現行バージョンは2015年6月23日で廃止され、「Page Plugin」という名称の新APIに変わります。

情報発信には欠かせないツールなのでアフィリエイトをしているブログに付けている方は多いと思います。
TwitterやGoogle+と一緒に並んだFacebookのいいね！ボタンとお友だちの顔アイコンが付いたLike Boxです。

当ブログ「アフィリ課」はソーシャルからの集客は20%程あり、Facebookも少なからず寄与しています。
Like Boxはブラウザの表示速度を著しく遅くし、アフィリエイトサイトには不要と判断し、ブログの立ち上げ当初から外していますが、いいね！ボタンは無視するわけにはいきません。

当ブログは記事の末尾にソーシャルボタンを設定しています。
その中にFacebookもありますが、このままでは2015年6月23日以降、利用できなくなりますので今のうちに新しいバージョンに変更する必要があります。
現時点ですでに、Like Boxコードを入れ換えるだけで新APIは動作しますので、利用停止日前に設定を見直しておきましょう。

Facebook参照サイト

Like Boxとは？
Page Pluginコードの取得
設置コードの取得方法
Like Button（いいね！ボタン）コードの変更
既存コードの確認
暫定的IFRAMEのコード修正方法
Page Plugin仕様変更のまとめ

Like Boxとは？

Like Boxは友だちの顔アイコンが付いた下記のようなFacebookツールです。

Like BoxはFacebookページのいいね！を獲得するため、多くのブログやWebサイトに設置されていますが、このLike Boxが利用停止になります。

あなたのブログにこのようなFacebookのボックスがある場合、新しいコードに変更する必要があります。

Page Pluginコードの取得

新しく設定する「Page Plugin」のコードを取得するため、下記のURLにアクセスしてください。

Page Plugin

上記のジェネレーター画面が表示されますので、各欄に情報を入力します。
各項目を入力している過程で、入力項目に合わせてPage Pluginの表示が、あなたのブログに設置されるイメージに変わっていきます。

Facebook Page URL
あなたのFacebookページのURL
実際にアクセスしてブラウザのアドレス欄からコピペしてください。
Width
設定するPage Pluginの横幅。
最小幅がこれまでの240pxから280pxに変更になりました。280pxより狭いサイドバーでは、Page Pluginがはみ出してしまいます。
最大幅は500pxまでです。
レスポンシブには一応対応しているようですが、スマホを縦から横に変えたときなどは再読み込みしないと、画面サイズからはみ出でしまいます。また、CSSでサイズを制御しても上手く機能しません。
実に面倒ですが、6月23日の切り替え日に再確認する必要があります。
Height
設定するPage Pluginの横幅。
最小の高さは 130pxです。
Show Friend's Faces
いいね！してくれた友だちの写真を掲載したい場合チェック。
以前は縦幅分友だちの顔写真が表示されましたが、1行分のみの表示となりました。
縦長の表示をしたい場合は、下記のShow Page Postsを有効にして対応します。
Hide Cover Photo
Facebookページで設定したカバー写真を表示したくない場合チェック。
Show Page Posts
Facebookページのタイムラインを表示したい場合チェック。
Get Code
入力完了後、Get Codeをクリックしてコードを取得します。

新しい仕様のPage Pluginは上図「Get Code」の上のようなデザインになります。
友だちの写真は減りましたが、Facebookページと同じカバー写真になり、よりビジュアルに訴えかけるデザインへ変化しています。
「いいね！」と「シェア」ボタン両方があり、用途に合わせて使い分けられるようにもなっています。

設置コードの取得方法

「Get Code」ボタンをクリックして、設置コードを出力します。設置コードを表示したモーダルウィンドウが出現します。

上段赤枠内コード
ブログの<body></body>タグ内に貼ります。
WordPressの場合は、通常header.phpにある<body></body>タグ内になります。
Page PluginとLike Button（いいね！ボタン）の両方を利用する場合でも、一度だけ貼れば問題ありません。
下段赤枠内コード
Page Pluginを表示させたい場所にタグを貼り付けます。
サイドバーなら、WordPressの場合、sidebar.phpです。
WordPressのウィジェット
両方のタグを続けてウィジェットに貼り付けるだけで動作します。

このコード出力ですが、これまであったXFBML、IFRAME、URL版の提供は無くなりました。IFRAMEしか使えない環境の人は、諦めろということでしょうね。

公式ボタンとカウントの表示は非常に重いため、自作ボタンやアイコンWebフォントを使ってSNSカウントをキャッシュ化するときに使用していた、sharerコード「http://www.facebook.com/sharer.php?u=http」も見当たりません。
自作アイコンでキャッシュする方法はあちこちのブログで結構見かけますが、困ったものでいつまで使用できる分からない状況です。

私も下記のSNS Count Cacheで使用しています。
ツイート、いいね、はてブ数を高速表示するSNS Count Cache

Like Button（いいね！ボタン）コードの変更

Page Plugin（旧Like Box）を利用せず、いいね！ボタンだけ設置する場合は、次の方法で対応します。

既存コードを修正する

js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
の箇所を探し、
js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.0";
に変更する。

この処置で2016年の5月30日まで有効期限が延期されます。

新規コードに変更する

Like Button for the Webにアクセスして、新規コードに差し替えます。

URL to Like
いいね！ボタンを設置するアドレスを記入します。
ページごとにアドレスが変わりますので、WordPressの場合は、とりあえずあなたのブログのURLを入れておきます。

Layout
Get Codeボタンの上に表示されるイメージを参照して、プルダウンから希望するタイプを選びます。

Action Type
いいね（like）かおすすめ（recommend）を選択します。

Show Friends' Faces
友だちの写真表示の有無。

Include Share Button
シェアボタン設置の有無。

入力後、Get Codeボタンをクリックし、上記の「設置コードの取得方法」と同様にコードを取得して、これまで貼ってあった箇所のコードと差し替えます。

その際、URL to Like欄で仮入力したURLを変更します。
下記の「あなたのブログURL」の箇所のみ変更してください。

変更前

<div class="fb-like" data-href="あなたのブログURL" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>

変更後

<div class="fb-like" data-href="<?php the_permalink() ?>" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false">

既存コードの確認

設置コードの貼り付け位置を特定し、既存のコードと差し替えます。
WordPressの場合は、上図（設置コードの取得方法）の上段赤枠内コードはテーマにより異なりますが、header.php、footer.php等です。または、functions.phpか外部ファイルになっている可能性もあります。

上図の下段赤枠内コードは、実際にボタンやボックスが表示されている箇所です。詳細ページならsingle.php、サイドバーならsidebar.phpかWordPress管理画面のウィジェットになります。

自分のFacebookツールが変更する必要があるかどうかの判断は、「いいね！ボタン」や「Like Box」が掲載されているページにアクセスし、マウスを右クリックした後「ページのソースを表示」を選択してください。
ページのソースが表示されますので、Facebookのソースが書かれた周辺に「all.js」がある場合は、修正が必要です。「sdk.js」の場合は修正する必要はありません。

ただし、FacebookのAPIが外部呼出しファイル（○○○.js）になっている場合は、上記の方法では見つけることができません。それらしいファイルを開いて、facebookで文字検索をし、ヒットしたファイルに「all.js」か「sdk.js」のどちらかが記載されていることを確かめてください。

また、この仕様変更により、Facebookページと連携する既存のWordPressプラグインも注意が必要です。
新規格に合わせたバージョンアップが無いと、当然使えなくなります。Like Box、コメント、いいねボタンなどをプラグンで実装している方は事前に確認しておきましょう。更新案内が来ないようなら、早めに他のプラグインに変えることをおすすめします。

暫定的IFRAMEのコード修正方法

Facebook公式サイトにIFRAME版のいいね！ボタンの修正版コードが提示されています。

HTML5またはxfbmlバージョンのFacebookソーシャルプラグインを使用している場合、表示されるバージョンは、JavaScript SDKを初期化する際に指定されたバージョンによって決まります。
Facebookプラグインのiframeやプレーンリンクバージョンを挿入する場合は、次のように、プラグインのソースパスの先頭にバージョン番号を追加します。

プラットフォームのバージョン管理

「www.facebook.com/plugins」の次に「v2.0」を追加し、「www.facebook.com/v2.0/plugins/」にします。
この処置で2016年の5月30日までは使えるようです。

<iframe
 src="//www.facebook.com/v2.0/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;width&amp;layout=standard&amp;action=like&amp;show_faces=true&amp;share=true&amp;height=80&amp;appId=634262946633418" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:80px;" allowTransparency="true">
</iframe>