ブログとFacebookの連携成功からブログパーツ設置までの発狂したアレコレ
Facebookへの更新通知設定で手こずる
先日、Facebookに登録し、Facebookページも作りました。何一つ凝った要素のない質素なページですけどね。
で、ブログ記事を更新したらTwitterに更新情報をアップするのと同じように、Facebookにも更新情報をアップできるよう改造を加えたのですが、これが予想以上に手こずった。
まず、WordPressのプラグイン「Open Graph Pro」をインストール。これはブログからFacebookへ渡す「OGP（Open Graph Protocol）」という情報を認識してもらうための設定だと思ってください。
「Set Object Type to」欄は「Blog」と指定。このブログは記事に必ずアイキャッチ画像（トップページで記事の左側に表示されている、記事を代表する画像のことです）を登録するお約束にしているので、画像に関する指定は空白のまま。あとはFacebookのユーザーIDを指定。それだけです。
次に「このブログではOGPを使ってるよ～」ってのを宣言するため、HTMLタグを1行だけ変更。
|
1 2 3 4 5 |
<!DOCTYPE html> <html xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"> <head> <meta charset="UTF-8" /> |
修正したのは2行目のみ。<html>タグにxmlns属性ってのを追加してあげればいいんですって。
ここまでの準備が終わってから、いよいよブログ記事投稿と同時に更新情報をFacebookに投げてやる方法に着手。使うことに決めたプラグインは「Wordbooker」。
「Wordbooker」をインストール後、設定を完了させ（これ全部書くと長すぎるので今回は割愛）、実際に記事をアップしてからFacebookを確認してみました。
おお～、できてる。
重複エラーが解消できず発狂する
しかし数日後。異変に気付きました。
よく見てみると何かがオカシイ。
こんな感じで表示されてた。
記事本文の先頭に付けてた目次がズラーっと出ちゃってる。本文の先頭を表示という意味ではそれで正解なのだけど、Facebookでこれ見た人、何のことやら意味が分からんでしょ。
WordPressには「抜粋」という機能が用意されてます。記事本文の先頭をトップページで表示させたくなくて、抜粋文を表示させたい時には便利な機能。ただ抜粋文も別途入力しないといけない。当ブログは「抜粋」機能を使ってトップページに概要を表示させてます。
せっかく抜粋文を用意してるんだから、本文の先頭ではなく抜粋文をFacebookの更新通知でも表示させたい。
調べてみると、ブログからFacebookにどんな情報を渡しているか、具体的に言うと上の方で書いたOGPの情報、それが正しいかをチェックしてみよう、ってなことが書かれていました。
それを確認できるツールがFacebookで用意されています。
チェックしたいページのURLを入力して、デバッグをクリック。すると……
エラーだ。ナゼ？
この機能、「Open Graph Pro」プラグインを導入してHTMLタグを修正した直後に一度チェック済みだった。span style=”color: #ff0000;”>その時は何もエラーなどなく正常な結果が表示されてたのです。
それが今回エラーってことは、「Wordbooker」を入れたことで何か悪さをしてるってことだな、と予想。
エラーの内容を確認してみると、
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時間くらい苦しんだんじゃないかな。遂に有力な情報を発見！
こちらに「WordbookerでOGP情報を出力しないようにする設定方法」が解説されてました。
WordPress管理画面「設定」＞「Wordbooker」の「Advanced Options」という欄の中「Disable in-line production of OpenGraph Tags」という項目があった。チェックを入れて、「Save Blog Level Options」をクリックして設定を保存。
さっきのデバッガーで再びチェック。
エラーが消えた！！
「og:description」には、遂に抜粋文が表示されてます。目次ズラーが消えてくれた。感動！
ブログパーツが表示されないエラー発生で人格崩壊する
次の作業は、Facebookページを「いいね！」した人の顔写真がズラーって並ぶあのボックス。実は憧れてました。
名前はブログパーツでいいの？ それとも、いいねボックス？ プラグイン？ ウィジェット？ 名前が分からなかったので、何のキーワードでググればいいかが分からず、最初のしょーもないところでつまずく。
Like Box – Facebook開発者 （http://developers.facebook.com/docs/reference/plugins/like-box/）
最近、PCのブラウザはChromeをメインで利用してるのですが、不具合なのか何なのか、ときどき画像が表示されないんですよ。特にFacebookの関連ページになると表示が度々おかしくなる。
なので今回ブログパーツの作成は、IE（Internet Explorer）でやってみようと思ったんですけどね。
いきなり最初からコレだよ。
私の何が悪いって言うのよ。
「このコンテンツを新しい（略）」って途中で説明文の切れてるリンクがあるので、クリック。
ブログ名が表示されちゃった。どういう意味だろ。
………個人アカウントに切り替えなさいってことかしら？？？
個人アカウントに切り替えたら正常に表示された。Facebook始めたばかりだから全然分かってなかった。
 |
 |
上の画像はどちらも最初に表示されるサンプル。これを自分用にアレンジしていきます。
1. Facebook Page URL
リンクさせる自分のFacebookページのURLを入力。
2. Width
ボックスの幅をピクセル値で指定。
3. Height
ボックスの高さをピクセル値で指定。
4. Color Scheme
白い背景色の「light」と、黒い背景色の「dark」のどちらかを選択。
「dark」だと下のような感じになります。
5. Show Faces
「いいね！」をしてくれた人の顔写真（アイコン画像）を表示するか、しないか。
チェックを外すと表示されなくなります。
6. Border Color
ボックスの枠線に特定の色を付けたい場合、16進数で指定。
私は他の場所でも使ってるのと同じ色「#CCCCCC」（薄いグレー）で指定しました。
7. Stream
Facebookでのストリーム内容を表示するか、しないか。
Facebookでオリジナルの投稿や独自の企画をされてる場合は
ここに表示してみるのも面白いですね。
私は今のところチェックを外して「表示しない」にしてます。
8. Header
ボックスの一番上、青いバーを表示するか、しないか。
私はチェックをしたまま「表示する」にして、
Facebookもやってますねんで～、とアピールしてるつもり。
9. Get Code
設定が完了したら、ここをクリックします。
「Get Code」をクリックすると、ボックスをブログに設置させるためのコードが表示されます。
iframeのコードも取得できますが、私はHTML5のコードにしました。上にあるコードをbodyタグのすぐ後ろに追加し、ボックスを表示させたい場所に下のコードを追加。これで完成です。
私は2種類作りました。
まず本文の一番最後、関連記事のすぐ上に幅の広いタイプを一つ。
もう一つ、右サイドバーに、他のウィジェットと同じ幅のボックスを表示させてみました。
WordPressもまだ慣れてないし、Facebookページも作り立て。何もかも分からないだらけで始めた連携だけど、ひとまず更新通知も飛ばせるようになり、ウィジェットも設置できた。これでひと安心です。