有限会社Willさんいん ホーム

サイトマップ

お問い合わせ

0852-28-6220(平日 9時30分から17時30分)

このページの位置: Home > フロントエンドエンジニアのblog > jquery.neosmart.fb.wall を導入しました

フロントエンドエンジニアのblog

RSS

jquery.neosmart.fb.wall を導入しました

この記事は2015年4月16日に書かれたものです。情報が古い可能性がありますのでご注意ください。

このサイトのトップページに、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日 追記)
キーボードでフォーカスさせない方法は、画面を見ながらキーボードで操作するユーザにとって予測と反する結果になると考え、現在は一つのリンクに含める方法に変更しています。(参考:続・タイトルとサムネイル画像の重複リンク

この記事へのフィードバック

Facebook のコメントです。

17 件のフィードバック

  • macoさんより:

    2015年5月26日 1時55分

    こんにちは。

    記事を拝見させていただきました。

    今、私もHPを作成中です。
    私は100%素人です。

    フェイスブックの記事をカスタマイズして埋め込みたいと思っていて、
    この記事にたどり着きました。

    fb.wallはjsDeliverでneosmart-streamをダウンロードしました。

    導入方法がわかりません。

    なぜなら、
    他のサイトにて、live demoになにか入力しなくてはいけないとのことですが、もうそれがありません。

    neosmart STREAMのページにいってしまいます。

    どうしたらいいでしょうか?
    なにかアドバイスいただけないでしょうか。

    どうかよろしくお願いします。

    • 石輪さんより:

      2015年5月26日 10時30分

      Live Demo を使うのはアクセストークンを取得して Facebook ページのフィードをプレビューするためのようですが、アクセストークンは Facebook Developers の Access Token Tool で取得することができますので、Live Demo を使う必要はありません。

      Facebook Developers でアクセストークンを取得するためには、開発者登録をしてアプリを作成する必要があります。アプリの作成については様々なブログ等で紹介されていますのでそちらを参照ください。なお、OGP に app_id を設定しているのであれば、既にアプリを作成してあるかと思いますので、改めてアプリを作成する必要はありません。

      アプリを作成したら、以下のページに表示されている App Token の値が fb.wall で必要となるアクセストークンになります。
      https://developers.facebook.com/tools/access_token/

      なお、fb.wall はアクセストークンが丸見えになってしまいますので、jquery.fb.wall in perl を利用してアクセストークンを CGI に格納しています。これについては、この次の記事「続・jquery.neosmart.fb.wallを導入しました」をご参照ください。

  • macoさんより:

    2015年5月27日 10時31分

    ありがとうございます。

    やっと、表示までできました。

    次に「アクセストークンをCGIに格納」です。
    「続・jquery.neosmart.fb.wallを導入しました」を参照しています。

    「スクリプトを入れ替え」
    について質問です。

    facebookのウォールをサイトに表示する jquery.fb.wall in perl - BSDあれこれ
    の中の
    「zip形式:jquery_fb_wall_0.01.zip」
    をダウンロードしました。

    「jquery_fb_wall_0.01」
    というフ ォルダができました。

    そな中にさらに
    「css」と「js」というフォルダ。がありました。

    その「js」のフォルダの中に
    ・ jquery-1.6.1.min.jsと
    ・ jquery.neosmart.fb.wall.js

    があります。
    その
    ・ jquery.neosmart.fb.wall.jsを開いて、全部コピーして、今サーバーにアップしている
    「jquery.neosmart.fb.wall」のフォルダの中の
    "jquery.neosmart.fb.wall.js"の中にペーストしてアップし直したらいいってことですか??

    質問しかたがわかりにくかったらすいません。

    またアドバイスよろしくお願いいたします!!

    • 石輪さんより:

      2015年5月27日 12時30分

      get_wall_data.cgi の7行目にアクセストークンを記入してアップし、jquery.neosmart.fb.wall.js の27行目をアップした get_wall_data.cgi までのパスに変更して、差し替えたらよいと思います。ただし、元の jquery.neosmart.fb.wall.js を編集していたら、そこは書き換わってしまいますので、改めて編集する必要があります。

      なお、html または js ファイルに記述していたアクセストークンは忘れず削除してください。

  • macoさんより:

    2015年5月27日 16時23分

    ありがとうございます。

    私の理解力がなくて本当にすいません。

    整理させてください。

    まず、今のアップしている状態ですが
    ディレクトリツリーがこうなっています。

    「jquery.neosmart.fb.wallの場合」
    /public_html/●●●/■■■/×××/△△△/jquery.neosmart.fb.wall/jquery.neosmart.fb.wall.js

    「ダウンロードしたjquery_fb_wall_0.01の場合」
    /public_html/●●●/■■■/×××/△△△/jquery_fb_wall_0.01/js/jquery.neosmart.fb.wall.js
    (jsというフォルダの中にjquery.neosmart.fb.wall.jsがあります。)

    そして、教えてくださったget_wall_data.cgiは
    /public_html/●●●/■■■/×××/△△△/jquery_fb_wall_0.01/get_wall_data.cgi
    はこうなっています。

    この状態でget_wall_data.cgiの7行目にアクセストークンを記入してアップしたらいいのですか?

    それともget_wall_data.cgiのディレクトリツリーの場所をどこかの変更しなくてはいけないのですか??

    そして、jquery.neosmart.fb.wall.js の27行目をアップした get_wall_data.cgi までのパスに変更して、差し替えなんですが、このjquery.neosmart.fb.wall.jsはjquery_fb_wall_0.01のjquery.neosmart.fb.wall.jsですか??
    であれば、jquery_fb_wall_0.01のjquery.neosmart.fb.wall.jsを変更して、その全部をコピーして、jquery.neosmart.fb.wallのjquery.neosmart.fb.wall.js(もと)にペーストして、jquery.neosmart.fb.wall/jquery.neosmart.fb.wall.jsの場所でアップするってことですか??

    すなわち、

    jquery.neosmart.fb.wall.jsは
    jquery.neosmart.fb.wallのフォルダの中アップ

    get_wall_data.cgiは
    jquery_fb_wall_0.01のフォルダの中でアップ

    ということですか??

    それともget_wall_data.cgiもjquery.neosmart.fb.wallに移動してアップですか??

    最後に
    html または js ファイルに記述していたアクセストークンは忘れず削除してください。
    なんですが、
    これは
    htmlとjs両方にあるのですか??

    そして、これはjquery_fb_wall_0.01の中にはいっているものですか??

    アップも先程と同様、どこのフォルダの中でアップしたらいいのですか??

    本当に、本当に理解力不足で申し訳ありません。
    どうぞよろしくお願いいたします!!

    • 石輪さんより:

      2015年5月27日 17時36分

      jquery.neosmart.fb.wall.js は元のディレクトリにアップしないと、html ファイルから認識されないですよ。何か勘違いされているようですが、元の jquery.neosmart.fb.wall.js をダウンロードした jquery.neosmart.fb.wall.js に差し替えなければ意味がありません。

      get_wall_data.cgi をアップするディレクトリはご自身の環境に合わせてください。CGI を実行できるディレクトリに置く必要がありますので。どのディレクトリでも CGI が実行できるのであれば、jquery.neosmart.fb.wall.js と同じディレクトリでも構わないと思います。その URL を jquery.neosmart.fb.wall.js の27行目に設定してください。

      アクセストークンの削除の件は、最初のコメントの返信のあと Facebook Developers でアクセストークンを取得して、ウォールを表示する html か jquery.neosmart.fb.wall.js のどちらか一方にそのアクセストークンをご自身で記述されたかと思います。それを削除してくださいといういことです。

  • macoさんより:

    2015年5月28日 8時10分

    おはようございます!!

    理解できてきました!!

    差し替えましたが表示されませんでした。

    そして、またもとに戻したら表示されます。

    何がいけないのか探し中です。

    ふと、思ったのが、アクセストークンはheadの中にいれています。
    私PHPでつくっているのですけど、

    index.phpのページには
    「」
    としているので、アクセストーンはindex.phpの中に表記していません。

    その場合はどうしたらいいですか?
    やはり、それでもこの格納は必要なんですよね??

    • 石輪さんより:

      2015年5月28日 10時04分

      何のために jquery.fb.wall in perl に差し替えるのか理解されていますか?
      どこにアクセストークンを書いていようと、最終的に生成される html や js にそれがあると、ブラウザでソースコードを見たらアクセストークンが丸見えになるから、cgi に格納するのです。

      また、get_wall_data.cgi のパーミッションは実行できる値になっていますか?

      配布元の「facebookのウォールをサイトに表示する jquery.fb.wall in perl - BSDあれこれ」を参照してください。

  • macoさんより:

    2015年5月28日 10時21分

    できました!!
    ありがとうございます。

    header.php の中に記載していたアクセストーンを消しても表示されるようになりました!!

    それであっていますか??

    そして、IDはそのままおいておいても大丈夫なんですか??

    • 石輪さんより:

      2015年5月28日 13時41分

      お疲れさまでした。お役に立てたようで何よりです。

      ID は元からオープンで誰でも見ることができるものですから、ここで隠す意味はないですね。

      • macoさんより:

        2015年5月31日 11時59分

        本当にありがとうございました!!

        これからcssをちょこちょこいじります!!
        またつまづいたらよろしくお願いします!!

      • macoさんより:

        2015年6月8日 12時14分

        こんにちは!

        wordpressで投稿をして、アイキャッチ画像を設定してないときに、jquery.neosmart.fb.wall での表示がOGPで指定している画像になります。
        そのため表示サイズが大きくなります。

        表示サイズを小さくする場合はどうしたらいいのでしょうか?

        それと、アイキャッチがないときに代わりの画像を指定するとこはできているのですが、
        (投稿ページには対応できています)
        jquery.neosmart.fb.wall で表示されません。

        それもどうしたらいいのでしょうか?

        重ねて教えていただけたらうれしいです。

        どうぞよろしくお願いいたします!!

        • 石輪さんより:

          2015年6月10日 1時21分

          もしかしたら、サーバに ImageMagick の PHP モデュールが入っていないのではないでしょうか?

          申し訳ありませんが、当方ではその現象が確認できませんので、アドバイスしかねます。

          • 匿名さんより:

            2015年6月11日 7時31分

            ありがとうございます。
            調べてみます!

  • やまとさんより:

    2015年7月17日 15時30分

    ご教授願います!

    別のブログ記事も参考にfb.wallを試してみているのですが、
    ブラウザ上に以下のようなテキストが表示されます。
    この原因はなんなのでしょうか?

    Unsupported get request. Please read the Graph API documentation at https://developers.facebook.com/docs/graph-api

    ちなみに、Vagrantを使ったローカル環境で試しているのですが、
    これが原因ということがあり得るのでしょうか?

    • 石輪さんより:

      2015年7月17日 16時46分

      私も他のブログ記事を参考に導入しましたが、そのようなエラーは表示されませんでした。

      もっとも、このブログ記事は導入後の HTML(js ファイル)の編集を紹介したもので、私自身 fb.wall や Graph API に詳しい訳でもありませんので、申し訳ありませんが、当方では分かりかねます。

      • やまとさんより:

        2015年7月17日 22時28分

        ありがとうございます。
        もう少し、もう少し自分で探ってみます

コメントを残す

この記事のトラックバックURL:
https://www.will3in.co.jp/blog/article/installed-jquery-neosmart-fb-wall/trackback/

このページの先頭へ