WordPress Facebook 関連プラグインの比較

相当難儀しました。

全ては Facebook の公式プラグインが悪いんです。
あいつが src= » なんて挟むから…。

(詳しくはこちら → 「WordPress の Facebook 公式プラグイン入れてると YSlow が上がらない?」)

それで急遽 OGP を改めて入れなきゃならなくなったんですけど、試しまくりました。

Jetpack におまかせ
まず、何もしない何も足さない方法。
Jetpack でやりたいところですが、こいつ、Facebook のウォールか Facebook ページかどっちかしかパブリサイズできない。
どっちにもポストしたいんだよね。

jetpack_publicize_FBwall_or_page

よって、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万ダウンロードされてるプラグイン。
かなり細く設定できます。

AddLinkToFacebook_setting

適宜設定して、テスト投稿で試してみました。

まず、このプラグインでは Facebook のタイムラインとページの両方を更新できないっぽい?
ちなみに Facebook ページの見え方はこんな感じ↓

AddLinkToFacebook_appearance

画像の前に 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ページの見た目はこんな感じ↓

SimpleFacebookConnect_appearance

見た目は悪くない。

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 ページでの見た目はこんな感じ。

Wordbooker_appearance

悪くない。

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) ;

ほれ↓

wordbooker_facebook_appearance

これで自分好みの見え方になったので、全て 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 に行き着きました。
しばらくこれで運用してみます。


Leave your comment

papaya

This is blog what is the inside of Papaya. Hum... nobody wants that, neither do I, maybe. I think with or without my empty brain and sometimes write down here.