記事の詳細

WordPressで新しい記事を投稿するとき、Facebookにもブログの更新情報を連動させたいときは、「Wordbooker」というプラグインを使うと便利です。「Wordbooker」を導入して設定しておくだけで、自動でブログの更新情報をFacebookのウォールに流してくれます。これでブログを「いいね」してくれた人にも更新情報を素早く伝えることができます。

インサイトという解析ツールを導入すれば、自分のブログのFacebookでの反応を知ることができます。さらに、OGPを設定しておくことで「いいね!」を押してくれた方のページに表示される画像や説明を最適化してわかり易くすることができます。

「Wordbooker」の導入・設定する方法

1.WordPressのダッシュボードから「プラグイン」「新規追加」をクリックして「Wordbooker」を検索します。

2.「Wordbooker」が見つかるので「いますぐインストール」の文字をクリックします。

3.インストールが完了するので「プラグインを有効化」します。これでWordpress管理画面の「設定」に「Wordbooker」が追加されます。

4.WordPressの管理画面から「設定」「Wordbooker」を開いて、「Wordbookerを認可してください」の文字をクリックします。

5.Facebookのページに飛ぶのでログインします。

6.以下のような画面が表示されるので「OK」ボタンを押します。

7.「代わりに公開で投稿する許可を求めています」と表示されるので「OK」ボタンを押します。

8.「Facebookページを管理することを求めています」と表示されるので「OK」ボタンを押します。

9.「Wordbooker」の設定ページに戻ってきます。「ページを更新」ボタンが表示されるのでクリックします。これで様々な設定が可能になります。

「Wordbooker」の設定方法

「Wordbooker」でWordPressとFacebookを連動させるために、私が行った設定は以下のような感じです。

投稿全般設定

  • 基本は一般ウォールに投稿します ⇒ チェックを入れます
  • 以下の文言を投稿します ⇒ Facebook投稿時に1行目に表示される文(お好みで変更してください)
  • 共有リンクの拡張説明を有効にする ⇒ チェックを入れます

上級者設定

  • ウォールにブログの説明ではなくサイトリンクを使う ⇒ チェックを入れます
  • オープングラフタグのインラインプロダクションの利用不可 ⇒ 別でOGP設定を行う場合はチェック

とりあえず、ここまで設定したら「ブログ全体の設定を保存します」ボタンをクリックします。次にユーザーレベルの設定を以下のように変更しました。

ユーザーレベル設定

  • 基本は一般ウォールに投稿します ⇒ Yes
  • 次のウォールに投稿します ⇒ Facebookページを選択してチェック
  • 以下のステータスを見る ⇒ Facebookページに変更

この設定でブログの記事を投稿すると、Facebookのウォールには以下のように自動で更新情報が流れます。

反応を分析するための、Facebookインサイト導入手順

Facebookのインサイトとは、自分のブログ上で「いいね!」を押してもらった回数や、シェアされた記事のインプレッション数(表示回数)などを調べて分析することができるFacebookの解析ツールです。

Facebookインサイトを導入するには、まず下のURLにアクセスします。

ログイン画面が表示されるので、Facebookにログインします。

「ウェブサイトのインサイト」ボタンをクリックします。

「ドメイン」に自分のブログのドメインを記入して、表示されているメタタグをコピーしてWordpressブログの「header.php」内に貼り付けます。コードを貼り付けたら「インサイトを取得」ボタンを押します。

これで「いいね!」の回数やシェア数などの情報を知ることができるようになります。

WordPressブログにFacebookのOGPを設定する方法

OGPとは「Open Graph Pro」の略で、FacebookなどのSNSでシェアされたときに、自分のサイトの内容を相手のタイムライン上でわかり易く伝えるための情報です。

※作業を行う際は自己責任で、必ずバックアップを取った上で行ってください。

設定方法に関しては、以下のサイト様を参考にさせていただきました。

とてもわかりやすくて助かりました。ありがとうございます!

まずはheader.phpのコード

<html xmlns="http://www.w3.org/1999/xhtml">

を以下のように変更しました。

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

HTML5のサイトであれば以下タグを使います。

<html lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

次に「OGP用のコード」を追加します。

<!-- ここからOGP -->
<meta property="fb:admins" content="○○○○○" /><!-- 自分のFacebookアカウントに対応するid -->
<meta property="og:type" content="blog">
<?php
if (is_single()){//単一記事ページの場合
     if(have_posts()): while(have_posts()): the_post();
          echo '<meta property="og:description" content="'.get_post_meta($post->ID, _aioseop_description, true).'">';echo "\n";//抜粋を表示
     endwhile; endif;
     echo '<meta property="og:title" content="'; the_title(); echo '">';echo "\n";//単一記事タイトルを表示
     echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "\n";//単一記事URLを表示
} else {//単一記事ページページ以外の場合(アーカイブページやホームなど)
     echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログの説明文を表示
     echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログのタイトルを表示
     echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログのURLを表示
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<?php
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿にイメージがあるか調べる
if (is_single()){//単一記事ページの場合
if (has_post_thumbnail()){//投稿にサムネイルがある場合の処理
     $image_id = get_post_thumbnail_id();
     $image = wp_get_attachment_image_src( $image_id, 'full');
     echo '<meta property="og:image" content="'.$image[0].'">';echo "\n";
} else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {//投稿にサムネイルは無いが画像がある場合の処理
     echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";
} else {//投稿にサムネイルも画像も無い場合の処理
     echo '<meta property="og:image" content="●●●●●">';echo "\n";
}
} else {//単一記事ページページ以外の場合(アーカイブページやホームなど)
     echo '<meta property="og:image" content="●●●●●">';echo "\n";
}
?>
<!-- ここまでOGP -->

当ブログの場合、アイキャッチ画像がFacebookが推奨しているサイズ(200×200px)より小さいので、画像の部分だけ200×200pxのものを用意して固定にしました。

<!-- ここからOGP -->
<meta property="fb:admins" content="○○○○○" /><!-- 自分のFacebookアカウントに対応するid -->
<meta property="og:type" content="blog" />
<?php
if (is_single()){//投稿記事の場合
     if(have_posts()): while(have_posts()): the_post();
          echo '<meta property="og:description" content="'.get_post_meta($post->ID, _aioseop_description, true).'" />';echo "\n";//抜粋を表示
     endwhile; endif;
     echo '<meta property="og:title" content="'; the_title(); echo '" />';echo "\n";//投稿記事タイトルを表示
     echo '<meta property="og:url" content="'; the_permalink(); echo '" />';echo "\n";//投稿記事URLを表示
} else {//投稿記事以外の場合(アーカイブページやホームなど)
     echo '<meta property="og:description" content="'; bloginfo('description'); echo '" />';echo "\n";//「一般設定」管理画面で指定したブログの説明文を表示
     echo '<meta property="og:title" content="'; bloginfo('name'); echo '" />';echo "\n";//「一般設定」管理画面で指定したブログのタイトルを表示
     echo '<meta property="og:url" content="'; bloginfo('url'); echo '" />';echo "\n";//「一般設定」管理画面で指定したブログのURLを表示
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:image" content="●●●●●" />
<!-- ここまでOGP -->

「content=”○○○○○“」の○○○○○の部分にはFacebookのIDを入力します。私の場合、Facebookインサイトを導入したときのメタタグをそのまま使っています。(エラーが出てないからたぶん大丈夫?)

「content=”●●●●●“」の●●●●●の部分には、表示させたい画像のURLを指定してください。

設定した項目にエラーがないかを確認するには、以下のサイトにURLを入力して「デバッグ」ボタンを押してください。

当ブログのトップページをデバッグしてみると、以下のように表示されました。

他の記事もデバッグしてみましたが、特にエラーも表示されないのでこれで大丈夫かなと思います。



関連記事

ページ上部へ戻る