Facebook の LikeBox で写真が表示されない→2つの代替策

FACEBOOK(LET) Frontはい、ごめんください。
小杉@雪国のウェブ解析士マスターです。

豪雨の梅雨があけて、直射日光に焦げついていたと思ったら、すでに秋の風。

現在はお声がけいただいた縁で、週の半分は新潟で講師をフルタイムで行っています。

教員養成過程を卒業しているにも関わらず、ウェブ制作の道を選んだ私でしたが、創ることはもちろん、人に教えることも大好きなんだなあと実感しつつ、自分の知識を再確認している毎日です。

Facebook の仕様変更?バグ?から1ヶ月経ちましたが

以前、Facebook の LikeBox(いいねボックスとも言われてるもの)の写真が表示されないということで、色々検証してみました。

参考:Facebook の LikeBox で写真が表示されなくなった件と解決策(注意点) – コスギス

あれから1ヶ月以上過ぎましたが、めぼしい情報は何もありません。むしろ、問題が明るみに出てきて戸惑っているウェブ担当者が続出しているようです。

なんていうか、今の状況では「ご愁傷様です」としか言えないのが心苦しいのですが、無料サービスを使っている以上、リスクであり、宿命です。Google のサービスだって、これからずっと無料で使い続けられる保証はどこにもないのです。

そんな中でも、Facebook 側は淡々と新機能をアップしています。まさに、こっちを使えと言わんばかりです。このままだと近い将来、LikeBox 自体が消えてもおかしくないですね。

Facebook の LikeBox 代わりに使える方法はないかな?

Facebook の手のひらで踊っているだけなのはちょっと癪なので、機能説明の前に代替手段をいくつか考えてみましょう。

ただ、LikeBox を使っている目的はおそらく「更新を簡単にしたい」かつ「Facebook と連携したい」という手段かと思われますので、あくまでも Facebook から離れないようにしたいと思います(ここ苦笑するところ)。

1.Twitter(ツイッター)を使う

タイムラインの埋め込みイメージツイッターの埋め込みタイムラインなら、写真を表示することができます(右のサンプルに画像がなくて申し訳ない…)。

しかも自動更新されるので、今まで通り Facebook を更新していれば良いだけというメリットがおいしいです。

Instagram などそのまま表示しないようにしているサービスや、本文が長くなると写真が表示されないという注意点もありますが、画像を中心に投稿している方はツイッターに切り替えるというのもひとつの手です。

1.ツイッターアカウントをとっておく

これができてないと話にならないので、念のため。

2.Facebook ページの発言をツイッターに反映させる

Facebook にログインした状態で、下記のページにアクセスします。

FacebookからTwitterへ投稿(Facebook と Twitter の連携要ページ)

このページで、個人の発言も Facebook ページの投稿も、ツイッターに反映することができます。もちろん、公開されているもののみです。

使い方がよくわからない場合は、下記 nanapi で解説されていますので参考に。

参考:便利だけど注意も必要! FacebookページとTwitterを連携させるためのハウツー | nanapi [ナナピ]

3.ツイッターのタイムラインをホームページに埋め込む

上記まで終わったら、試しに投稿テストをしてみてください。ツイッターの方にも表示されていますか?あとはそれを埋め込むだけです。

ツイッターのタイムラインを埋め込む方法は下記の公式ページに詳しい手順があります。

参考:埋め込みタイムライン | Twitter Developers

これで Facebook の投稿はツイッターに反映されます。今までと同様に Facebook ページを「公開」状態で投稿すれば、ホームページの方にも反映されます。

ツイッター連携方法の注意点

本文が長くなると写真が表示されない可能性が高いです。その場合は Facebook を使わず、ツイッターで直接更新したほうが速いでしょう(どうしても Facebook を使いたい場合は、そのツイッターの投稿を Facebook に反映させる)。

実際に確認はしていないので推測ですが、Facebook で非公開もしくは限定公開した記事を、あとから公開してもツイッターには反映されないのではないかと思います(要するに同時投稿するだけと判断しています)(違っていたらご指摘ください)。

同時投稿するということは、誤って投稿した場合、ツイッターの記事を削除しなければならない点についてもご注意ください。

2.Facebook の新機能を使う

各記事を直接埋め込めるという機能が先日発表されて話題になっています。

LikeBox の変わりかな?と思っていましたが、こちらは埋め込めるけれど自動的に更新されていくものではないため、「簡単に自動更新したい」という目的については若干逸れると思われます。

というのも、現状の機能では「個別の投稿を埋め込める」というもので「ホームページのほうで自動更新される」というものではないからです。

つまり、下記のような方法で別途ホームページの方を更新する必要があります。

埋め込みたい Facebook の投稿記事を選んで、
埋め込み用コードをコピーして、
ホームページの管理画面を開いて、← 第一関門
テキストエディタの方法にして、← 第二関門
ペーストして、公開する。

この一連の手順は、今まで LikeBox で更新していた方にできるとは思えません。

ただし、ちょっとプログラムがわかれば(半)自動更新も可能といえば可能です(ここは制作会社の出番でしょうか)。

1.埋め込みコードを知る

Facebook の記事を埋め込む方法についてはそこかしこで説明されているので任せますが、その補足と、応用方法について説明します。

参考:Facebookの投稿を自分のサイトに埋め込む方法 | nanapi [ナナピ]

コスギスのサイトのように、投稿の表示が目的ではなく、単純に「いいね!」をしてもらいやすいようにすでに LikeBox を設置している場合、「埋め込みコード」の前半にある、下記のコードは不要です(残しておいても大丈夫です)。

<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

例として、後半の下記のような部分だけ使うと、以下のように表示されます。これはコスギスの Facebook ページが公開している投稿ですが、公開されている投稿なら、見知らぬ人の投稿も埋め込むことが可能です。

<div class="fb-post" data-href="https://www.facebook.com/kosgis/posts/374136149379344"><div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/kosgis/posts/374136149379344">投稿</a> by <a href="https://www.facebook.com/kosgis">コスギス - ウェブ解析×wordpress</a>.</div></div>

今回はイベントが埋め込まれていますが、写真も問題なく使うことができます。これで懸念事項だった「写真の表示」はクリアできますので、あとはいかに自動更新するかですね。

2.RSS から自分の投稿 URL を取得する

Facebook ページは独自のフィードを出力していますので、そのフィードから投稿用 URL が分かれば、あとはその URL を上記の埋め込み用ソースに反映させれば良いのです。

フィード URL は、Atom 1.0 と RSS 2.0 の形式で出力されていますが、下記のサイトで Facebook ページの URL を入力して取得するのが一番簡単ですね(RSS 2.0 で出力されます)。直接アクセスすると、UTF-8 以外では文字化けしていますが、問題ありません。

参考:URL-Generator für Facebook-Seiten-RSS(ドイツ語)

あとはこれを擬似 cron で読み込ませて取得するなりすれば、最新の記事を随時読み込むことができます。

しかもツイッターと異なり Facebook の記事と完全連動していますので、こちらのほうが望んでいる結果に近いものと思われます。

RSS 取得方式の注意点

投稿がそのまま表示され、その場でいいね!やシェアができるというメリットがある一方、いいね!やコメントをした人が特定されます。

元々公開はされていたのですが、明確に外部にさらされることで、心理的にいいね!をしたくなくなり(お店のオープンテラスのテーブルで内輪話を楽しんでいたのに、気がついたらテーブルごと夏場の海水浴場にいたようなもの)、結果的にいいね数が減少する可能性は十分にあります。

ですから、単純に「いいね!」数だけを追うのではなく、投稿のリーチやリンクのクリック数などを確認する必要が出てくるかもしれませんね。

2つの方法についてまとめ

上記のどちらも、一度設定すれば継続利用が可能ですが、下記の注意点があります。

1.ツイッター連携方式

メリット:ある程度簡単に導入(代替策として移行)できる。

デメリット:Facebook と完全連動していない、写真が表示されない場合が高い、長い文章は省略されて Facebook ページへ誘導。

こんな場合にオススメ:写真メインで更新している場合

2.RSS 取得方式

メリット:Facebook の記事を大々的に表示できる。もちろん写真も大きく表示。

デメリット:導入がちょっと大変(開発が必要、実現可能かどうかは環境による)、個人が明るみになる

こんな場合にオススメ:文章メインで更新している場合

個人的にオススメするのは、Facebook で更新するのではなく、ホームページの更新内容を Facebook で通知するという逆の方法です。WordPress ならそれほど難しくはないので、この機会に検討してみてはいかがでしょうか。

ウェブの心理戦略家。WordPressの勉強会(WordBench新潟・長岡藩)も主催。顧客の心理と分析を裏付けるデータを元に、心理学に基づいたライティングとWordPressでのサイト構築が得意。新潟県長岡市在住。2013年4月には新潟県で初のウェブ解析士マスターになり、同年6月よりコスギスとして活動。夫と子ども2人をこよなく愛す。おやつはプリン。

どれでシェアする?