WordPress Facebook 関連プラグインの比較
相当難儀しました。
全ては Facebook の公式プラグインが悪いんです。
あいつが src= » なんて挟むから…。
（詳しくはこちら → 「WordPress の Facebook 公式プラグイン入れてると YSlow が上がらない？」）
それで急遽 OGP を改めて入れなきゃならなくなったんですけど、試しまくりました。
● Jetpack におまかせ
まず、何もしない何も足さない方法。Jetpack でやりたいところですが、こいつ、Facebook のウォールか Facebook ページかどっちかしかパブリサイズできない。
どっちにもポストしたいんだよね。
よって、Jetpack を使う線は却下。
でもこの状態でソースを見るとなぜか OGP のタグが付いてきます。しかもなんか中途半端な感じで。
<!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>
Jetpack が OGP タグ出してるようです。
Jetpack はこの際 OGP からは撤退してもらいます。
テーマファイルの function.php に↓を入れます。
（こちらを参考にさせていただきました → 『[Å] JetpackとOGP指定プラグインを同時に使うと二重指定！？OGPを削除する方法』）
// remove jetpack open graph tags
remove_action('wp_head','jetpack_og_tags');
これでも meta tag は少し付いてくるのですが、気にせず次にいきましょう。
● プラグイン 1. Add Link to Facebook
110万ダウンロードされてるプラグイン。かなり細く設定できます。
適宜設定して、テスト投稿で試してみました。
まず、このプラグインでは Facebook のタイムラインとページの両方を更新できないっぽい？
ちなみに Facebook ページの見え方はこんな感じ↓
画像の前に excerpt は要らないかな。んー、もう少し。
ソースの OGP タグはこんな感じ↓
<!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-300x100.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>
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 タグはこんな感じ↓
<!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>
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 タグはこんな感じ↓
<!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>
fb:add_id が入ってない、
locale が en_US、
ぐらいかな。
Facebook Developers デバッガーの警告も出ません。
いい感じ。
このプラグインを元に少し弄ってあげよう。
＜修正＞
まず、wordbooker/wordbooker.php の中で « en_US » になっている部分を全て « ja_JP » にします。
次に同ファイルで « fb:admins » が書かれている辺りの下に « fb:app_id » を追加してあげます。
（ハードコーディングしちゃった）
こんな感じ↓
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"].'" /> ';
}
これで OK! ソースを見ると…↓
<!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>
おっ！かなりいい感じ！これで行こう！
手修正したついでにもうひとつ。
Facebook に投稿された内容を見ると、一般設定の「キャッチフレーズ（description）」が単独で出てるのよね。
これはちょっとアレなんで、ブログ名を加えました。
触るのは同じく wordbooker/wordbooker.php の wordbooker_fbclient_publishaction() という関数の中。
こんな感じで↓
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) ;
ほれ↓
これで自分好みの見え方になったので、全て OK とします。
は～、疲れた…。
★ おまけ
実は上記の方法以外にも試しています。ひとつはプラグイン、もうひとつは OGP を手書きするやり方。
プラグインは « WP Facebook Open Graph Protocol » というやつ。
これは結構きれいな OGP を吐きます。
最初はこれでいいやって思ったくらい。
次は、手書き。
プラグインを入れずにテーマファイル header.php の ～ に直接コーディングする方法です。
（ソースはこちらのサイトから頂戴しました → 『[WordPress] Open Graph Proを今すぐ停止し、プラグインを使わずにFacebookのOGPを設定すべし』）
先頭の html タグを
<html lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
に変え、↓を head 部にぶっこむ！
<!-- ここから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 -->
これはかなりいい感じ。素敵やん。
でも2つとも残念なことに Facebook にクロスポストするところまではやってくれないんです。
この2つの方法と IFTTT の組み合わせも試しましたが、どうもうまくいかん。
ていうか、うっとこの WordPress の環境だと IFTTT はサイトを認識してくれませんでした。
feed 使うやり方も見栄えがイマイチ。
dlvr.it も試してみましたが、無料だと3つまでしかデリバーしてくれないんですよね。見栄えはいいんだけど。
dlvr.it が全て無料なら Twitter や LinkedIn 含めてそっちで流してたかもしれない。
でも、これはコッチ、あれはアッチっていうクロスポストのやり方はスマートではない気がしてやめました。
あ、あと « Open Graph Pro » っていうプラグインもありましたね。
でもここしばらく全く更新されていないのと、バグが知られているので、使うのやめました。
結局、Wordbooker に行き着きました。
しばらくこれで運用してみます。
