ブログとFacebookの連携成功からブログパーツ設置までの発狂したアレコレ

Facebookへの更新通知設定で手こずる

私がFacebookを始めた最大の理由は「Facebookページを作りたかったから」。

なので先日、Facebookに登録し、Facebookページも作りました。何一つ凝った要素のない質素なページですけどね。

http://rikumalog.com/2012/02/facebook/startfacebook/

で、ブログ記事を更新したらTwitterに更新情報をアップするのと同じように、Facebookにも更新情報をアップできるよう改造を加えたのですが、これが予想以上に手こずった

まず、WordPressのプラグイン「Open Graph Pro」をインストール。これはブログからFacebookへ渡す「OGP(Open Graph Protocol)」という情報を認識してもらうための設定だと思ってください。

プラグインOpen Graph Pro

「Set Object Type to」欄は「Blog」と指定。このブログは記事に必ずアイキャッチ画像(トップページで記事の左側に表示されている、記事を代表する画像のことです)を登録するお約束にしているので、画像に関する指定は空白のまま。あとはFacebookのユーザーIDを指定。それだけです。

次に「このブログではOGPを使ってるよ~」ってのを宣言するため、HTMLタグを1行だけ変更。

修正したのは2行目のみ。<html>タグにxmlns属性ってのを追加してあげればいいんですって。

ここまでの準備が終わってから、いよいよブログ記事投稿と同時に更新情報をFacebookに投げてやる方法に着手。使うことに決めたプラグインは「Wordbooker」。

「Wordbooker」をインストール後、設定を完了させ(これ全部書くと長すぎるので今回は割愛)、実際に記事をアップしてからFacebookを確認してみました。

Wordbooker設定直後の画面

おお~、できてるじゃ~ん!

重複エラーが解消できず発狂する

しかし数日後。異変に気付きました

よ~く見てみると何かがオカシイ。

OGPの異変に気付く

こんな感じで表示されてた。

2012-02-20 11h39_31

記事本文の先頭に付けてた目次がズラーっと出ちゃってる。本文の先頭を表示という意味ではそれで正解なのだけど、Facebookでこれ見た人、何のことやら意味が分からんでしょ。

WordPressには「抜粋」という機能が用意されてます。記事本文の先頭をトップページで表示させたくなくて、抜粋文を表示させたい時には便利な機能。ただ抜粋文も別途入力しないといけない。当ブログは「抜粋」機能を使ってトップページに概要を表示させてます。

せっかく抜粋文を用意してるんだから、本文の先頭ではなく抜粋文をFacebookの更新通知でも表示させたい

調べてみると、ブログからFacebookにどんな情報を渡しているか、具体的に言うと上の方で書いたOGPの情報、それが正しいかをチェックしてみよう、ってなことが書かれていました。

それを確認できるツールがFacebookで用意されています。

デバッガー – Facebookhttp://developers.facebook.com/tools/debug

チェックしたいページのURLを入力

チェックしたいページのURLを入力して、デバッグをクリック。すると……

OGPがエラー

エラーだ。ナゼ?

この機能、「Open Graph Pro」プラグインを導入してHTMLタグを修正した直後に一度チェック済みだった。span style=”color: #ff0000;”>その時は何もエラーなどなく正常な結果が表示されてたのです。

それが今回エラーってことは、「Wordbooker」を入れたことで何か悪さをしてるってことだな、と予想。

エラーの内容を確認してみると、

OGPエラー詳細

More Than One OG URL Specified:Object at URL ‘【入力したURL】’ of type ‘article’ is invalid because it specifies multiple ‘og:url‘ values: 【入力したURL】, 【入力したURL】.

入力されたURLは「og:url」の値が重複している。ソースを確認しましょう。みたいな意味。

これを受けてページのHTMLソースを確認してみたら、確かに「og:url」が2つある!他にも重複してる値が幾つもある。

プラグイン「Wordbooker」が出力している「og:description」という値を見ると、本文の先頭にある目次の文字がズラーっと並んでる。これがFacebookに表示されてる原因だな。

もう一つ、何か他のモノが出力している別の「og:description」では、「抜粋」が表示されている

2つの「og:description」がある。一つは本文先頭で、もう一つは抜粋。私が欲しいのは後者。

ここからが大変でした。5時間くらい苦しんだんじゃないかな。遂に有力な情報を発見!

http://www.happyquality.com/2011/12/03/1755.htm

こちらに「WordbookerでOGP情報を出力しないようにする設定方法」が解説されてました。

Wordbookerの設定画面

WordPress管理画面「設定」>「Wordbooker」の「Advanced Options」という欄の中「Disable in-line production of OpenGraph Tags」という項目があった。チェックを入れて、「Save Blog Level Options」をクリックして設定を保存。

さっきのデバッガーで再びチェック。

再テスト結果

エラーが消えた!!

2012-02-20 13h29_44

「og:description」には、遂に抜粋文が表示されてます。目次ズラーが消えてくれた。感動!

ブログパーツが表示されないエラー発生で人格崩壊する

次の作業は、Facebookページを「いいね!」した人の顔写真がズラーって並ぶあのボックス。実は憧れてました

名前はブログパーツでいいの? それとも、いいねボックス? プラグイン? ウィジェット? 名前が分からなかったので、何のキーワードでググればいいかが分からず、最初のしょーもないところでつまずく。

Like Box – Facebook開発者http://developers.facebook.com/docs/reference/plugins/like-box/

最近、PCのブラウザはChromeをメインで利用してるのですが、不具合なのか何なのか、ときどき画像が表示されないんですよ。特にFacebookの関連ページになると表示が度々おかしくなる。

なので今回ブログパーツの作成は、IE(Internet Explorer)でやってみようと思ったんですけどね。

2012-02-20 09h28_55

いきなり最初からコレだよ。

2012-02-20 14h10_49

私の何が悪いって言うのよ。

「このコンテンツを新しい(略)」って途中で説明文の切れてるリンクがあるので、クリック。

2012-02-20 16h09_51

ブログ名が表示されちゃった。どういう意味だろ。

………個人アカウントに切り替えなさいってことかしら???

2012-02-20 16h13_02

個人アカウントに切り替えたら正常に表示された。Facebook始めたばかりだから全然分かってなかった。

2012-02-20 16h17_10   2012-02-20 16h18_09

上の画像はどちらも最初に表示されるサンプル。これを自分用にアレンジしていきます。

1. Facebook Page URL
 リンクさせる自分のFacebookページのURLを入力。

2. Width
 ボックスの幅をピクセル値で指定。

3. Height
 ボックスの高さをピクセル値で指定。

4. Color Scheme
 白い背景色の「light」と、黒い背景色の「dark」のどちらかを選択。
 「dark」だと下のような感じになります。

2012-02-20 16h35_43

5. Show Faces
 「いいね!」をしてくれた人の顔写真(アイコン画像)を表示するか、しないか。
 チェックを外すと表示されなくなります。

6. Border Color
 ボックスの枠線に特定の色を付けたい場合、16進数で指定。
 私は他の場所でも使ってるのと同じ色「#CCCCCC」(薄いグレー)で指定しました。

7. Stream
 Facebookでのストリーム内容を表示するか、しないか。
 Facebookでオリジナルの投稿や独自の企画をされてる場合は
 ここに表示してみるのも面白いですね。
 私は今のところチェックを外して「表示しない」にしてます。

8. Header
 ボックスの一番上、青いバーを表示するか、しないか。
 私はチェックをしたまま「表示する」にして、
 Facebookもやってますねんで~、とアピールしてるつもり。

9. Get Code
 設定が完了したら、ここをクリックします。

「Get Code」をクリックすると、ボックスをブログに設置させるためのコードが表示されます。

2012-02-20 16h49_00

iframeのコードも取得できますが、私はHTML5のコードにしました。上にあるコードをbodyタグのすぐ後ろに追加し、ボックスを表示させたい場所に下のコードを追加。これで完成です。

私は2種類作りました。

2012-02-20 16h56_35

まず本文の一番最後、関連記事のすぐ上に幅の広いタイプを一つ。

2012-02-20 16h58_44

もう一つ、右サイドバーに、他のウィジェットと同じ幅のボックスを表示させてみました。

WordPressもまだ慣れてないし、Facebookページも作り立て。何もかも分からないだらけで始めた連携だけど、ひとまず更新通知も飛ばせるようになり、ウィジェットも設置できた。ひと安心。

この記事がお気に召したら
「いいね!」をお願いします!
「りくまろぐ」の最新情報を
Facebookにお届けします
(最終更新:2012年12月2日)コメントComments Off
CATEGORY :