実は面倒な印象が先立って、今までFacebookはなるべく避けて通っていました。
とはいえWebに携わっている以上いつまでも知らないわけにはいかないですし、実際にブログとFacebookを連携させたいという相談も時々受けます。
この機会に自サイト「K's WORKS」のFacebookページを作成して活用方法を実践してみることにしました。
K's WORKS - Facebookページ
早速このブログにPagePluginを設置しようとしたら、思いがけずつまずいてしまったので、そのことについて書きます。
Facebookプラグイン「Page Plugin」の設置
サイトに設置するFacebookのプラグインといえば、少し前まで「Like Box」が主流でしたが、APIの変更に伴って今年6月に廃止となり、代わりに「Page Plugin」が推奨されています。
設置方法は以下のサイトが操作画面の解説もあって参考になりました。
要するに発行されるコードを指定の場所と表示させたい場所にコピペすればOK。
正直、楽勝だと思っていました。
テンプレート記述でエラー発生！
まずはPage Pluginで自分のFacebookページのURL入力と好みの設定チェックをして、2種類の発行されたコードを保存。
「Blogger」のテンプレートメニューから「HTMLの編集」を選んで、＜body＞タグ内に一つ目のコードを貼り付け。
そしてテンプレートを保存！
ここでエラー！
色のついた行について、「エンティティ「バージョン」の参照は『；』デリミタによって終わるにちがいない。（翻訳）」という警告。
つまり
「最後はセミコロン『；』で終わらせましょう」っていうエラーです。
でも、見た目はセミコロンついてるんですよね。
全文コピペしているから入力ミスというのも考えにくいし、Page Pluginの設置方法を解説しているサイトをいくつか巡ってみても、こんなところで引っかかっている人がいない。
「Blogger」「Page Plugin」「エラー」などで検索をかけても、Wordpressやその他の一般的なブログに関する情報ばかり（Bloggerあるある）。
エラーが出たまま強引に保存もできない仕組みで、手詰まりの状態になりました。
カギはXMLでした
エラー表示の冒頭「XMLの解析中にエラーが発生しました」という一文に注目。
そう、「Blogger」はXMLで記述されていて、保存する際にXMLの書式ルールに沿っているかどうかのチェックがされているのです。
検索ワードを「XML」「エラー」にして検索してみたら、よくあるXMLエラーの対応が続々と出てきました。
その中で、これだと思ったのが
「特殊文字をエスケープ処理」。
今回の例では「＆」を「＆ａｍｐ；」と書き換えたら、無事エラーが解消されて保存することができました。
答えが分かれば単純なことですが、XMLに慣れていないうえコピペで済むと思い込んでいたため気付きにくい点でした。
表示成功！
あとは、Page Pluginを表示させたい場所に二つ目のコードを設置すれば完了。
サイドメニューにガジェットを追加して、無事表示されました！
縦幅・横幅は指定せず空欄のままにしたら、サイドメニュー内に収まるサイズになりました。
試しにガジェットをフッタに設置してみたところ広くなったので、自動的に最適化してくれるようです。
この時点で「いいね！」はゼロなので、顔写真はオフにしています。
いつか、ずらりと並ぶ日がくるといいなぁ。
他のブログで同じ症状があまり報告されていないということは、XML形式の「Blogger」はちょっと珍しいケースなのかもしれません。
同様のことでつまづいた人が、この記事を見つけて役立ててくれたら幸いです。
