WordPress Facebook 関連プラグインの比較
相当難儀しました。
全ては Facebook の公式プラグインが悪いんです。
あいつが src=” なんて挟むから…。
（詳しくはこちら → 「WordPress の Facebook 公式プラグイン入れてると YSlow が上がらない？」）
それで急遽 OGP を改めて入れなきゃならなくなったんですけど、試しまくりました。
● Jetpack におまかせ
まず、何もしない何も足さない方法。
Jetpack でやりたいところですが、こいつ、Facebook のウォールか Facebook ページかどっちかしかパブリサイズできない。
どっちにもポストしたいんだよね。
よって、Jetpack を使う線は却下。
でもこの状態でソースを見るとなぜか OGP のタグが付いてきます。しかもなんか中途半端な感じで。
[html collapse=”true”]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta property="og:type" content="article">
<meta property="og:title" content="WordPress 2段階認証（Google Authenticator）の導入">
<meta property="og:url" content="http://insideofpapaya.com/tech/wordpress-2%e6%ae%b5%e9%9a%8e%e8%aa%8d%e8%a8%bc%ef%bc%88google-authenticator%ef%bc%89%e3%81%ae%e5%b0%8e%e5%85%a5/">
<meta property="og:description" content="最近またセキュリティとかうるさいじゃないすか。 このブログを置いている XSERVER も国外IPアドレスから…">
<meta property="og:site_name" content="Inside of Papaya">
<meta property="og:image" content="http://insideofpapaya.com/wordpress/wp-content/uploads/2013/04/wordpress_google_authentication.png">
<meta name="description" content="WordPress にグーグルの2段階認証システムを組み込みました。Google Authenticator というプラグインを紹介します。">
<meta name="generator" content="WordPress 3.5.1">
<meta name="keywords" content="wordpress, google, 2-step verification, authenticator, ios, 2段階認証,2-step verification,2段階認証,authenticator,google,ios">
<meta name="syntaxhighlighter-version" content="3.1.5">
<title>WordPress 2段階認証（Google Authenticator）の導入</title>
[/html]
Jetpack が OGP タグ出してるようです。
Jetpack はこの際 OGP からは撤退してもらいます。
テーマファイルの function.php に↓を入れます。
（こちらを参考にさせていただきました → 『[Å] JetpackとOGP指定プラグインを同時に使うと二重指定！？OGPを削除する方法』）
[php]
// remove jetpack open graph tags
remove_action(‘wp_head’,’jetpack_og_tags’);
[/php]
これでも meta tag は少し付いてくるのですが、気にせず次にいきましょう。
● プラグイン 1. Add Link to Facebook
110万ダウンロードされてるプラグイン。
かなり細く設定できます。
適宜設定して、テスト投稿で試してみました。
まず、このプラグインでは Facebook のタイムラインとページの両方を更新できないっぽい？
ちなみに Facebook ページの見え方はこんな感じ↓
画像の前に excerpt は要らないかな。んー、もう少し。
ソースの OGP タグはこんな感じ↓
[html collapse=”true”]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta property="og:title" content="OGPのテストです">
<meta property="og:type" content="article">
<meta property="og:image" content="http://insideofpapaya.com/wordpress/wp-content/uploads/2013/04/wordpress_google_authentication-300×100.png">
<meta property="og:url" content="http://insideofpapaya.com/tech/ogp%e3%81%ae%e3%83%86%e3%82%b9%e3%83%88%e3%81%a7%e3%81%99/">
<meta property="og:site_name" content="Inside of Papaya">
<meta property="og:description" content="WP plugin "Add Link to Facebook" のテストです。
テスト画像">
<meta property="fb:app_id" content="511462422236744">
<meta property="og:locale" content="en_US">
<meta name="description" content="詳細 AIOSEOP">
<meta name="generator" content="WordPress 3.5.1">
<meta name="keywords" content="ogp, test,test">
<meta name="syntaxhighlighter-version" content="3.1.5">
<title>OGPのテストです AIOSEOP</title>
[/html]
fb:admins が入ってない、
locale が en_US になっている、
og:description が excerpt になっている（All In One SEO Pack の description を持ってきてほしい）、
あたりが気になります。
でも、このプラグイン、OGP タグを外すこともできるので、そこは応用効くかな。
Facebook Developers のデバッガーにかけると、”Small og:image” の警告が出ます。
次いってみよう！
● プラグイン 2. Simple Facebook Connect
60万ダウンロードのプラグイン。
Facebook ページを「ファンページ」って未だに言ってるのが気になるな。
適宜設定して試してみました。
普通に記事を投稿した後で Facebook にマニュアルで投稿する仕掛けです。
これはタイムラインとページ両方投稿できるな。
Facebookページの見た目はこんな感じ↓
見た目は悪くない。
OGP タグはこんな感じ↓
[html collapse=”true”]
<!DOCTYPE html>
<html xmlns:fb="http://ogp.me/ns/fb#" xmlns:og="http://ogp.me/ns#" lang="ja">
<head>
<meta charset="UTF-8">
<meta property="og:type" content="article">
<meta property="og:title" content="OGPのテストです">
<meta property="og:url" content="http://insideofpapaya.com/tech/ogp%e3%81%ae%e3%83%86%e3%82%b9%e3%83%88%e3%81%a7%e3%81%99-2/">
<meta property="og:description" content="Simple Facebook Connect のテストです。 テスト画像 Related Posts2013/03/21 — Facebook for WordPress の OGP 設定、むかつく2012/11/09 — Jetpack やったか？2013/03/28 — ブログでの social sharing（AddThis の紹介と はてブの追加）2013/04/14 — WordPress の Facebook 公式プラグイン入れてると YSlow が上がらない？2013/04/10 — WordPress WPTouch でアフィリエイト（AdSense と nend）Edit Related Posts">
<meta property="og:site_name" content="Inside of Papaya">
<meta property="fb:app_id" content="511462422236744">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="http://insideofpapaya.com/wordpress/wp-content/uploads/2013/04/wordpress_google_authentication.png">
<meta property="og:image" content="http://insideofpapaya.com/wordpress/wp-content/uploads/2013/04/wordpress_login.png">
<meta property="og:image" content="http://insideofpapaya.com/wordpress/wp-content/uploads/2013/03/images-4.jpg">
<meta property="og:image" content="http://insideofpapaya.com/wordpress/wp-content/uploads/2012/11/jetpack_wide_thumb.jpg">
<meta property="og:image" content="http://insideofpapaya.com/wordpress/wp-content/uploads/2013/03/AddThis_logo.jpg">
<meta property="og:image" content="http://insideofpapaya.com/wordpress/wp-content/uploads/2013/04/wordpress_facebook_yslow.png">
<meta property="og:image" content="http://insideofpapaya.com/wordpress/wp-content/uploads/2013/04/b5f07a1155103dacb286b8547b7e470a.png">
<meta name="description" content="詳細 AIOSEOP">
<meta name="generator" content="WordPress 3.5.1">
<meta name="keywords" content="ogp, test,test">
<meta name="syntaxhighlighter-version" content="3.1.5">
<title>OGPのテストです AIOSEOP</title>
[/html]
og:description になんか関係ないことまでくっついてる、
locale が en_US、
fb:admins がない、
og:image ってこんなに書いてもいいの？
あたりが気になります。
デバッガーにかけると、”og:image should be larger” の警告が出ます。
んー、やっぱ og:description が気になるなぁ。
※ 9/5/2013 追記
このプラグインですが WordPress のリポジトリから消えたようです。
● プラグイン 3. Wordbooker
50万ダウンロードのプラグイン。
たぶん日本で一番紹介されている Facebook のプラグイン。
これも設定後お試し。
タイムラインもページも更新できます。
Facebook ページでの見た目はこんな感じ。
悪くない。
OGP タグはこんな感じ↓
[html collapse=”true”]
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#" >
<head>
<meta charset="UTF-8">
<meta property="og:locale" content="en_US">
<meta property="og:site_name" content="Inside of Papaya – Cheating on WordPress">
<meta property="fb:admins" content="100001308143651">
<meta property="og:type" content="article">
<meta property="og:title" content="OGPのテストです。">
<meta property="og:url" content="http://insideofpapaya.com/tech/ogp%e3%81%ae%e3%83%86%e3%82%b9%e3%83%88%e3%81%a7%e3%81%99%e3%80%82/">
<meta property="og:image" content="http://insideofpapaya.com/wordpress/wp-content/uploads/2013/04/wordpress_google_authentication.png">
<meta property="og:description" content="Wordbooker のテストです。 テスト画像">
<meta name="description" content="詳細 AIOSEOP,Wordbooker のテストです。 テスト画像">
<meta name="generator" content="WordPress 3.5.1">
<meta name="keywords" content="ogp, test,test">
<meta name="syntaxhighlighter-version" content="3.1.5">
<title>OGPのテストです AIOSEOP</title>
[/html]
fb:add_id が入ってない、
locale が en_US、
ぐらいかな。
Facebook Developers デバッガーの警告も出ません。
いい感じ。
このプラグインを元に少し弄ってあげよう。
＜修正＞
まず、wordbooker/wordbooker.php の中で “en_US” になっている部分を全て “ja_JP” にします。
次に同ファイルで “fb:admins” が書かれている辺りの下に “fb:app_id” を追加してあげます。
（ハードコーディングしちゃった）
こんな感じ↓
[php collapse=”true” highlight=”14, 15″]
if (isset($wordbooker_settings[‘wordbooker_fb_comments_admin’])) {
$xxx=wordbooker_get_cache(-99,’facebook_id’,1);
if (!is_null($xxx)) {
echo ‘<meta property="fb:admins" content="’.$xxx.’" /> ‘;
}
} else {
$xxx=wordbooker_get_cache( $wpuserid,’facebook_id’,1);
if (!is_null($xxx->facebook_id)) {
echo ‘<meta property="fb:admins" content="’.$xxx->facebook_id.’" /> ‘;
}
}
}
// added 4.17.2013
echo ‘<meta property="fb:app_id" content="511462422236744" /> ‘;
if (strlen($wordbooker_settings["fb_comment_app_id"])>6) {
echo ‘<meta property = "fb:app_id" content = "’.$wordbooker_settings["fb_comment_app_id"].’" /> ‘;
}
[/php]
これで OK! ソースを見ると…↓
[html collapse=”true”]
<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#" >
<head>
<meta charset="UTF-8">
<meta property="og:locale" content="ja_JP">
<meta property="og:site_name" content="Inside of Papaya – Cheating on WordPress">
<meta property="fb:admins" content="100001308143651">
<meta property="fb:app_id" content="511462422236744">
<meta property="og:type" content="article">
<meta property="og:title" content="OGPのテストです。">
<meta property="og:url" content="http://insideofpapaya.com/tech/ogp%e3%81%ae%e3%83%86%e3%82%b9%e3%83%88%e3%81%a7%e3%81%99%e3%80%82/">
<meta property="og:image" content="http://insideofpapaya.com/wordpress/wp-content/uploads/2013/04/wordpress_google_authentication.png">
<meta property="og:description" content="Wordbooker のテストです。 テスト画像">
<meta name="description" content="詳細 AIOSEOP,Wordbooker のテストです。 テスト画像">
<meta name="generator" content="WordPress 3.5.1">
<meta name="keywords" content="ogp, test,test">
<meta name="syntaxhighlighter-version" content="3.1.5">
<title>OGPのテストです AIOSEOP</title>
[/html]
おっ！かなりいい感じ！これで行こう！
手修正したついでにもうひとつ。
Facebook に投稿された内容を見ると、一般設定の「キャッチフレーズ（description）」が単独で出てるのよね。
これはちょっとアレなんで、ブログ名を加えました。
触るのは同じく wordbooker/wordbooker.php の wordbooker_fbclient_publishaction() という関数の中。
こんな感じで↓
[php collapse=”true” highlight=”6,7″]
if (isset($wordbooker_settings[‘wordbooker_use_url_not_slug’]))
{
$wordbooker_fb_post[‘caption’] = get_bloginfo(‘url’);
}
// added 4.17.2013
$wordbooker_fb_post[‘caption’] = get_bloginfo(‘name’) . ‘ – ‘ . get_bloginfo(‘description’);
$wordbooker_fb_post[‘caption’]=wordwrap($wordbooker_fb_post[‘caption’],900);
wordbooker_debugger("Post Titled : ",$post_data[‘post_title’],$post_id,90) ;
wordbooker_debugger("Post URL : ",$post_data[‘post_link’],$post_id,90) ;
wordbooker_debugger("Post Caption : ",$wordbooker_fb_post[‘caption’],$post_id,90) ;
[/php]
ほれ↓
これで自分好みの見え方になったので、全て OK とします。
は～、疲れた…。
★ おまけ
実は上記の方法以外にも試しています。
ひとつはプラグイン、もうひとつは OGP を手書きするやり方。
プラグインは “WP Facebook Open Graph Protocol” というやつ。
これは結構きれいな OGP を吐きます。
最初はこれでいいやって思ったくらい。
次は、手書き。
プラグインを入れずにテーマファイル header.php の
（ソースはこちらのサイトから頂戴しました → 『[WordPress] Open Graph Proを今すぐ停止し、プラグインを使わずにFacebookのOGPを設定すべし』）
先頭の html タグを
[html]
<html lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
[/html]
に変え、↓を head 部にぶっこむ！
[html collapse=”true”]
<!– ここからOGP –>
<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を表示
}
$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="http://insideofpapaya.com/wordpress/wp-content/uploads/2013/02/IMG_0601.gif">’;echo "\n";
}
}
else { //単一記事ページページ以外の場合（アーカイブページやホームなど）
echo ‘<meta property="og:image" content="http://insideofpapaya.com/wordpress/wp-content/uploads/2013/02/IMG_0601.gif">’;echo "\n";
}
?>
<meta property="og:site_name" content="<?php bloginfo(‘name’); ?>">
<meta property="fb:admins" content="100001308143651">
<meta property="fb:app_id" content="511462422236744">
<meta property="og:locale" content="ja_JP" />
<!– ここまでOGP –>
[/html]
これはかなりいい感じ。素敵やん。
でも2つとも残念なことに Facebook にクロスポストするところまではやってくれないんです。
この2つの方法と IFTTT の組み合わせも試しましたが、どうもうまくいかん。
ていうか、うっとこの WordPress の環境だと IFTTT はサイトを認識してくれませんでした。
feed 使うやり方も見栄えがイマイチ。
dlvr.it も試してみましたが、無料だと3つまでしかデリバーしてくれないんですよね。見栄えはいいんだけど。
dlvr.it が全て無料なら Twitter や LinkedIn 含めてそっちで流してたかもしれない。
でも、これはコッチ、あれはアッチっていうクロスポストのやり方はスマートではない気がしてやめました。
あ、あと “Open Graph Pro” っていうプラグインもありましたね。
でもここしばらく全く更新されていないのと、バグが知られているので、使うのやめました。
結局、Wordbooker に行き着きました。
しばらくこれで運用してみます。
Fatal error: Uncaught Error: Call to undefined function related_posts() in /home/insidepapaya/insideofpapaya.com/public_html/wordpress/wp-content/themes/hueman-child/single.php:71 Stack trace: #0 /home/insidepapaya/insideofpapaya.com/public_html/wordpress/wp-includes/template-loader.php(106): include() #1 /home/insidepapaya/insideofpapaya.com/public_html/wordpress/wp-blog-header.php(19): require_once('/home/insidepap...') #2 /home/insidepapaya/insideofpapaya.com/public_html/index.php(17): require('/home/insidepap...') #3 {main} thrown in /home/insidepapaya/insideofpapaya.com/public_html/wordpress/wp-content/themes/hueman-child/single.php on line 71