凸 ブロックのつみかさね

デザイン、技術メモ、レビュー中心の雑記ブログ

facebookページの更新情報をホームページに表示する(jQuery使用)

最近、WordPressのブログでの更新ではなく、facebookの更新情報をホームページに表示してほしいという要望がちょくちょくあります。その時にいろいろ調べたのでメモ。

アプリの登録

アプリというと誤解されがちな言葉ですが、web使用でもアプリという名前です。facebookのAPIを使うために登録します。

開発者向けFacebook」の右上に「マイアプリ」がありますが、そこから「新しいアプリを追加」を選んで、次に進みます。設定は簡単なので、割愛します。

アプリの設定

アプリを追加した後、設定を行います。左メニューの「設定」をクリックすると、項目が現れます。以下のように入力します。

  • 表示名…そのまま
  • ネームスペース…空白
  • アプリドメイン…その対象となるドメイン。サブドメインは必要ない。当サイトだった場合、blockworks.infoとなる。
  • 連絡先メールアドレス…そのまま
  • プライバシーポリシーのURL…空白
  • サービス規約のURL…空白
  • アプリアイコン…ご自由に
  • カテゴリ…ご自由に。ビジネスでいいのではないでしょうか?

プラットフォームを追加

設定画面下に「+プラットフォームを追加」ボタンがあります。クリックすると、URL入力欄が表示されますので、入力うしてください。ここでは、サブドメイン&http://などの文字列も含めたURLを入力してください。

細かいファイル名までは必要ありません。例えばhttp://www.blockworks.info/となります。

アプリレビュー

左メニューの「アプリレビュー」をクリックすると、項目が現れます。「◯◯◯◯を公開しますか?」という設定欄で「はい」を選択します。

トークンを取得

トークンと呼ばれる複雑な文字列を取得します。「サポート - 開発者向けFacebook」にアクセスし、「アクセストークンツール」をクリックします。

対象のアプリのUserTokenに「アプリにアクセストークンを取得するアクセス許可を与えてください。」と書かれている場合は、そのリンクをクリックして、トークンを生成します。UserTokenは後で使うので控えておいてください。

コード一覧

※このコードは、トークンが丸見えなので、セキュリティ的にあまりよろしくありません。それを認識した上でご利用ください。

以下のようにコードを入力します。★User Token★の箇所は、先程控えておいたものをコピペしてください。

今回のつみかさね

ひさしぶりの更新になってしまいました。今回のfacebookを使った例は、facebookで既にコミュニティなどを構築している方に多い要望の印象を受けます。ブログは更新しないけど、facebookなら更新するという方にいいと思いますので、既存のホームページと上手く使い分けていきたいですね。

Facebookを「最強の営業ツール」に変える本

Facebookを「最強の営業ツール」に変える本

©blockworks.