このサイトのトップページに、Willさんいんの Facebook ページの投稿を表示するため、公式プラグインの Like Box を使用していました。

ところがこの Like Box、6月23日に廃止となり使えなくなるとのことで、新しい Page Plugin に移行するよう勧められています。

With the release of Graph API v2.3, the Like Box plugin is deprecated and will stop working on June 23rd 2015. Use the new Page Plugin instead. The Page Plugin allows you to embed a simple feed of content from a Page into your websites.

しかし、この新しい Page Plugin は、表示幅が 280px から 500px の間に制限されています。このサイトのトップページのレイアウトは、Facebook 表示領域を PC 画面で624px に設定しているため、124px もの余白ができてしまいます。

また、Like Box にしろ、Page Plugin にしろ、JavaScript で読み込んで表示しますが、実質はインラインフレームの中で facebook.com のページを表示していますので、フォントサイズや色などを CSS でコントロールすることが出来ません。その上、フォントサイズが 13px などに固定されているため、Internet Explorer では文字のサイズを変更できないことも気になっていました。

そこで、これを機に公式プラグインではなく、jQuery で Facebook のウォールを取得して貼り付けることができる、jquery.neosmart.fb.wall を導入しました。公式プラグインのようにインラインフレームで facebook.com のページを表示するのではなく、取得したデータを HTML で出力しますので、CSS によるコントロールも可能です。

実はこの fb.wall、既に開発が終了しており、その後継として neosmart STREAM がリリースされているのですが、「いいね！」数を取得するのは有償（99.00 €）だったり、投稿のテキスト内の “http://www.will3in.co.jp/xxx” の “http://www.will3in.co” までをリンク範囲としてしまうなど、URL を正しく認識できなかったりするので、とりあえず fb.wall を使うことにしました。現在、fb.wall は jsDeliver で配布されています。

fb.wall の導入方法は、様々なブログ等で紹介されていますので割愛しますが、今回このサイトのトップページに貼り付けるにあたり、主にアクセシビリティの観点から、js ファイルの HTML 書き出し部分に以下の編集を加えました。

  • デフォルトは全てのリンクが新しいウィンドウで開きますが、特に「blogを更新しました。」の投稿のリンク先は同じこのサイトであること、また、このサイトでは基本的にリンクを新しいウィンドウで開く設定にしていないことから、target="_blank" は全て削除しました。
  • プロフィール画像や投稿写真の img 要素に alt 属性が無いので、プロフィール画像には alt="（有）Willさんいんプロフィール画像"、投稿の写真には alt="投稿の写真"、リンクの画像には alt="" を設定しました。
  • プロフィール画像と名前、リンクの画像とタイトルのリンク先が重複して並ぶので、4月14日のブログ記事「タイトルとサムネイル画像の重複リンク」で書いた、「2. サムネイル画像をキーボードでフォーカスさせない」の方法で、プロフィール画像とリンクの画像をフォーカスしないようにしました。

上記2、3番目の具体的な js ファイルの編集内容は次のような感じです。

プロフィール画像の部分
output += '<a class="fb-wall-avatar" href="http://www.facebook.com/profile.php?id='+data[k].from.id+'" tabindex="-1">';
output += '<img src="'+getAvatarURL(data[k].from.id)+'" alt="'+data[k].from.name+'プロフィール画像"/>';
output += '</a>';
投稿の写真の部分
if(exists(data[k].picture)){
  if(exists(data[k].link)){
    output += '<a href="'+data[k].link+'" class="fb-wall-media-link"';
    if(exists(data[k].caption)) output += ' tabindex="-1"';
    output += '>';
  }
  output += '<img class="fb-wall-picture" src="'+data[k].picture+'" alt="';
  if(!exists(data[k].caption)){
    output += '投稿の写真';
  }
  output += '" />';
  if(exists(data[k].link)) output += '</a>';
}

また、デフォルトの CSS ファイルは使用せず、フォントやフォントサイズなど、サイトのデザインと統一しました。

公式プラグインのように、それぞれの投稿に「いいね！」や「シェア」、コメントを投稿することはできませんが、その場合は Facebook ページにアクセスしてもらえばいいかなと思います。

なお、ウォールの上の Facebook ページに対する「いいね！」と「シェア」のボタンは、fb.wall では設置できないため、公式プラグインの Like Button を貼り付けています。

ところで、これまでに制作したサイトの中にも、Like Box を貼り付けているサイトがいくつかありますが、そのほとんどがこのサイトとは逆でサイドバーに貼り付けてあり、幅が Page Plugin の最小幅である 280px より狭いので、そのまま Page Plugin に切り替えるわけにはいきません。

さて、どうしたものか。あと2ヶ月余りの内にそれぞれのサイトの代替策を考えなければなりません。

（2015年5月28日 追記）
キーボードでフォーカスさせない方法は、画面を見ながらキーボードで操作するユーザにとって予測と反する結果になると考え、現在は一つのリンクに含める方法に変更しています。（参考：続・タイトルとサムネイル画像の重複リンク）