WordPressの「Wordbookerプラグイン」を使ったFacebookウォール投稿とタイトル・画像を自由に設定できるようにするためのカスタマイズ

WordPressの「Wordbookerプラグイン」を使ったFacebookウォール投稿とタイトル・画像を自由に設定できるようにするためのカスタマイズ

Posted at December 16,2011 1:55 AM
Tag:[Facebook, Wordbooker, WordPress]

WordPressでFacebookと連携させる「Wordbookerプラグイン」を使って、記事投稿と連動してFacebookページにウォール投稿を行う方法と、その際にタイトルと画像を自由に設定できるようにするためのカスタマイズを紹介します。

下のスクリーンショットの例では、「WordPressのTwenty Elevenテーマについて解説します。」という部分と本文左のTwenty Elevenテーマの画像について、記事ごとに自由に設定できるようになります。

ウォール投稿

あわせて、Wordbookerプラグインの簡単な設定についても解説します。

1.Wordbookerプラグインとウォール投稿時の問題について

「Wordbooker」はWordPressとFacebookの連携を行うためのプラグインです。主に次のような機能があります。

  • 記事投稿や固定ページ投稿投稿と同時にFacebookにウォール投稿する
  • 記事などにいいね!ボタンを表示する
  • Facebookコメントを表示する
  • OGPを出力する

WordPressのFacebook関連プラグインは他にもいくつかあるようですが、ネットで調べると、設定後確実に動作するという点で、このプラグインの評判がいいようです。

機能も非常に豊富ですが、ウォール投稿に限っては、

  • 投稿時のタイトルを記事単位で設定できない
  • 画像はOGPの画像を利用する

といった仕様になっているようで、やや柔軟性に欠けています。ということで、カスタマイズまで含めた利用方法について紹介します。

なおプラグインの設定項目が非常に多いため、本エントリーでは最低限の設定にとどめています。

2.プラグインのダウンロード

画面はWordPress3.3を使っています。

プラグインの「新規追加」をクリック。

新規追加

フォームに「Wordbooker」を入力して「プラグインの検索」をクリック。

プラグインの検索

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

いますぐインストール

「インストールが完了しました」が表示されればOKです。つづけて「プラグインを有効化」をクリック。

プラグインを有効化

これでインストールされました。

3.プラグインの設定

ここではFacebookページに投稿するための最低限の設定を紹介します。

「設定」→「WordBooker」を選択。

WordBooker

「Connect with Facebook」をクリック。

Connect with Facebook

「ログイン」をクリック。

ログイン

「許可する」をクリック。

許可

「Reload Page」をクリック。このあと設定項目画面が表示されます。

Reload Page

記事投稿時にFacebookページのウォールに投稿できるようにするには、「User Level Settings」を設定します。「Blog Level Settings」の「General Posting Options」でも設定できます。

WordBooker

  • Default Publish Post to Facebook :Yes
  • Default Publish Page to Facebook :No
  • Post to the following Wall :投稿するFacebookページを選択し、「As a Wall Post」を選択した状態でチェックボックスをチェック

この状態で記事投稿を行えば、選択したFacebookページのウォールにも投稿されます。ちなみに「Post Attribute :」が投稿時のタイトルになりますが、ここでは次のカスタマイズ前提なので設定していません。

4.ウォール投稿時のタイトルと画像を自由に設定できるようにする

ここではカスタムフィールドを使って、ウォール投稿時のタイトルと画像を自由に設定する方法を紹介します。

まず、プラグインファイルwp-content/plugins/wordbooker/wordbooker.phpを任意のエディタで開き、次の変更を行います。バージョン2.0.9では1345行目あたりです。

変更前

…前略…
function wordbooker_fbclient_publishaction($wbuser,$post_id) 
{    
    …かなり中略…
    $post_data = array(
        'media' => $images,
        'post_link' => $post_link,
        'post_link_share' => $post_link_share,
        'post_title' => $post_title,
        'post_excerpt' => $post_content,
        'post_attribute' => $post_attribute,
    #    'post_full_text' => $post->post_content,
        'post_id'=>$post->ID,
        'post_date'=>$post->post_date
        );
    …後略…

変更後(青色を追加、赤色を変更)

…前略…
function wordbooker_fbclient_publishaction($wbuser,$post_id) 
{    
    …かなり中略…
    $images[0]['src'] = post_custom('facebook_image');
    $post_data = array(
        'media' => $images,
        'post_link' => $post_link,
        'post_link_share' => $post_link_share,
        'post_title' => $post_title,
        'post_excerpt' => $post_content,
        'post_attribute' => post_custom('facebook_title'),
    #    'post_full_text' => $post->post_content,
        'post_id'=>$post->ID,
        'post_date'=>$post->post_date
        );
    …後略…

修正後、元のディレクトリに上書きアップロードしてください。

続いてカスタムフィールドの設定を行います。記事投稿画面にカスタムフィールドが表示されていない場合、管理画面右上にある「表示オプション」をクリック。

表示オプション

「カスタムフィールド」をチェックすれば表示されます。

カスタムフィールド

カスタムフィールドの内容は次のように設定します。

WordBooker

「facebook_title」にウォールに投稿するときのタイトル、「facebook_image」にウォールに投稿するときの画像のURLを設定します。記事に追加した画像のURLは、画像編集画面の「リンクURL(ファイルのURL)」から取得できます。

これで次のように投稿されます。

ウォール投稿

ウォール投稿タイトルをカスタムフィールドでなく、「抜粋」フィールドを利用する場合は、次のように変更するとよいでしょう(赤色部分)。

…前略…
function wordbooker_fbclient_publishaction($wbuser,$post_id) 
{    
    …かなり中略…
    $images[0]['src'] = post_custom('facebook_image');
    $post_data = array(
        'media' => $images,
        'post_link' => $post_link,
        'post_link_share' => $post_link_share,
        'post_title' => $post_title,
        'post_excerpt' => $post_content,
        'post_attribute' => $post->post_excerpt,
    #    'post_full_text' => $post->post_content,
        'post_id'=>$post->ID,
        'post_date'=>$post->post_date
        );
    …後略…

上記の$post_dataに設定している配列データがウォール投稿時のデータに対応するので、この辺りをごにょごにょすれば他の項目も色々カスタマイズできると思います。

2013.01.01
カスタムフィールドの表示方法を追加しました。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


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

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

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

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