Fafacebook Like Button プラグイン
以前書いた記事「「いいね！」ボタンは便利！facebookの「いいね！」をWPプラグイン(Fafacebook Like Button)で設置しました。」ですでに設置済みの「いいね！」ボタン。
この「Facebook Like Button」WPプラグイン、ボタン設置だけでないFacebookとの連携を高めるためのOGPも実装している優れものだと、今頃気づきました！
そもそもの気づきは、このプラグインがバージョンアップした直後のバクから発見したのですけどね、「災い転じて福と成す」ですな(笑)
facebookのウォールに手動でこのブログ記事の更新のお知らせURLを入力したら、ブログ記事の概要（本文のはじめ部分）だけが文字化け？
あれ？と思って、ページのソースを見ると、
<meta property=”og:description” content=”xxx?????aaaa・・・
あらら、OGPの設定タグコードがあるじゃない！
og:discriptionはじめ、og:title、fb:admins・・・
これを設置したときは、OGPもよくわからなかった時だから、設定のときも気が付かなかったのでした。
ということで、改めてきちんと設定を行いました。
*バージョン5.9.5のog:discriptionの文字ばけバグは、日本語環境でのことで、その対処法については、この記事の最後に書きますね。
まず、このFacebook Like Buttonプラグインでできることは、下記の４つ。
１．「いいね！」ボタン、「送信」ボタンの設置
２．OGPの実装
（OGPを有効にするためには、Facebook側での設定、アプリ登録も必要です）
３．Googleアナリティクスでの「ソーシャル」トラックングをするためのコード設置
４．recommendations の設置
今上記１．２．３を設定しました。
設定方法は、IframeとXFBMLの二種類がありますが、今回はType：XFBMLでの設定です。
Fafacebook Like Button プラグインの設定
１．AppID
OGP実装のためのAppIDを入力します。
このAppIDは、次の項目のTypeでXFBMLを選択したときに必要です。
FacebookのCreate on App（Facebook開発者）で取得します。（取得方法は後述）
２．Type
「送信」ボタンを設置したいときは、Typeは、XFBML を選択します。
３．表示させたいページにチェックをいれます。
このブログでは、個別記事のコンテンツの後に、いいね！と送信ボタンの２つを表示させています。
４．Admin ID
FBのツール「Graph API Explorer」で確認できます。
５．Defualt Image:
「Check to enable」にチェックを入れると記事のサムネイルが表示されます。
ただし、記事投稿ページで、アイキャッチ画像に登録した画像が表示されます。
アイキャッチ画像を登録しない場合は、フォームに入力した画像が表示されます。
６．Enable Send Button
「送信」ボタンを表示するとき、チェック
７．Enable Social Tracking
Googleアナリティクスの[ユーザー]＞[サマリー]＞[ソーシャル]メニューで、FacebookのLikeが計測されます。
８．Layout Settings では、表示するボタンのデザインを設定します。
上記で、WP側の設定完了。
Facebook側の設定を行います。
１．Create on App（Facebook開発者）にアクセス
今回は、すでにApp登録がしてあるところの新規アプリを作成からの説明
Facebookアプリの新規作成
任意のアプリ名とアプリ空間名を入力。
次にセキュリティチェックの文字コードを入力。
２．連携するWebサイトのドメイン名を入力
FBアプリとWebサイトの連携設定
ウェブサイトのサイトURL入力は、http://が必要
WPのプラグイン設定のAppIDは、ここで確認できます。
これで、アプリの登録は終了。
３．ついでに連携アプリのインサイト設定も行いましょう。
ウェブサイトのインサイト設定
インサイト設定で、OGPのために取得したアプリ名をプルダウンから選択し完了。
これで、Facebookでのアクセス解析をみることができます。
さてｍ最後に「バージョン5.9.5のog:discriptionの文字ばけバグ」の対処法。
管理画面のプラグイン＞プラグイン編集で「facebook like]を選択
プラグインファイルの
facebook-like-button/inc/fun.inc.php
を選択し編集。
変更前
<meta property=”og:description” content=”‘.@htmlentities(@trim(substr(strip_tags($post_by_id['post_content']), 0, 140))).’”/>
変更後
<meta property=”og:description” content=”‘.@htmlentities(@trim(substr(strip_tags($post_by_id['post_content']), 0, 140)),ENT_QUOTES, “UTF-8″).’”/>
これで文字化けは直ります。
ただし、バージョンアップした場合は、修正されている場合もあります。修正などは自己責任で行なってください。
しかし、今回のこのプラグインのバージョンアップのバグフックスって、
changelogみたら、og:description bug fixed. って書いてある^^;
日本語の文字コードの関係までは把握しきれていないのかも。
