WordPressにFacebookのソーシャルプラグインを簡単に設置できるFacebook公式プラグイン「Facebook」

WordPressにFacebookのソーシャルプラグインを簡単に設置できるFacebook公式プラグイン「Facebook」

Posted at August 1,2012 1:55 AM
Tag:[Facebook, Plugin, WordPress]

WordPressにFacebookのソーシャルプラグインを簡単に設置できるFacebook公式プラグイン「Facebook」を紹介します。

最近ベータ版がリリースされた「Recommendations Bar」もさくっと表示できました(下のスクリーンショットは空記事のブログで試したものなので何も表示されてなくて正常です)。

WordPress管理画面

1.機能

このプラグインを利用すれば、WoprdPressにソーシャルプラグインを簡単に表示できるようになります。

WordPress管理画面

具体的には次のものが設定できるようです(バージョンは1.0.2)。

  • Social Publisher(タイムラインやFacebookページへの投稿)
  • Like Button
  • Subscribe Button
  • Send Button
  • Comments
  • Recommendations Bar

以下、設定方法です。

2.インストール

WordPress管理画面で「プラグイン」→「新規追加」をクリック。

WordPress管理画面

「facebook」で検索。

検索

「Facebook」の「いますぐインストール」をクリック。

検索結果

「プラグインを有効化」をクリック。

インストール完了

3.設定

プラグイン一覧にある「Facebook」の「設定」をクリック。

プラグイン一覧

Step1として、Facebookアプリケーションの新規作成を行います。なおアプリを初めて作成する場合、事前にデベロッパー登録を行う必要があります。

Facebookアプリ一覧のページにある「新しいアプリを作成」をクリック。

アプリ一覧

「App Name」に任意の名称、「App Namespace」に任意の半角文字列を入力して「続行」をクリック。「App Namespace」は自分または他のユーザーが作成したものと重複していない文字列を設定します。

新規作成

何を設定していいのか分からない場合は、Step1の一番下に設定値のサンプルが表示されているので、それをそのまま入力すればいいでしょう。

サンプル

セキュリティコードを入力して「送信」をクリック。

セキュリティコード

これでアプリが作成されました。

アプリ

Step2で設定を行います。Step2の以下の部分の値をそのまま利用します。

Step2

アプリ作成直後に表示された基本設定画面の「App Domains:」「サイトURL:」「Mobile Web URL:」に、上の値をそのまま設定して「変更を保存」をクリック。

基本設定

最後にStep3として、WordPressのプラグイン設定画面に「App ID」「App secret」「App namespace」を設定して「変更を保存」をクリック。「App ID」「App secret」は先程の基本設定画面の上部にあります。「App namespace」はアプリ作成時の「namespace」です。

基本設定

設定が完了すると次の画面が表示されます。

設定画面

4.ソーシャルプラグインの設置

ためしに「Like Button」を設定してみます。

「Like Button」のチェックボックスをチェック。

設定画面

詳細設定のフォームが表示されるので適宜設定して、画面一番下の「変更を保存」をクリック。これで設定完了です。

設定画面

設定前後のページを比較してみました。

設定前の記事ページ
設定前の記事ページ

設定後の記事ページ(本文の前後にいいね!ボタンを表示)
設定後の記事ページ

以上です。

もしかしたらもっといいプラグインがあるかもしれませんが、Facebook公式版ということで安心感がありますね。

関連記事
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)