ゲインオーバー

MUGA, I am. 映画のことや英国のこと、加えてゲームやテクノロジーも。気になることを気侭に記していくブログです。

WordPressでの「いいね!」ボタン設定についてのメモ



ブログにFacebookの「いいね!」ボタンを設置してきたのですが、OGPなるものを設定しないと「いいね!」しても他人のフィードに載らないという事実を今更知りました。単純に設置しただけだと他人のタイムラインに表示されない仕様だったとは。。。 というわけで改めてFacebookの「いいね!」ボタンを設置する方法を整理して見ました。

まずOGPに登録する

Home - Facebook開発者からアプリをクリックして新しいアプリケーションを作成へ進みます。



すると次のような画面が出るので表示される名前とNamespace=IDのようなものを入力、そのまま認証して登録を済ませます。

後ほど必要になるので、登録後にFacebook開発者よりApp IDを確認しておきます。

「いいね!」ボタン作成・設置

「いいね!」ボタンのコード作成

Like Button - Facebook開発者から必要事項を埋めていき、Get Codeで取得したものをWordPressのページに挿入すれば作成完了です。

僕はfunction.phpに設置してloop.php、singel.phpで呼び出しています。 WordPressで子テーマを作る PHPと言語編 | MUGA.me

OGPの設定

WordPress › WP-OGP « WordPress Plugins コチラからWordPress用のプラグインをインストールし、これを設定していきます。が、プラグイン編集より直さなければいけない箇所があります。 1. wp-ogp.php内の「fb:appid」を「fb:app_id」に全て置換します。 2. 挿入画像がアイキャッチ画像に指定されているので、それを記事の一番最初の画像に変更します。

function wpogp_image_url() {
    global $post;

        $image = get_the_post_thumbnail_src(get_the_post_thumbnail($post->ID)); 

    if ( empty($image) )
        { return wpogp_image_url_default();}
    else
        { return $image; }

}

↓ $image = get_the_post_thumbnail_srcの部分を変えます。

function wpogp_image_url() {
    global $post;

        $image = get_the_post_thumbnail_src($post->post_content); 

    if ( empty($image) )
        { return wpogp_image_url_default();}
    else
        { return $image; }

}

続いて、テーマの編集よりヘッダのHTML宣言に以下を追加します。

xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml

そして、WP-OGPの設定でfb:app_idに取得したApp IDを、fb:adminsにFacebookのwhat-is-my-user-idで確認したユーザーIDを入力します。

最後に

以上で設定は完了なので、 Debugger - Facebook開発者からURLを検証し問題なければ大丈夫です。 img_srcがどーのこーのというエラーが出て今現在これは無視していますが、きちんと動いています きちんと「いいね!」ボタンを設置するのにもなかなか道のりが遠いですね。