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.