FacebookのOGPをチェックする方法
すでにご存知の方も多いと思いますが、FacebookのOGP（Open Graph Protocol）がウェブサイトのページ上に適正に設定されていることをチェックする方法を紹介します。
１．OGP（Open Graph Protocol）とは
OGPとは、ソーシャルグラフ内で任意のウェブページを表現するための情報を提供する技術で、次のようなmeta要素を指します。
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />OGPを設定すれば、Facebook上で該当のページを紹介するときにページのURLを貼り付けるだけで、次のように適切な内容が反映されます。犬の画像はog:imageに設定した画像、説明はog:descriptionに設定した内容です。
またOGPを設定しておけば、ページに設定した「いいね！」ボタンを押したときの公開範囲が友達のニュースフィードに拡大されるという大きなアドバンテージがあります。
ちなみにOGPはミクシィやグリーでも利用されているようです。それらの設定方法については別途エントリーしようと思います。
２．OGPをチェックする
本題です。OGPの設定はページごとに手作業で設定するのではなく、Movable TypeやWordPressなどのCMSでOGPを自動出力するケースが多いと思います。
<meta property="og:title" content="<$mt:EntryTitle$>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<$mt:EntryPermalink$>" />
<meta property="og:image" content="<mt:EntryAssets lastn="1"><$mt:AssetURL<></mt:EntryAssets>" />このような場合、きちんとしたOGPが出力されていることを確認する必要があると思います。また、OGPの設定内容（つまりCMSのテンプレートタグ）を変更した場合も確認した方が良いでしょう。
OGPをチェックするには、Facebookの「Debugger」を利用します。
「Input URL」に、確認したいページのURLを入力して「デバッグ」をクリック。
次のように青色のメッセージだけが表示されればOKです。「Object Properties」にOGPの取得内容が表示されます。
プロパティの設定が不足している場合などは次のような警告が表示されます。
致命的な問題がある場合は次のようなエラーが表示されます。ちなみにこのエラー原因は、og:urlの内容が存在しないURLを設定したためです。
３．その他
Debuggerではmeta要素部分のみのチェックのようですが、html要素にも次のような設定が必要となりますので、忘れないようにしましょう。
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#">Facebook OGPの「og:locale」について
Facebook OGP（Open Graph Protocol）をブログやウェブサイトに設定されている方は多いと思いますが、2011年の後半に「og:locale」というパラメータが途中で追加されています。すでに修正されている方も多いと思いますが、本エントリーで紹介しておきます。
１．「og:locale」とは
Facebookのオープングラフ（Open Graph）のアクション／オブジェクトは多言語対応しており、サポートしているロケールを「og:locale」に定義することで適切な翻訳が行えるようです（説明が大雑把過ぎるかもしれませんが）。
本エントリーでお伝えしたいのはこの部分で、日本語しかサポートしていない場合は次のように「ja_JP」を設定したmeta要素を追加すると良いでしょう。
<meta property="og:locale" content="ja_JP" />複数の言語をサポートしている場合は、次のように「alternate」を設定し、content属性をさらに追加します。
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />og:localeを含め、アクション／オブジェクトの国際化の詳細については「Internationalization」を参照してください。
２．「og:locale」の設定有無を調べる方法
ページのソースコードを直接参照するか、Facebookのデバッガ（Debugger）で該当のURLをチェックして、次のようなワーニング（赤枠部分）が表示されることで分かります。
エラーではなく警告ですが、メッセージは「That Should Be Fixed」となっています。また詳細メッセージでも、「他のタグから（ロケールの値を）推測できるとしても、og:localeは明示的に提供されるべき」とあるので、修正を推奨しているようです。
Facebook「シェア」の使い方徹底解説
Facebookのニュースフィードやタイムラインに表示されている「シェア」の使い方を詳しく解説します。
１．基本
まず基本情報として「シェア」というリンクがどこに表示されているか、下のスクリーンショットでご確認ください。
タイムラインに表示されている「シェア」
ニュースフィードに表示されている「シェア」
現在、Facebookで非推奨となっている「シェア」ボタンのことではありません。
Facebook Share（非推奨）
以下、この「シェア」リンクを使った操作方法を詳しく解説します。「シェア」の機能や「シェア」と「いいね！」との違いなどについては、他のサイトで良記事が公開されているので、この記事の９項にあるリンクから辿ってください。
２．登場人物
動作確認はいつもの通り、テストユーザーを使っています。
説明で登場する人物は以下です。
- Davidさん：ウォールにネタを投稿する人
- Karenさん：Davidさんの投稿をシェアする人
- Bobさん：シェアされた投稿を読む人
Davidさんが「おいしいラーメン屋がある」という投稿をし、それを読んだKarenさんがその投稿をシェアします。そして、Bobさんがシェアされた投稿を読むという図式です。
３．Davidさんの投稿
Davidさんが自分のウォールに次のような投稿をします。
４．Karenさんによるシェア
KarenさんはDavidさんの投稿をシェアしようと思い、「シェア」をクリックします。
ダイアログが開くので、テキストエリアにシェアするときのメッセージを入力します。
「シェア」のところが「自分のウォール」になっていれば、自分のウォールに投稿されます。
「友達のウォール」を選択することもできます。「友達のウォール」を選択した場合、投稿したい友達の名前を入力します。
例えば、Karenの友達のBobを選択することもできます。友達の名前はインクリメンタル検索で表示されます。また「グループ」の選択やメッセージ送信を行うことも可能です。
公開範囲も設定できます。
すべての設定を行って「近況をシェア」をクリックすれば投稿完了です。
フォームボタンの表示は、シェアする内容によって「リンクをシェア」「写真をシェア」などに変わります。また、リンクや写真などはニュースフィードからもシェアできるようです。
リンクのシェアの場合
写真のシェアの場合
５．シェアされた投稿
シェアされたKarenさんの投稿はBobさんのニュースフィードに次のように表示されます。
そして、Davidさんの投稿には「シェア1件」というテキストリンクが表示されます。
そのテキストリンクをクリックすると、シェアしてくれた人が分かります。
６．シェアされた投稿をさらにシェアするとどうなるか
シェアされた投稿をさらにシェアすると、どのように表示されるか確認してみましょう。
ここではKarenがシェアした投稿を、Bobがさらにシェアすることにします。
Bobがシェアした投稿です。シェア元のKarenの名前は消えています。
ただし、元ネタを提供したDavidさんのウォール投稿のシェア数は変わりません。
その代わり、Karenさんのウォール投稿のシェア数が上がっていました。6つ手前の画像と比べてみてください。
ちなみに、シェアされたものをシェアするときには、「xxより」という表示と「（削除）」のテキストリンクが表示されるようです。
「（削除）」のテキストリンクをクリックすると表示が消えます。
消した状態で投稿してみましたが、消さない場合との違い（例えばDavidさんにシェアがカウントされる等）はありませんでした。実際のユーザーでは何か違いがあるのかもしれません。ご存知の方、情報お待ちしています。
７．Facebookページの「シェア」
これまではユーザーのニュースフィードを例に解説しましたが、Facebookページでも同じように「シェア」が行えます。
Facebookページでの「シェア」
８．その他
調べてみたところ、タイムライン機能を使っている人の近況（テキストのみ）投稿は、友達のニュースフィードに「シェア」リンクが表示されないようです。その人のタイムラインを見れば「シェア」リンクが表示されます。間違ってたらすいません。
また、Twitter連携アプリでの投稿などでは、「シェア」リンクはニュースフィードにもタイムラインにも表示されないようです。
９．「シェア」の機能や「シェア」と「いいね！」の違い
「シェア」の機能や「シェア」と「いいね！」の違いを知りたい方は、以下の記事をご覧ください。
Facebook Platform SDKについて
Facebookの開発者ブログでPlatform SDKについて告知がありましたので、本エントリーで情報展開します。
１．SDKの種類とソース・ドキュメント
Facebookで現在サポートしているSDKの種類と、それぞれのソース・ドキュメントのURLは次の通りです。JavaScriptとPHPのgithubリポジトリはURLが変更になっているようなので注意が必要です。
JavaScript SDK
- ソース
https://github.com/facebook/facebook-js-sdk - ドキュメント
https://developers.facebook.com/docs/reference/javascript/
PHP SDK
- ソース
https://github.com/facebook/facebook-php-sdk - ドキュメント
https://developers.facebook.com/docs/reference/php/
iOS SDK
- ソース
https://github.com/facebook/facebook-ios-sdk - ドキュメント
https://developers.facebook.com/docs/reference/iossdk/
Android SDK
- ソース
https://github.com/facebook/facebook-android-sdk - ドキュメント
https://developers.facebook.com/docs/reference/androidsdk/
２．バグについて
バグや問題の報告には「バグツール」を使ってください、とアナウンスされています。
Bugs Tool（要ログイン）
３．非推奨APIのSDK
以下のSDKは非推奨です。
- Python SDK: 2012年4月1日にGitHubのリポジトリが非公開になる予定です。
- C# SDK: 2012年4月1日にGitHubのリポジトリが非公開になる予定です。
- Facebook iPhone SDK: iOS SDKと置き換えられます。リポジトリはすでに非公開です。
2011年総まとめ：Facebook利用に役立つエントリーBest10
2011年、当ブログで「いいね！」が多かったFacebook関連エントリーのベスト10+αです。
これからFacebookを始める方も、これらのエントリーにざっと目を通しておけば、Facebookの主な機能と動向が分かるかもしれません。
タイトルをクリックすれば該当記事にジャンプします。
１．Facebookフィード購読機能の徹底解説
2011年9月にフィード機能が搭載されました。フィード機能は友達以外のユーザーの投稿を読んだり、自分の投稿をフィードで友達以外の人に公開することができます。
２．Facebookが2012年1月1日に予定している変更点について
この記事の賞味期限もあと2日となりましたが、Facebookが2012年1月1日に予定している変更点をまとめた開発者向けの記事です。
Platform Updates: Operation Developer Love
３．Facebookのウォール投稿方法が変更
2011年9月にウォール投稿方法が変更され、そのときに変更内容をまとめたものです。ビギナーの方もこの記事でウォール投稿の機能が確認できると思います。
４．1分で分かるFacebookタイムラインの使い方
2011年10月、ユーザーの「プロフィール」ページが新たな「タイムライン」に切り替えが行えるようになり、12月から全てのユーザーが適用できるようになりました。タイムラインはその名の通り、ユーザーがFacebookに投稿したすべての出来事を時系列で表示するものです。
５．FacebookページへのIFrameタブ追加方法が変更
2011年12月にFacebookページへのIFrameタブ追加方法が変更され、その変更点をまとめた開発者向けの記事です。
この変更でIFrameタブ追加手順が結構面倒になってしまったので「FacebookページにIFrameタブを追加するツール」も公開中です。併せてご利用ください。
６．Facebookメッセージの「その他」について
見落とされがちな、「メッセージ」の下にある「その他」の紹介です。「メッセージ」と「その他」の違いについても解説しています。
７．Facebookの「いいね」ボタンをブログに設定する
ウェブサイトやブログに「いいね！」ボタン（＝この記事の各ランキングに表示しているボタン）を設置する方法です。
８．Facebookテストユーザー作成ツール
Facebookの各機能を非公開で動作確認するための「テストユーザー」を簡単に作成するツールの紹介です。「Facebookの機能を試してみたいけど、友達に知られたくない」という場合、このテストユーザーを使えば大丈夫です。
現在、公式サイトのアプリのページでテストユーザーを作成できるようになっていますが、テストユーザー同士を友達をする操作などがうまく動作しないケースがあったので、今でもこちらを使うことがあります。
Create and Delete tool for Facebook Test Users
９．Facebookページでノートを利用する
Facebookページの「ノート」の利用方法の解説です。ノートは、ブログのようにちょっとした記事をFacebookページに投稿するときに使うものです。
１０．Facebookアプリ「HTTPS+OAuth2.0」の利用を義務付けへ
Facebookアプリが2011年10月から「HTTPS+OAuth2.0」の利用が義務付けられることになり、その告知エントリーです。
Developer Roadmap Update: Moving to OAuth 2.0 + HTTPS
１１．その他
Facebookに関する記事は上記以外にも数多くエントリーしています。よければご覧ください。
また、今年は「Facebookページプロフェッショナルガイド」の執筆に参加させて頂きました。Facebookページについて知りたい方はこちらもぜひご覧ください。
毎日コミュニケーションズ
Facebookバナーの作り方
Facebookには、Facebookのコンテンツをシェアするための「Facebookバナー」というものがあります。
Facebookバナーには次の種類があります。
- プロフィール用バナー
- 写真バナー
- 「いいね！」バナー
- Facebookページ用バナー
ということでFacebookバナーの作り方を紹介します。作業はFacebookにログインした状態で行ってください。
１．プロフィール用バナーを作る
Facebookバナーのページにある「プロフィール用バナー」をクリック。
ページ右側にある「このバナーを編集」をクリック。
レイアウトと表示したい項目をチェックして「保存」をクリック。項目を変更すると右側のプレビューに反映されます。
「バナーが更新されました。」と表示されれば更新完了です。バナーを表示するコードは右側のBlogger/TypePad/Otherのいずれかをクリックします。ここでは「Other」をクリックします。
コードが表示されるのでコピーして、ウェブサイトの任意の位置にペーストしてください。
下は完成イメージです（2011年12月現在）。プロフィールの変更がバナーに反映されるのがメリットです。
２．「いいね！」バナーを作る
「いいね！」バナーは、いいね！をしているFacebookページを自分のウェブサイトで紹介するときなどに利用します。
Facebookバナーのページにある「「いいね！」バナー」をクリック。
Facebookページを選択してコードを取得します。バナーの編集は行えません。
下は完成イメージです（2011年12月現在）。ちょっとシンプルすぎて何のバナーか分からないのと、Facebookページの画像がサムネイルに反映されないのが残念な感じです（笑）。
３．Facebookページ用バナーを作る
自分が管理者になっているFacebookページのバナーを作ることができます。Facebookバナーのページにある「Facebookページ用バナー」をクリック。
バナーを表示したいFacebookページの「このバナーを編集」をクリック。
レイアウトと表示したい項目をチェックして「保存」をクリック。項目を変更すると右側のプレビューに反映されます。
「バナーが更新されました。」と表示されれば更新完了です。バナーを表示するコードは右側のBlogger/TypePad/Otherのいずれかをクリックします。ここでは「Other」をクリックします。
コードが表示されるのでコピーして、ウェブサイトの任意の位置にペーストしてください。
下は完成イメージです（2011年12月現在）。実際にはバナーの下に「Facebookページも宣伝」というリンクも表示されますが、ここでは取得コードからその部分を削除しています。バナー上の「小粋空間」というFacebookページ名も、コードから削除すれば非表示にできます。
Facebookページの場合、ソーシャルプラグインの「Like Box」の方が効果があるように思われますが、ちょっとしたスペースに表示したい場合にFacebookバナーが利用できそうです。
FacebookページにIFrameタブを追加するツール
先日エントリーした「FacebookページへのIFrameタブ追加方法が変更」で紹介したとおり、IFrameタブをFacebookページに追加するには、次のようなURLを手動で起動しなければなりません。
https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&display=popup&next=YOUR_URL
ということで、FacebookページにIFrameタブを追加できるツール（というか、たんなる入力フォーム）を作りました。よろしければ以下のページをブックマークしてご利用ください。
使い方
フォームのテキストフィールドに次の内容を設定して、「実行」をクリック。
- YOUR_APP_ID：App ID（アプリケーションID）
- YOUR_URL：アプリの「基本設定」→「ページタブ」の「Secure Page Tab URL:」または「Page Tab URL:」
ウィンドウが開くので、「Facebookページを選択」をクリック。
IFrameタブを追加したいFacebookページをクリックして「ページタブを追加」をクリック。プルダウンメニューが縦に長いとすべて表示されないので、図のようにウィンドウの高さを予め変えてください。
クリックすると、「YOUR_URL」に指定したURLに移動します。この例では指定URLにファイルをアップロードしていないので何も表示されませんが、これでFacebookページにアプリが追加されています。
以上です。
FacebookページへのIFrameタブ追加方法が変更
Facebookの開発者ブログで、「2012年2月1日にすべてのアプリケーションのプロフィールページを削除します」というアナウンスがありました。
この関係で、2011年12月10日以降に新しく作成したアプリケーションについては、「アプリのプロフィールページを見る」というリンクが表示されなくなりました。
2011年12月10日以前に作成したアプリケーションのメニュー
2011年12月10日以降に作成したアプリケーションのメニュー
また、このリンクがなくなったことでFacebookへのIFrameタブ追加方法も変更されています。
ということで、FacebookページへのIFrameタブ追加方法および、アプリのプロフィールページの作成方法を紹介します。アプリの作成手順については省略しているので、「Facebookのタイムラインにアプリを追加する方法」の１項を参照してください。
１．FacebookページにIFrameタブを追加する
IFrameタブをFacebookページに追加するには、作成したアプリの「基本設定」→「ページタブ」の「Secure Page Tab URL:」を設定します（これは既存と変わりません）。このURLはIFrameタブとして表示するコンテンツのURLです。
設定後、ブラウザから次のURLを実行します。
https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&display=popup&next=YOUR_URL
YOUR_APP_IDとYOUR_URLにはそれぞれ次の値を設定します。
- YOUR_APP_ID：App ID（アプリケーションID）
- YOUR_URL：さきほど設定した「基本設定」→「ページタブ」の「Secure Page Tab URL:」
指定したURLにアクセスして、次のような内容が表示されればOKです。「Facebookページを選択」のプルダウンから表示したいFacebookページを選択し、「ページタブを追加」をクリックします。私が試したときはポップアップにならなかったので、ブラウザサイズを小さくして表示しています。
実行URLに「display=popup」がなくても大丈夫みたいです。
https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL
このURLでは次のように表示されます。
２．アプリのプロフィールページを作る
以前のようなアプリのプロフィールページを作成するには、アプリ編集画面左メニューの「詳細設定」をクリック。
「連絡先情報」の「アプリのページ」にある「Facebookページを作成する」をクリック。
「アプリのページを作りますか？」というダイアログが開くので「承認」をクリック。
「『アプリ名+Community』ページを作りました」というメッセージが表示されるので、「閉じる」をクリック。
「連絡先情報」の「アプリのページ」に「アプリ名+Community」のリンクが表示されるので、リンクをクリック。
ステップ1でプロフィール写真設定を行います（後でも行えます）。
ステップ2でファン獲得の設定を行います（後でも行えます）。
ステップ3で基本データを入力します（後でも行えます）。
これでページが追加されました。外部に公開するには、上部の「Facebookページを公開」をクリックします。
３．2011年12月10日以前に作成したアプリケーションについて
2011年12月10日以前に作成したアプリケーションについては、プロフィールページの上部には次のような警告（黄色部分）が表示され、2012年2月1日に削除されます。
「Click here to migrate to an existing Facebook Page 」をクリックすればデータ移行のようなこともできるみたいです。詳しくは冒頭の開発者ブログをご覧ください。
Facebookが2012年1月1日に予定している変更点について
Facebookが2012年1月1日に予定している変更点について、開発者ブログの以下の記事で告知がありました。その中からいくつかの項目について情報展開します。
Platform Updates: Operation Developer Love
１．FB.Data.*
JavaScript SDK APIの以下のAPIが2012年1月1日からサポート対象外となり、新しいアプリケーションで利用できなくなります。
- FB.Data.query
- FB.Data.waitOn
２．FB.Canvas.setAutoResize
以前もこのブログで情報展開しましたが、スクロールバーを非表示にする「FB.Canvas.setAutoResize」が「FB.Canvas.setAutoGrow」にリネームされ、「Fb.Canvas.setAutoResize」はAPIとして削除されます。
３．FBML
FBMLについても、2012年1月1日からサポート対象外となり、セキュリティとプライバシーに関するバグは修正されません。また、2012年6月1日にFBMLエンドポイントはプラットフォームから削除されます。
ただしソーシャルプラグインのXFBMLは使えるような記載があります。詳細は以下のページをご覧ください（間違ってたらすいません）。
Facebook Markup Language (FBML)
４．Requests 2.0
すべてのアプリケーションにRequest 2.0がオプトインされます。おおざっぱですいませんが機能の詳細は以下の記事を参照ください。
５．開発者ロードマップ
本題からそれますが、2012年1月1日～6月1日までの開発者ロードマップを抜粋しておきます。テキストをクリックすれば元記事にジャンプします。画像をクリックすれば拡大します（拡大後に右下のアイコンをクリックすれば最大化します）。
ということで、ロードマップに気をつけて開発を進めましょう。
Facebookの「フィード購読ボタン」をウェブサイトに設置する
Facebookから新しいソーシャルプラグイン「フィード購読ボタン（Subscribe Button）」が2011年12月9日に公開されました。
Introducing the Subscribe Button for Websites
本エントリーでは、フィード購読ボタンの機能と設定方法について説明します。
１．フィード購読について
まず、Facebookのフィード購読とは、Facebook上の友達でないユーザーの投稿（フィード）を読んだり、逆に自分の投稿を友達以外のユーザーに公開できる機能です。
例えば、友達でないユーザーのフィードを購読するには、購読したいユーザーのページに表示されている「フィードを購読」をクリックするだけです。なお、ユーザーが購読を許可していなければ、このボタンは表示されません。
フィード購読の基本的な機能については以下の記事を参照してください。
２．フィード購読ボタンについて
フィード購読ボタンは前項のように、これまでFacebook上にしか表示されませんでしたが、ソーシャルプラグイン「フィード購読ボタン（Subscribe Button）」を利用することで、フィード購読ボタンをブログなど外部のウェブサイトに設置することができるようになりました。
なお、フィード購読対象にできるは個人ユーザーのみで、Facebookページは対象外です。Facebookページの購読者を増やすには「いいね！ボタン」を設置しましょう。
私のFacebookのフィード購読ボタンのサンプルは次のようになります。「フィードを購読」をクリックすれば、Facebook上で友達になっていなくても私の投稿が読めるようになります。ボタンの下に空白があるのはアイコンを表示するためのものです。
実際の動作は試していないので、不具合があったらすいません。次項より実際の設定方法について説明します。
３．アプリの作成
フィード購読ボタン作成にはアプリケーションIDが必要なので、そのためのアプリを作成します。
アプリのページで「Create New App」をクリック（初めて作る場合はその前に許可画面が表示されると思います）。
適当なアプリ名とネームスペースを入力し、「I Agree～」をチェックして「続行」をクリック。ネームスペースに数字は使えません。
セキュリティコードを入力して「送信」をクリック。
これでアプリが作成できました。作成したアプリには他に色々な設定項目がありますが、多分作成のみで大丈夫だと思います（間違ってたらすいません）。
アプリケーションIDは次項のフィード購読ボタンを作成時、フィード購読ボタン表示コードに自動的に埋め込まれます。厳密には、複数のアプリから選択でき、そのアプリケーションIDが埋め込まれます。
４．フィード購読ボタンの作成
「Subscribe Button」のページにアクセス。
フォームに各項目を設定します。「ProfileURL」には自分のFacebookのユニークURL（後述）を設定します。
ユニークURLは、「ホーム」→「アカウント設定」に表示されています。
設定が完了したら「Get Code」をクリック。
コードが表示されます。コードは「HTML5」「XFBML」「IFRAME」の3種類から選べます。好きなコードを選択し、ウェブサイトの任意の位置にペーストしてください。一番設置しやすいのは「IFRAME」だと思います。
HTML5
XFBML
IFRAME
アプリケーションを複数作成している場合は、赤枠の部分から該当のアプリケーションを選択してください。
以上です。
Facebookページの新しいインサイト機能で「いいね！」をクリックしたユーザー一覧を確認する方法
本題と関係ありませんが、Facebookページ「小粋空間」が1000いいね！を達成しました。クリックしてくださった皆様、ありがとうございます。
Facebookページ「小粋空間」
で、本題です。
Facebookページの管理人であれば、以前は数字の下に表示されたテキストリンクをクリックすれば、「いいね！」をクリックしたユーザーの一覧が表示されたのですが、10月に新しいインサイト機能が導入されてから、クリックするとインサイトのページに移動するように変更されました。
インサイトのページ
とはいっても、「いいね！」をクリックしたユーザーの一覧を見ることができなくなったわけではありません。すでにご存知の方も多いと思いますが、移動先のインサイトページ右側にある「いいね！を見る」をクリックします。
これで「いいね！」をクリックしたユーザーの一覧をこれまでと同じように確認することができます。
以上です。
あと、どうでもいいのですが、新しいインサイト機能が導入されてから、「1000」の下に表示されている「人が人が～」という誤記がずっと放置されているのが気になって仕方ありません（笑）。
逆に、その下の「51」のところに「人が」という表示が抜けているので、おそらく表記場所が間違っていると思います。
いつ修正されるのか楽しみです（笑）。
WordPressで作成したFacebookページのIFrameタブデザインを崩さない方法
WordPressで作成したFacebookページのIFrameタブで、デザインを崩さずにきちんと表示させるためのTipsを紹介します。
１．問題点
次のような、WordPressとjQuery Tabs UIを使ったタブページを、FacebookページのIFrameタブに表示するものと仮定します。
上の場合は期待通りの表示になっていますが、場合によっては次のようにjQuery UI Tabsのスタイルが適用されず、崩れて表示される可能性があります。
余談ですが、WordPressを使って上記のjQuery UI Tabsによるタブページを表示するカスタマイズは「Facebookページプロフェッショナルガイド」に掲載しています。宣伝です（笑）。
毎日コミュニケーションズ
売り上げランキング: 699
２．原因
レイアウトが崩れる原因は次の3つの条件が重なった場合です。
1つめの条件は、ユーザーがFacebookの「セキュリティ設定」でセキュア接続を利用していることです（下）。
2つめの条件は、WordPressのIFrameタブ表示用のテンプレートに次のようにhome_url()を利用していることです。
<link type="text/css"
href="<?php echo home_url(); ?>/css/jquery-ui-1.8.11.custom.css"
rel="stylesheet" />そして3つめの条件は、「https」のドメインが「http」のドメインと異なる場合です。さくらインターネットの場合、独自ドメインのSSLは次のようになります。
- http://user-domain/
- https://secureXXXXm.sakura.ne.jp/user-domain/
これら3つの条件が揃うと、ユーザーがセキュア接続でIFrameタブを閲覧した場合、home_url()で出力されるスキーム名は自動判別で「https」になります。ですが、WordPressの管理画面で設定している「サイトのアドレス」が「http」を想定したURLになっている場合、正しいURLが出力されません。
例えば、上記のさくらインターネットの例では、home_url()の出力は、
- https://user-domain/
となり、jQuery UI TabsのCSSを正常に取得できず、デザインが崩れるという結果になります。
３．対策
対策は何通りかあると思いますが、次のようにhome_url()の第2パラメータにスキームを指定することで解消します。スキームを指定すれば「https」で出力されなくなります。ユーザーがセキュア接続を利用していても、IFrameタブの中ではhttpスキームによるアクセスが可能です。
<link type="text/css"
href="<?php echo home_url('','http'); ?>/css/jquery-ui-1.8.11.custom.css"
rel="stylesheet" />このケースではCSSファイルのURLを例に説明しましたが、JavaScriptファイルや画像ファイルなどのアクセスでhome_url()を使っている場合も同様です。
４．その他
IFrameタブの動作確認を行う場合、セキュア接続の有無によるテストも忘れずに行いましょう。
Facebookのタイムラインにアプリを追加する方法（オープングラフアプリ・タイムラインアプリ）
Facebookの新しい機能「タイムライン」に、アプリを追加できるようになりました（オープングラフアプリ・タイムラインアプリ）。Facebookアプリ上で行ったアクションが次のようにタイムラインに表示されます。
ここでは開発者ブログの「How To: Get Started with the Open Graph」にあるサンプルを実際に使って、Facebookアプリをタイムラインに表示する方法を紹介します。
サンプルはFacebook内に表示するIFrameタブのアプリではなく、通常のウェブサイトでFacebookアプリを動作させます。また、元記事ではFacebookの「Cloud Services」を使ってSSL接続対応を行ってますが、ここでは自前のレンタルサーバーにファイルをアップロードする方法で説明します。
１．アプリの作成
まずウェブサイト用のアプリを作成します。アプリのページで「Create New App」をクリック（初めて作る場合はその前に許可画面が表示されると思います）。
適当なアプリ名とネームスペースを入力し、「I Agree～」をチェックして「続行」をクリック。ネームスペースに数字は使えません。
セキュリティコードを入力して「送信」をクリック。
アプリの設定画面に移動するので、「Website」をクリックしてフォームを表示させ、「サイトURL:」に次項で作成するFacebookアプリ用のファイルのアップロード先のURLを設定し「変更を保存」をクリック。分からない場合は手順を進めていけば分かると思いますので、適当なURLを入れておいてください。
２．タイムラインとアプリの接続の設定
以下の内容を「cookie.html」というファイルで保存します。html要素のlang属性やscript要素にある「en-US」は「ja-JP」にした方がいいかもしれませんがこのまま進めます。
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<head/>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'YOUR_APP_ID', cookie:true,
status:true, xfbml:true, oauth:true
});
</script>
<fb:add-to-timeline></fb:add-to-timeline>
<h3>
<font size="30" face="verdana" color="grey">
Stuffed Cookies
</font>
</h3>
<p>
<img title="Stuffed Cookies"
src="http://example.com/cookie.jpg"
width="550"/>
</p>
</body>
</html>赤色のYOUR_APP_IDには、１項で作成したアプリのアプリケーションIDを設定してください。ファイルを保存後、１項で設定した「サイトURL:」直下にcookie.htmlをアップロードします。
実際にアプリとタイムラインの接続を制御する部分は以下です。この「Add To Timeline」はソーシャルプラグインとして公開される予定です（2011年10月2日現在はベータ版）。
<fb:add-to-timeline></fb:add-to-timeline>ファイル内の「http://example.com/cookie.jpg」はクッキー画像です。これはhttps://developers.facebook.com/attachment/cookies.jpgからダウンロードできますが、手持ちの画像で全く問題ありません。
ブラウザからcookie.htmlにアクセスすると次のような画面が表示されるので、「タイムラインに追加」をクリック。
「ログインしてFacebookに追加」をクリック（ログイン状態であれば異なる画面かもしれません）
これでアプリとタイムラインが接続に追加されました。
３．Open Graphの設定
Facebookアプリの「Open Graph」の項目を設定します。アプリ管理画面左メニューの「Open Graph」をクリック。
サンプルにしたがって「cook」と「recipe」を入力して「スタート」をクリック。
アクションを設定します。ここでは特に設定項目の変更はありませんので、一番下にある「Save Changes and Next」をクリック。
オブジェクトを設定します。ここでも特に設定項目の変更はありませんので、一番下にある「Save Changes and Next」をクリック。
アグリゲーションを設定します。ここではサンプルにしたがって「Aggregation Title」のみ「Things I've cooked」に変更して「Save and Finish」をクリック。
これで設定完了です。
４．アクションの公開
オブジェクトの生成（＝OGPの設定）を行います。
以下の内容をcookie.htmlのhead要素としてペーストします。
<head prefix="og: http://ogp.me/ns# YOUR_NAMESPACE:
http://ogp.me/ns/apps/YOUR_NAMESPACE#">
<meta property="fb:app_id" content="YOUR_APP_ID" />
<meta property="og:type" content="YOUR_NAMESPACE:recipe" />
<meta property="og:title" content="Stuffed Cookies" />
<meta property="og:image" content="http://example.com/zhen/cookie.jpg" />
<meta property="og:description" content="The Turducken of Cookies" />
<meta property="og:url" content="http://example.com/zhen/cookie.html">
</head>ペーストした中にある「YOUR_NAMESPACE」は、アプリ作成時に設定した「App Namespace:」に書き換えてください。3ヶ所あります。head要素の「ns#」の後ろは半角スペースのままでOKです。
<head prefix="og: http://ogp.me/ns# YOUR_NAMESPACE:
http://ogp.me/ns/apps/YOUR_NAMESPACE#">
…中略…
<meta property="og:type" content="YOUR_NAMESPACE:recipe" /> 「YOUR_APP_ID」にアプリのアプリケーションIDを設定してください。
<meta property="fb:app_id" content="YOUR_APP_ID" /> og:imageのcontent属性値を、cookies.htmlのimg要素のURLに変更します。
<meta property="og:image" content="http://example.com/zhen/cookie.jpg" />og:urlのcontent属性値を、ウェブサイトのcookie.htmlのURLに変更します。
<meta property="og:url" content="http://example.com/zhen/cookie.html"> head要素はアプリ管理画面の「Open Graph」→「Object Types:」の「Get Code」で取得できます。
保存後、cookie.htmlを上書きアップロードします。
続いて、アップロードしたファイルをデバグします。アプリ管理画面の「Use Debug Tool」をクリック。
cookie.htmlのURLを入力
次のように表示されればOKです。Errorが表示される場合はOGPが正しく設定されていない可能性があるので、確認してください。
続いてアクション公開用のスクリプトを追加します。前準備としてまず、cookie.htmlのhead要素に以下を追加します。
<script type="text/javascript">
function postCook()
{
FB.api('/me/YOUR_NAMESPACE:cook' +
'?recipe=http://example.com/cookie.html','post',
function(response) {
if (!response || response.error) {
alert('Error occured');
} else {
alert('Post was successful! Action ID: ' + response.id);
}
});
}
</script>「YOUR_NAMESPACE」は、アプリ作成時に設定した「App Namespace:」に書き換えてください。また、「http://example.com/cookie.html」の部分は、cookie.htmlのURLに書き換えてください。
同様に、cookie.htmlのbody終了タグの直前に以下を追加します。
<form>
<input type="button" value="Cook" onclick="postCook()" />
</form>
<fb:activity actions="YOUR_NAMESPACE:cook"></fb:activity>「YOUR_NAMESPACE」は、アプリ作成時に設定した「App Namespace:」に書き換えてください。
保存後、cookie.htmlを上書きアップロードします。ブラウザでcookie.htmlにアクセスすると、次のような「cook」というフォームボタンが一番下に表示されるのでクリックします。
アプリが正常に動作しました（サンプルでalertを表示するようにしています）。
「cook」をクリックしたユーザー（私）のタイムラインにアプリが表示されました。最近のアクティビティにも表示されています。
タイムラインで該当のアプリだけを表示したい場合は、アプリ管理画面の「See App Timeline View」をクリック。
これで該当アプリだけがタイムラインに表示されます。
５．承認のための要求
前項までの設定では、作成したアクションはアプリ開発者やテストユーザーにしか公開されないため、公開のための承認要求が必要なようです。
アプリ設定画面の「Open Graph」のAction Typeの右にある「送信」をクリック。
「Continue」をクリック。
「Provide Usage Instructions」に任意の内容を入力して「Submit for Approval」をクリック。ここではサンプルにしたがって「Click cook button on app」と入力します。
2012年1月22日追記：承認画面のメッセージが変わりました。承認依頼は受け付けられたようです。
以下は2011年10月現在のもので「Open Graphはベータ版のためまだ承認できません」といった内容のダイアログが表示されます。
状態が「確認中」に代わります。2011年10月3日現在ではまだ承認されていません。
６．その他
アプリ管理画面のRolesの項目にテストユーザー「Auth Dialog Preview User」が追加されるようです。このテストユーザーでアクションを実行すれば結果がユーザーのニュースフィードなどに反映されるようです。
Facebookアプリで「HTTPS+OAuth2.0」の利用義務付けが始まります＆setAutoResize()が使えなくなります
Facebookアプリで「HTTPS（SSL）+OAuth2.0」の利用義務付けが始まることと、setAutoResize()が使えなくなることについてのお知らせです。
１．「HTTPS+OAuth2.0」の利用義務付けについて
2011年5月に「Facebookアプリ「HTTPS+OAuth2.0」の利用を義務付けへ」でお伝えしたとおり、2011年10月1日よりFacebookアプリはHTTPS（SSL）とOAuth2.0の利用が必須となります。
HTTPSに対応するには、App on Facebook」の「Secure Canvas URL:」と「Page Tab」の「Secure Page Tab URL:」に「https://」で始まるURLを設定します。
設定していないと、アプリを保存するときに次のような警告が表示されます。
JavaScriptでOAuth2.0に対応する方法は、「FacebookのJavaScript SDKがOAuth 2.0サポート」を参照してください。
２．setAutoResize()について
Facebookアプリでスクロールバーを表示しないための手段としてsetAutoResize()を使っているケースが少なくないと思われます。当ブログでも以下の記事で解説しています。
このsetAutoResize()が2012年1月1日より利用できなくなります、とFacebook開発者ブログでアナウンスされています。
Platform Updates: Operation Developer Love
記事では「setAutoResize()はsetAutoGrow()にリネームしてください」と書かれています。setAutoGrow()はすでに使えます。
ちなみにリネームの理由は次の通りです（間違ってたらすいません）。
setAutoResize()が正しく動作しないケースがあり、バグを修正したが、高さを正しく縮めることが難しいという結論に達しました。よって機能を正しく説明するためにsetAutoGrow()に変更します。正しく動作しない場合は、FB.Canvas.setSize()の利用を推奨します。
要するに「高さを縮めることが難しいので、高さを伸ばす意味の関数に変更します。この関数を使ってスクロールバーが表示される場合は代替手段を利用してください」ということみたいです。
問題なく動作している場合は単にリネームするだけですので、特筆すべきことはありませんが、ブログに掲載されているサンプルをこちらでも掲載しておきます。青色が変更部分です。
<html>
<head>
<title>FB.Canvas.setAutoGrow Example</title>
</head>
<body style="margin:0; padding:0; border:0; background-color:#555555;" >
<div id='fb-root'></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId : 'YOUR_APP_ID',
oauth : true,
});
FB.Canvas.setAutoGrow();
function growSize() {
var height = Number(
document.getElementById('myContent').style.height.split('px')[0])
+ 100;
document.getElementById('myContent').style.height = height + 'px';
}
</script>
<div id="myContent" style="background-color:#FF0000; height: 100px;">
<input type="button" value="Grow!" onclick="growSize();"/>
</div>
</body>
</html>サンプルの動作は「小粋空間」Facebookページの「setAutoGrow」タブから確認できます（そのうち削除します）。
1分で分かるFacebookタイムラインの使い方
Facebookのタイムラインの表示がなんだか分かりにくいという方へ。実際にあれこれ操作してみて、気がついた範囲で紹介します。
１．真ん中の上下に伸びている線は？
真ん中の上下に伸びている線（赤枠部分）は「時間軸」です。一番下が生まれたとき、一番上が現在です。
また任意の位置で線をクリックすれば、クリックした時間軸に遡って記録を記すことができます。これで過去の記録をFacebookにどしどし投稿できます。
もちろん日付も指定可能です。
２．左右のボックスは？
2カラムレイアウトのような感じでレイアウトされている箱はFacebook上のアクション（アクティビティ）で、時間軸からのふきだしという形で左右に分けて表示されています。
ボックスにマウスをのせると右上にアイコンが表示されます。
左が投稿を目立たせたい場合にクリック。右はタイムラインの表示や投稿の削除を行うときに使います。以前のプロフィール画面では、自分の投稿を削除したい場合はウォールから行えましたが、新しいフォーマットではこのアイコンで削除するようです。
★アイコンをクリックしたアクションは、左右に横断して表示されます（下）。また、投稿時に「ライフイベント」を選択した場合も大きく表示されます。
時間軸からのふきだしになっていないボックスは友達や「いいね！」をしているFacebookページ、写真などのエリアになるようです。
３．右上の年月表示は？
月または年の部分をクリックすれば、月または年単位でFacebook上のアクションを参照できます。
４．ウォールに投稿するには？
これは見てのとおり、左上のフォームから投稿できます。１項の投稿フォームと同じで、最新の時間軸からのふきだしとして表示されています。
投稿方法は「Facebookのウォール投稿方法が変更」と大体同じですが、「クエスチョン」がないのと、イベント（仕事・結婚・子供 etc.）について書くときのアイコンが5つ追加されているようです。
５．プロフィールを更新するには？
上部にある「基本データを編集」をクリックすればプロフィールの編集画面に移動します。
６．上部にある「アクティビティを見る」のリンクは何？
「アクティビティを見る」クリックすると、Facebook上のアクションを時系列に表示する画面（アクティビティログ）に移動します。
この画面では、アクティビティ単位にタイムラインの表示方法や公開範囲を指定できます。
公開範囲の指定
タイムラインの表示・非表示など
７．プレビュー
プレビュー機能を使えば、他のユーザーから自分のタイムラインがどのように見えるかを確認することができます。
右側にあるプルダウンメニューから「プレビュー」をクリック。
これで友達以外（フィード購読者含む）のユーザーへのプレビューが確認できます。
友達になっているユーザーからの見え方を確認するには、上部のテキストフィールドに友達（フィード購読者含む）の名前を入力。
これで友達ユーザーのプレビュー画面が表示されます。
８．ノート・フィード購読・アプリ追加など
ノートの投稿・フィード購読・アプリの追加などは、上部右側にあるアイコンをクリック。
これで表示エリアが拡張されて、ノートの投稿・フィード購読・アプリの追加が行えます。
Facebookタイムラインの利用方法
Facebookの新機能、タイムラインを使ってみました。
注：この記事は、タイムラインが正式公開される2011年10月2日までの話です。
タイムラインの使い方については「1分で分かるFacebookタイムラインの使い方」をご覧ください。
この機能を利用することで、プロフィールのページが下のスクリーンショットのようなレイアウトに切り替わります。
タイムラインは現在Open Graphのデベロッパー向けのみに公開されているようで、タイムラインを見る方法がTechCrunchで公開されています。
ということで、記事の説明を日本語向けにかみくだいて説明します。既存のアプリにOpen Graphを設定したあとに別のアプリを作り直してOpen Graphを設定した手順なので、初回と操作が異なるかもしれません。
タイムライン利用方法
タイムラインを利用するには、ダミーアプリを1つ作ります。アプリのページで「Create New App」をクリック（初めて作る場合はその前に許可画面が表示されると思います）。
適当なアプリ名とネームスペースを入力し、「I Agree～」をチェックして「続行」をクリック。ネームスペースに数字は使えません。
セキュリティコードを入力して「送信」をクリック。
作成アプリの編集画面が表示されるので「Open Graph」をクリック（この部分はTechCrunchの記事と説明が異なるので、別の画面が出るかもしれません）。
「People can」の右に任意の文字列（ここではread）、その右のセレクトボックスから任意のオブジェクト（ここではbook）を選択して「スタート」をクリック。
「Edit your Action Type」の下の方にある「Save Changes and Next」をクリック。同じようにEdit your Object Typeで「Save Changes and Next」をクリック（実験したときはスキップされました）。TechCrunchの記事では任意の項目を書き換えるように指示されています。
「Create an Aggregation」の下の方にある「Save and Finish」をクリック。
設定が完了するとこのような画面になります。
少し待ってから自分のウォールに移動すると次のような画面が表示されるので、「今すぐ利用」をクリック。
これで自分のプロフィールページに移動すると、タイムラインが表示されると思います。公開したい場合はページ上部に表示されている「今すぐ公開」をクリック。
Facebookフィード購読機能の徹底解説
Facebookでフィード購読機能が公開されました。すでにあちこちで紹介されていますが、フィード購読機能を使って友達以外のユーザーの投稿を読む方法や、自分の投稿をフィードを使って公開する方法などを詳しく紹介します。
１．登場人物
動作確認はいつもの通り、テストユーザーを使っています。
説明で登場する人物は以下です。
- Daveさん：フィードを公開する人
- Helenさん：フィードを購読する人
- Elizabethさん：HelenさんとDaveさんのFacebook上の友達
テストユーザー同士は、赤の他人ではフィードが購読できないようなので（間違ってたらすいません）、Elizabethさんを介してHelenさんがDaveさんの公開するフィードを購読するという図式にしています。
Elizabethさんは単なるつなぎなので、以降の説明には登場しません。
２．友達以外のユーザーに自分の記事をフィードで公開する
まずDaveさんが自分の記事をフィードで公開する手順を解説します。
DaveさんがFacebookにログインして「プロフィール」をクリック。
左メニューの「フィード購読」をクリック。
「フィード購読を許可します」をクリック。このリンクが表示されていない場合は、「フィード購読」ページの右にある緑色の「フィード購読を許可します」をクリック。
購読者設定の編集ダイアログが開きます。
上のプルダウンメニューでコメント許可のオン・オフを設定します。
下のプルダウンメニューで新しい購読者があったときのお知らせを受ける対象を設定します。
これで設定完了です。Daveさんのプロフィールページの左メニューに「フィード購読者」というメニューが追加されます。
「フィード購読者」をクリックすると、Daveさんのフィード購読者はまだ一人もいないので、次のように表示されます。
３．友達以外のユーザーの投稿をフィードで読む
次にHelenさん主役で、Elizabethさんの友達（つまり友達の友達）であるDaveさんのフィードを購読する手順を解説します。
Facebookにログインして「プロフィール」をクリック。
フィードを読みたい人（Daveさん）のページに進んで、右上にある「フィード購読する」をクリック。
クリックすると、Daveさんのページの「フィード購読する」の表示が「フィード購読済み」に切り替わります。これでDaveさんのフィード購読の設定ができました。
Helenさんのプロフィールページ左メニューの「フィード購読」にDaceさんの購読分の「1」が加算されます。
「フィード購読(1)」のリンクをクリックすれば、Helenさんが購読しているユーザーの一覧（ここではDaveさんのみ）が表示されます。
Daveさんのプロフィールページには「フィード購読者」の右にHelenさん分の「1」が表示され、「フィード購読者(1)」をクリックすれば、Daveさんのフィードを購読しているユーザーの一覧（ここではHelenさんのみ）が表示されます。
肝心のDaveさんのフィードはどこに表示されるかというと、友達の投稿と同じように、Helenさんのニュースフィードに表示されます。「外部のフィードリーダーで読める」という訳ではないようです。
Daveさんが友達向けに投稿した記事は、Helenさんのニュースフィードには表示されません。
４．フィードの購読をやめる
HelenさんがDaveさんのフィードの購読をやめる場合は、フィード購読中のユーザー一覧の右側にある「フィード購読済み」のボタンをクリックし、メニューから「フィード購読をやめる」を選択します。
あるいはDaveさんのページに進み、「フィード購読済み」ボタンをクリックしても同じメニューが表示されます。
５．フィードの公開をやめる
Daveさんがフィードの公開をやめるには、「フィード購読者」のページの右上にある「設定を編集」をクリック。
購読者設定の編集ダイアログが開くので、一番上の「購読者数」を「オフ」にします。
６．フィードの購読範囲などを決める
HelenさんがDaveさんのフィードの購読範囲などを決めるには、フィード購読中のユーザー一覧の右側にある「フィード購読済み」のボタンをクリックし、メニューからカスタマイズします。
７．フィード機能についてもっと知りたい場合
Facebookヘルプセンターの「よく使うページ » 購読」のページに解説があります。
８．友達のフィードは？
友達のフィードは「フィード購読済み」の状態になっています。つまり友達になった瞬間にフィード購読するという扱いになるようです。ただしフィード購読者にはカウントされません。
Facebookがテストユーザー作成・編集画面をリリース
Facebookがテストユーザーの作成・編集画面をリリースしました。
これまでのテストユーザーに関する操作はAPIのみの公開でした。そのため、簡単に作成が行える「Facebookテストユーザー作成ツール」を公開しましたが、今後はFacebookの画面からテストユーザーの作成・編集が行えます。
テストユーザーはFacebookアプリを作り、アプリ管理画面から作成・編集するようになっています。Facebookアプリ作成方法については、「FacebookページにMovable TypeやWordPressの最近のブログ記事を表示する」の２項・３項や「Facebookページプロフェッショナルガイド」の96～102ページを参考にしてください。Facebookアプリを登録するのはそれほど難しい作業ではありません。テストユーザーだけを使ってみたい場合は、空のアプリ（＝登録のみ）で大丈夫だと思います。
テストユーザーを使えば、自分のアカウントで「いいね！」やコメント投稿などを行ってすぐに削除するようなことをする必要がなくなります。ちなみに「Facebookのウォール投稿方法が変更」などのスクリーンショットもすべてテストユーザーを使っています。
１．テストユーザーの追加
自アカウントのアプリ一覧画面に移動。
「Roles」の右側にある「Edit Roles」をクリック。
テストユーザーを登録していない場合、「Test Users」の項目は次のようになっています。
「Test Users」の右側にある「追加」をクリック。ツールチップが表示されますが無視してください。
ダイアログが表示されるので「追加」をクリック。オプションの「Number to Add」はユーザー数（1回につき最大10ユーザー）、「Authorize this App」はアプリケーションの認証を登録時に行う・行わないの選択です。チェックしない場合は後で認証の画面を体験できます（多分）。
少し待てば「Succesfully added n（設定した数） test user!」が表示されるので、「閉じる」をクリック。
テストユーザーが追加されました。この画面で外部に一切知られずにFacebookの動作を確認することができます。具体的な動作については「Facebookテストユーザー作成ツール」の記事にまとめてますので、そちらを参照してください。
２．テストユーザーでのログイン
「切り替える」をクリック。ツールチップが表示されますが無視してください。
テストユーザーでログインできました。
３．テストユーザーの編集
「Test Users」の右側にある「Modify」をクリック。この操作はテストユーザーでログインしていない状態で行ってください。
テストユーザーの一覧が表示されます（スクリーンショットは2ユーザー登録した状態）。
名前の部分をクリックすれば名前を変更できます。
「Show Token」をクリックすれば、アクセストークンを表示します（アプリの認証を終えている必要があります）。「Login」の「切り替える」をクリックすれば、テストユーザーのログインを切り替えられます。「Make Friends」はチェックしたユーザー同士を友達にします。「削除」または×印でユーザーを削除できます。
ユーザーをチェックした状態で「Add to Other Apps」をクリックすれば、テストユーザーに他のアプリを追加することができます。
４．その他
テストユーザーでログインした状態で自アカウントのアプリ画面などに戻るには、一旦テストユーザーをログアウトし、自アカウントで再ログインする必要があるみたいです。
Facebookのウォール投稿方法が変更
Facebookのウォール投稿方法が変更されました。ということで変更点についてまとめてみました。この記事は2011年9月4日現在の内容です。
１．投稿フォーム
変更前は次のようなフォーム画面だったと思います。
変更後は次のようなフォーム画面になり、「リンク」「動画」のアイコンがなくなりました。
２．追加機能
変更直後に投稿しようとすると、次のような画面が表示されます。それにしたがって追加機能をざっくり説明します。
一緒にいる人のタグ付けが行えます。
アイコンをクリックすると「誰と一緒にいる？」という欄が表示されるので、一緒にいる人の名前を入力します。もう一度クリックすると非表示になります。
位置情報の追加が行えます。
アイコンをクリックすると「今どこにいる？」という欄が表示されるので、場所を入力します。もう一度クリックすると非表示になります。
投稿時・投稿後のプライバシー設定が行えます。説明によると、「公開」がこれまでの「すべてのユーザー」に該当するようです。
アイコンをクリックすると、次のように公開範囲を選択できます。「公開」の丸いアイコンは地球のようです。
３項以降は上記以外の変更点についてまとめました。
３．改行挿入でShiftが不要
これまでは改行するために「Shift+リターン」を行っていましたが、Shiftなしのリターンでも改行できるようです（Shiftありでも改行します）。
以前からそのようになっていたら単なる勘違いです。すいません。
４．リンクの挿入方法
「リンク」のアイコンがなくなりましたが、テキストエリアにURLを入力すればこれまでと同じ動作になるようです。
手入力の場合、URL入力までは何も反応しません（カーソルの位置に注目してください）。
改行するとリンクが表示されます。
URLをペーストした場合、改行なしでリンクが表示されます（カーソルの位置に注目してください）。
「http://～/」でも同じです。
リンクが表示されたら、入力したURLは不要なので削除します。
こんな感じで投稿されます。
URLは途中で入力しても反応してくれます。
５．投稿の削除
2011/09/07追記：以下の記載内容はTest Userを使って確認した動作です。通常のユーザーにはこれまで通り×印が表示されています。
投稿の削除は、変更前は×印をクリックしていましたが、変更後は×印がなくなりました。その代わり、同じ位置に表示されるアイコンをクリックし、メニューから「投稿を削除」をクリックすることで削除できます。
６．動画のアップロード
動画のアップロードはできなくなったようですが、Facebookページでは可能なようです。「写真を追加」のリンクから行えます。
Facebookのビジネスアカウントについて
Facebookのビジネスアカウントについてご質問を頂きましたので、公式サイトのヘルプページで調べた内容を紹介します。
- 公式サイトのヘルプページ：Facebookページ » ビジネスアカウント
１．Facebookのアカウントについて
Facebookのアカウントには、「個人アカウント」と「ビジネスアカウント」の2種類があります。
なお、1人の個人が複数のアカウントを持つことはできません。アカウントの種類にかかわらず、1つのアカウントは1人の個人だけが使用するように定められています。
２．ビジネスアカウントとは
ビジネスアカウントは、Facebookページと広告キャンペーンを管理するためのアカウントです。そのため、個人アカウントと比較して次のように機能が制限されています。
- （自分が作成した）Facebookページやソーシャル広告は見ることができる
- 上記以外の、ユーザーのプロフィールやその他のコンテンツを見ることはできない
- 検索対象に含まれない
- 友達リクエストを送信したり、受け取ったりすることができない
３．ビジネスアカウントの作り方
ビジネスアカウントを作るには、FacebookページまたはFacebook広告を作成する必要があります。以下、Facebookページを作成する例で示します。
Facebookページ作成ページにアクセスし、作成したいカテゴリーを選択。
必要な項目を設定して「スタート」をクリック。
アカウント作成画面に移動します。ビジネスアカウントを作成するには、「Facebookアカウントを持っていません」を選択して、メールアドレス・生年月日を入力。
これでビジネスアカウントが作れるようです（アカウントは作れないので以降の画面は不明）。
４．ビジネスアカウントを個人のアカウントに変更する
作成したビジネスアカウントは、ログイン後の画面上部にある「プロフィールを作成」ボタンをクリックすることで、ビジネスアカウントを個人のアカウントに変更できるようです。
なお、一度個人のアカウントに変更してしまうとビジネスアカウントには戻せないと、ヘルプに書かれています。
Facebookの「いいね！」を非公開にする方法
Facebookの「いいね！」ボタンをクリックしたことを非公開にする方法です。設定方法だけでなく、簡単な実験結果を併せて報告します。
１．設定方法
ホームの右上にあるメニューより「プライバシー設定」をクリック。
「Facebookでのつながり」の「設定を見る」をクリック。
「「いいね！」やその他のつながりの公開範囲」のプルダウンから「カスタマイズ」をクリック。
対象者を「自分のみ」に設定して「設定を保存」をクリック。
２．実験結果
テストユーザーツールでユーザーを3人（Aさん・Bさん・Cさん）作り、
- AさんとBさんを友達
- BさんとCさんを友達
にして、Aさんの１項の設定を「自分のみ」に設定して動作を確認したところ、以下のような結果になりました。結論から言うと、すべての「いいね！」を非公開にはできないようです。
- Aさんが外部のブログに設置されている「いいね！」をクリックしたことはBさん・Cさんに見えない（Bさん・CさんがAさんのウォールにアクセスしても表示されない）
- Bさんのウォール投稿にAさんが「いいね！」をすると、BさんやCさんに見える（Bさん・Cさんのニュースフィードに表示されているBさんの投稿に表示される）
「ウォールの投稿」や「コメント投稿」など、関連がありそうな他のプライバシー設定も「自分のみ」に変更してみましたが、ウォール投稿への「いいね！」については制限する方法がみつかりませんでした。
何か設定があるのかもしれませんが、とりあえず「いいね！」を非公開になるように変更しても効果のないケースがあることは覚えておいた方がいいようでう（非表示にする技が分かったらブログを更新します）。
Facebook PHP SDKが3.1.1にバージョンアップ（OAuth 2.0）
FacebookのPHP SDKが3.1.1にバージョンアップされました。OAuth 2.0関連のアップデートです。
Migrating to OAuth 2.0 update: PHP SDK v.3.1.1
１．サンプルプログラム
ということで、PHP SDK 3.1.1を使ったサンプルプログラムを引用します。このプログラムはJavaScript SDKと連携して動作します。
<?php
require 'facebook.php';
$facebook = new Facebook(array(
'appId' => 'YOUR_APP_ID',
'secret' => 'YOUR_APP_SECRET',
));
// See if there is a user from a cookie
$user = $facebook->getUser();
if ($user) {
try {
// Proceed knowing you have a logged in user who's authenticated.
$user_profile = $facebook->api('/me');
} catch (FacebookApiException $e) {
echo '<pre>'.htmlspecialchars(print_r($e, true)).'</pre>';
$user = null;
}
}
?>
<!DOCTYPE html>
<html xmlns:fb="http://www.facebook.com/2008/fbml">
<body>
<?php if ($user_profile) { ?>
Your user profile is
<pre>
<?php print htmlspecialchars(print_r($user_profile, true)) ?>
</pre>
<?php } else { ?>
<fb:login-button></fb:login-button>
<?php } ?>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: '<?php echo $facebook->getAppID() ?>',
cookie: true,
xfbml: true,
oauth: true
});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
FB.Event.subscribe('auth.logout', function(response) {
window.location.reload();
});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/ja_JP/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
</body>
</html>（開発者ブログの訳）
JavaScript SDKの（FB.initの）cookieパラメータにtrueを設定しておけば、接続ユーザの識別子をcookieに設定します。PHP SDKは同一ドメイン内で使われているcookieに簡単にアクセスすることができます。
これにより、JavaScript SDK（FB.loginまたはソーシャルアプリのログインボタン）を使ってユーザーをサイトに接続し、サーバーサイドPHPからプラットフォームAPIを起動することができます。
２．サンプルプログラムの使い方
サンプルプログラムをFacebookページ上のアプリとして動かすには、PHP SDKが必要です。
PHP SDKのgithubのページにアクセスして、PHP SDK 3.1.1をダウンロード（＝赤枠部分をクリック）。
ダウンロードしたアーカイブを展開して、srcフォルダ配下の3つのファイルをサーバの任意のディレクトリにアップロードします。ファイルはすべて同じディレクトリにアップロードしてください。srcフォルダごとアップロードしてもOKです。
- base_facebook.php
- facebook.php
- fb_ca_chain_bundle.crt
１項のサンプルプログラムを任意のエディタで編集し、
- YOUR_APP_ID
- YOUR_APP_SECRET
に、作成したアプリのアプリケーションIDとアプリケーションシークレットを設定します。設定後、test.phpなどのファイル名で保存し、PHP SDKと同じディレクトリにアップロード。
異なるディレクトリにアップロードする場合は、サンプルプログラムのrequireの部分を適宜書き換えてください。例えば、test.phpがあるディレクトリにsrcディレクトリをつくり、その配下にPHP SDKのファイルがある場合は次のようにします。
require 'src/facebook.php';あとは、作成したアプリケーションの編集画面の次の項目に次の内容を設定します。
「Canvas」→「Canvas URL」：test.phpのディレクトリのURL
「Page Tabs」→「Tab URL」：test.phpのURL
上記の設定箇所や、アプリケーションをFacebookページに登録する方法などは、下記のエントリーの「３．Facebookアプリの設定」を参照してください。
３．サンプルプログラムのサンプル
Facebookにサンプルプログラムのサンプルをおきました。「PHP SDK 3.1.1」というメニューをクリックしてください。
成功すれば、コンテンツ部分に接続ユーザーの情報が表示されます。なお、ログインしていない状態でアクセスすると、ログイン後に実行される「window.location.reload()」がスムーズにいかないようなので、画面が遷移しない場合はページをリロードするか、「PHP SDK 3.1.1」のメニューを再度クリックしてください。
Facebookソーシャルプラグインのロード時間を短縮する
Facebookの開発者ブログに、ソーシャルプラグインのパフォーマンス最適化についての記事が掲載されていましたので、本エントリーで紹介します。
「いいね!」ボタンやコメントボックスのソースコードを、ブログなどにそのまま貼りつけている方は、このエントリーで紹介しているものに書き換えればページの表示時間が短縮されるかもしれません。
パフォーマンスの最適化には、次の2つのベストプラクティスがあります。
１．channelUrlパラメータを追加する
FB.initに、青色で示すchannelUrlパラメータを設定します。
<div id="fb-root"></div>
<script src="//connect.facebook.net/ja_JP/all.js"></script>
<script>
FB.init({
appId : 'YOUR APP ID',
status: true, // check login status
cookie: true, // enable cookies to allow server to access session,
xfbml: true, // enable XFBML and social plugins
oauth: true, // enable OAuth 2.0
channelUrl: 'http://www.yourdomain.com/channel.html' //custom channel
});
</script>channelUrlパラメータに記述したURLのchannel.html（ファイル名は何でもOK）には、次の1行を記述します。
<script src="//connect.facebook.net/ja_JP/all.js"></script>channelUrlに指定するURLには、次のような条件があります。
- 完全修飾された絶対URLであること（相対URLは×）
- アプリケーションがhttpsの場合は、channelUrlのURLもhttpsであること
また、channelUrlで指定したファイルがブラウザにキャッシュされている必要があり、無期限にキャッシュすることを推奨しています。channel.htmlをPHPで提供できるのであれば、次のように記述すればいいようです。
<?php
$cache_expire = 60*60*24*365;
header("Pragma: public");
header("Cache-Control: maxage=".$cache_expire);
header('Expires: '.gmdate('D, d M Y H:i:s', time()+$cache_expire).' GMT');
?>
<script src="//connect.facebook.net/ja_JP/all.js"></script>開発者ブログでは、Internet Explorerで実験したところ、5つのソーシャルプラグインのロード時間が1.10秒→0.43秒に短縮されたと記されています。
２．JS SDKを非同期読み込みにする
もうひとつの方法は、アプリケーション開発ですでにご存知の方も多いと思われますが、FacebookのJS SDKを非同期読み込みにする方法です。非同期読み込みにすることで、他の要素の読み込みをブロックせずにロードすることができます。
JS SDKのロードが完了すると、fbAsyncInitを起動します。Facebook APIに依存するすべてのフロントエンド機能は、fbAsyncInitを経由して呼び出されるべき、と書かれています。
<html xmlns:fb="https://www.facebook.com/2008/fbml">
<body>
<div id="fb-root"></div>
<script>
/* All Facebook functions should be included
in this function, or at least initiated from here */
window.fbAsyncInit = function() {
FB.init({appId: 'your app id',
status: true,
cookie: true,
xfbml: true});
FB.api('/me', function(response) {
console.log(response.name);
});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/ja_JP/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
</body>
<html>３．ソーシャルプラグインへの適用
開発者ブログのタイトルが「How-To: Optimize Social Plugin Performance」なのですが、具体的な適用方法は記載されていません。
ということで、個人的な解釈ですが、１項または２項のパフォーマンス最適化を「いいね！」ボタンなどのソーシャルプラグインへ適用するためのサンプルを紹介します。設定内容に認識誤りがありましたらご指摘ください。
まず、「いいね！」ボタンのXFBMLは次のようになっています。
<div id="fb-root"></div>
<script src="http://connect.facebook.net/ja_JP/all.js#appId=xxxxxxxxxxxxxxx&xfbml=1"></script>
<fb:like href="www.foo.com" send="true" width="450" show_faces="true" font="verdana"></fb:like>このXFBMLに１項の方法を適用するには、次のようにします。ソーシャルプラグインだけの利用であれば、FB.initのパラメータは元のソースコードに設定されているappIdとxfbmlおよび、channelUrlだけでいいと思ってます。間違っていたらすいません。
<div id="fb-root"></div>
<script src="//connect.facebook.net/ja_JP/all.js"></script>
<script>
FB.init({
appId : 'xxxxxxxxxxxxxxx',
xfbml: true,
channelUrl: 'http://www.yourdomain.com/channel.html'
});
</script>
<fb:like href="www.foo.com" send="true" width="450" show_faces="true" font="verdana"></fb:like>XFBMLに２項の方法を適用するには、次のようにします。先程と同様、FB.initのパラメータはappId、xfbmlだけにしています。
<html xmlns:fb="https://www.facebook.com/2008/fbml">
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId: 'xxxxxxxxxxxxxxx',
xfbml: true
});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/ja_JP/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
<fb:like href="www.foo.com" send="true" width="450" show_faces="true" font="verdana"></fb:like>
</body>
<html>私はブログに設置している「いいね!」ボタンのソースコードを、２項の方法に変更してみました。
Facebookのウォール投稿ダイアログにインサイト用パラメータが設定可能に
Facebook開発者ブログによると、ウォール投稿用ダイアログにインサイト用のrefパラメータを設定できるようになったようです。
JavaScriptのFB.uiを利用した場合のウォール投稿用ダイアログのサンプルは次のようになります。青色の「ref」が追加になった部分です。
<html>
<head>
<title>Example feed dialog with ref param</title>
</head>
<body>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/ja_JP/all.js">
</script>
<script>
FB.init({
appId:'YOUR APP ID',
cookie:true,
status:true,
xfbml:true
});
FB.ui({
method: 'feed',
name: 'YOUR NAME',
caption: 'YOUR CAPTION',
description: (
'YOUR DESCRIPTION'
),
link: 'YOUR_LINK',
picture: 'YOUR_PHOTO',
actions: [
{ name: 'YOUR ACTION',
link: 'YOUR LINK' }
],
ref:'foo'
});
</script>
</body>
</html>開発者ブログでは、このような設定をしておくことでインサイト画面のプルダウンにrefパラメータで指定したメニューが表示されるように記されています。
ただし、実験した限りでは、インサイトの画面では上記のプルダウンメニューが発見できませんでした。ブログでは「You can now specify a ref parameter」とあったので将来的な内容ではないと思いますが、アプリケーションの設定ミスとか認識誤りなどがありましたらご指摘ください。
Facebookメッセージの「その他」について
Facebookにはメッセージ機能があります。Facebook上のユーザーや外部のメールアドレスとメッセージのやりとりが行えます。チャットログやテキストメッセージもここに保存されます。
「メッセージ」をクリックすると「その他」というメニューが表示されます。以前、このメニューを見落として受信メッセージに気つかずにいる人が多いと話題になりました。
このエントリーでは、「メッセージ」と「その他」の違いなどについて調べてみました。
１．「メッセージ」と「その他」の違い
「ヘルプ」によると次の違いがあるようです。
ヘルプセンター - メインの[メッセージ]フォルダの下にある[その他]サブフォルダは何ですか。
[その他]フォルダには、メールリストと大規模な配布グループに送信されたメッセージと、友達および友達の友達以外の人からのメッセージが入れられています。
と、よく分かりませんが、「新しいFacebookメッセージの詳細ページ」には、「知らない人からのメッセージやダイレクトメールは「その他」のフォルダに保管されます。」という記載がありました。
「知らない」というのはユーザーが「友達」または「友達の友達」として認めていないメールのようです。試しに、Facebook上で一度も送受信していない携帯アドレスからFacebookのメールアドレス送信したメールは、「その他」に放り込まれました。
２．メッセージの移動
「その他」のメッセージに返信すれば、返信メッセージも含め、自動的に「メッセージ」に移動するようです。
手動で「メッセージ」に移動するには、メッセージを開いた画面右上にある「アクション」→「[メッセージ]に移動」を選択します。
逆に「メッセージ」から「その他」に移動するには、メッセージを開いた画面右上にある「アクション」→「移動」を選択します。
FacebookのJavaScript SDKがOAuth 2.0サポート
2011年7月22日より、FacebookのJavaScript SDKがOAuth 2.0サポートを開始しました。
Updated JavaScript SDK and OAuth 2.0 Roadmap
以下、上記の記事からの抜粋です。
１．OAuth 2.0の有効化
まず、OAuth 2.0を有効にするには、FB.initにoauthパラメータを追加します。
FB.init({
appId : YOUR_APP_ID,
// other parameters,
oauth : true
});２．レスポンスデータ
OAuth 2.0を有効にした場合、レスポンスデータのsessionをauthResponseに置き換える必要があります。
sessionの利用
FB.login(function(response) {
if (response.session) {
console.log("User is connected to the application.”);
var accessToken = response.session.access_token;
}
});authResponseの利用
FB.login(function(response) {
if (response.authResponse) {
console.log("User is connected to the application.”);
var accessToken = response.authResponse.accessToken;
}
});３．FB.getLoginStatus
FB.getLoginStatusは、接続ユーザーのsessionの代わりにauthResponseを受信することを除いて、以前と同様に動作します。
サンプルは次の通りです。
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// the user is logged in and connected to your
// app, and response.authResponse supplies
// the user’s ID, a valid access token, a signed
// request, and the time the access token
// and signed request each expire
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
//but not connected to the app
} else {
// the user isn't even logged in to Facebook.
}
});４．サンプルコード
下は、OAuth 2.0の完全なサンプルです（元記事から若干変更しています）。このサンプルはFacebookページ「小粋空間」の「OAuth 2.0 sample」でお試しください（SSLにも対応しています）。
<!DOCTYPE html>
<html xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<title>New JavaScript SDK</title>
</head>
<body>
<div id="fb-root"></div>
<h2>Updated JS SDK example</h2>
<div id="user-info"></div>
<p><button id="fb-auth">...</button></p>
<script>
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol
+ '//connect.facebook.net/ja_JP/all.js';
document.getElementById('fb-root').appendChild(e);
}());
window.fbAsyncInit = function() {
FB.init({ appId: '196288800426188',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
function updateButton(response) {
var button = document.getElementById('fb-auth');
var userInfo = document.getElementById('user-info');
if (response.authResponse) {
//user is already logged in and connected
FB.api('/me', function(response) {
userInfo.innerHTML = '<img src="https://graph.facebook.com/'
+ response.id + '/picture" style="margin-right:5px" />'
+ response.name;
button.innerHTML = 'Logout';
});
button.onclick = function() {
FB.logout(function(response) {
userInfo.innerHTML="";
});
};
} else {
//user is not connected to your app or logged out
button.innerHTML = 'Login';
button.onclick = function() {
FB.login(function(response) {
if (response.authResponse) {
FB.api('/me', function(response) {
userInfo.innerHTML =
'<img src="https://graph.facebook.com/'
+ response.id + '/picture" style="margin-right:5px" />'
+ response.name;
});
} else {
//user cancelled login or did not grant authorization
}
}, {scope:'email'});
}
}
}
// run once with current status and whenever the status changes
FB.getLoginStatus(updateButton);
FB.Event.subscribe('auth.statusChange', updateButton);
};
</script>
</body>
</html>５．ロードマップ
ロードマップによると、7月22日時点ではJavaScript SDKの他に、次の点が変更されています。
- アプリの「Migration（移行）」項目の変更
- 設定項目の「OAuth 2.0 for Canvas」を「signed_request for Canvas」にリネーム
- 「OAuth Migration」の追加
- 新しいアプリ作成では「OAuth Migration」をデフォルトで「有効」に設定
「マイアプリ」の設定画面
「開発者アプリ」の設定画面
7月29日には、PHP SDKのクッキーフォーマットがバージョンアップされる予定です。
Facebookページにオーナーを表示する
Facebookページにオーナー（管理人）を表示するカスタマイズを紹介します。
通常、Facebookページの管理人はFacebookページ上に現れないようになっています。このカスタマイズを行えば、Facebookページのオーナーを左サイドバーに表示することができます。
カスタマイズ後のFacebookページ（赤枠部分にオーナーを表示）
１．オーナーを表示する
Facebookページのウォールなどの右上にある「Facebookページを編集」をクリック。
左メニューの「掲載コンテンツ」をクリック。
「ページオーナーを追加」をクリック。
表示したい管理人をチェックして「保存」をクリック。サンプルでは私だけですが、Facebookページの管理者が複数名いる場合、複数の管理人を選択できます。
これで冒頭のスクリーンショットのようにFacebookページの左側に表示されます。管理ページにも次のように表示されます。
２．オーナーを非表示にする
非表示にする場合は「ページオーナーを編集」をクリックして、一覧からチェックを外します。
FacebookのIFrameタブページでスクロールバーを消す方法
FacebookのIFrameタブページに表示されるスクロールバーを消す方法のまとめです。
１．スクロールバーが発生するケース
スクロールバーは、コンテンツサイズが高さ800px・幅520pxを超えると自動的に表示されるようです（CSSでbodyセレクタにmargin:0; padding:0;を指定した場合）。
下のスクリーンショットは、サイズをちょっと超えた、青枠だけの画像を表示したものです。
IFrameタブページにスクロールバーが表示された状態
「高さ800px・幅520px」という値はブラウザ依存なので、大体の目安と理解しておくと良いでしょう。
参考までに、ブラウザ別のスクロールバーが表示されなかった最大サイズを掲載しておきます。計測は、コンテンツにimg要素を与え、width属性とheight属性を指定した方法で行っています。すべてOSはWindows VISTAです。
Google Chrome 12
width:519px height:798px
Firefox 3.6/4（多分5も同じ）
width:520px height:795px
Safari 5
width:520px height:795px
IE9
width:520px height:795px
本エントリーでは次のようにスクロールバーを消す方法を紹介します。
IFrameタブページのスクロールバーを非表示にした状態
２．FB.Canvas.setAutoGrow()でスクロールバーを消す
注：記事投稿時に掲載していたsetAutoResize()は2012年1月1日より利用できなくなるため、代替関数であるsetAutoGrow()に書き換えました。
FB.Canvas.setAutoGrow()を利用してスクロールバーを消すには、コンテンツのscript要素内に次のように設定します。
window.fbAsyncInit = function() {
FB.Canvas.setAutoGrow();
};- 参考：
- FB.Canvas.setAutoGrow
- FB.Canvas.setAutoResize（2011年12月31日まで）
setAutoGrow()のパラメータとして、次のものが用意されています。
- on/off：setAutoGrow()のタイマを止めたい場合は、「off」または「false」を設定。デフォルトは「true（on）」。
- interval：タイマのインターバルを変更したい場合にms単位で設定します。デフォルトは100msです。パラメータに数値のみが設定されている場合はintervalとして扱います。
実際に使う場合のscript要素は次のようになると思います。
<script>
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/ja_JP/all.js';
document.getElementById('fb-root').appendChild(e);
}());
window.fbAsyncInit = function() {
FB.init({
appId: 'アプリID',
status: true,
cookie: true
});
FB.Canvas.setAutoGrow();
};
</script>なお、すべてのブラウザで表示が消えない場合は、「Facebookページプロフェッショナルガイド」の110ページの方法を行ってみてください。
３．FB.Canvas.setSize()でスクロールバーを消す
FB.Canvas.setSize()でスクロールバーを消すには、２項のFB.Canvas.setAutoGrow()の部分を次の内容に入れ替えてください。
FB.Canvas.setSize({ width: 520, height: 800 });スクロールバーが消えるタイミングはFB.Canvas.setAutoGrow()より早いので、コンテンツのサイズが固定であればこちらの方がいいかもしれません。
コールバックを利用した、次のような使い方があるようです。
function sizeChangeCallback() {
FB.Canvas.setSize();
}４．FB.Canvas.setAutoGrow()を設定してもスクロールバーが消えない場合
FB.Canvas.setAutoGrow()を設定したあと、コンテンツに高さが出ていない場合でもこの事象が発生するケースがあります。
原因は「Canvas URL」が未設定のためです。
「Canvas URL」を設定していない状態
そもそも「Canvas URL」は必須項目なのですが、IFrameタブを自分のFacebookページで表示したいケースでは「Canvas URL」を設定しなくても動作するため、この事象に陥ってしまったようです。
ということで、「Canvas URL」は必ず設定しましょう。
「Canvas URL」を設定した状態
「Canvas URL」を設定すればIFrameタブにスクロールバーが表示されなくなります。
「Facebookページプロフェッショナルガイド」売れ行き好調
7月9日に発売された「Facebookページプロフェッショナルガイド」のAmazonの売れ行きが予想以上に好調なので、宣伝がてら報告です。
毎日コミュニケーションズ
売り上げランキング: 699
Amazonでは、発売当日に在庫切れになり、昨日入荷した16冊も1日で在庫切れになりました。ランキング（コンピュータ・IT部門）も連日20位以内をキープ中です。私が目撃した中での最高位は4位でした（下）。
本書は、マーケティング・テクノロジーの両面からFacebookページを解説し、さらにWebクリエイター8名によるサイトデザインの紹介もついた、Facebookページを活用するにあたって必要な情報が盛り込まれた、渾身の1冊です。
他のオンラインショップでは在庫があると思いますので、お急ぎの方は以下のリンクからご確認ください。Amazonもそのうち入荷されると思います。
「いいね！」をしたFacebookページの一覧を見る方法のまとめ
すでにあちこちで紹介されている、「いいね！」をしたFacebookページの一覧を見る方法を当ブログでまとめてみました。
１．Facebookのデフォルト機能を使う（その1）
Facebookにログインして、右上の「プロフィール」をクリック。
左メニューの「基本データ」をクリック。
「好きな活動と趣味・関心」の「その他」に「いいね！」をしたFacebookページが表示されます。大量に「いいね！」をしている場合、ここにすべて表示されるかどうかは試していませんが、他のブログの記事で大量に表示されていたのをみかけたので大丈夫だと思います。
「いいね！」を解除したい場合、「好きな活動と趣味・関心」の右側にある「編集」をクリック。
「他のFacebookページを見る」をクリック。
「いいね！」をしているFacebookページの一覧が表示されます。ここから解除することが可能です。
２．Facebookのデフォルト機能を使う（その2）
「Facebookページを活用」のページにアクセス。
「マイFacebookページ」をクリック。
「いいね！」をしているFacebookページの一覧が表示されます。
３．Facebookアプリを使って見る
次のFacebookアプリを使えば、面倒な画面移動を行わずに、左メニューのアプリのリンクから進めるようになります。
fjlikepages（The blog of H.Fujimoto - 「いいね!」をつけたFacebookページの一覧を表示するFacebookアプリ）
４．ウェブサービスを使って見る
「LikeJournal」を使えば次のような画面でFacebookページの一覧を参照できます。
５．参考サイト
参考サイトは以下です。ありがとうございました。
Facebook開発者アプリ「Test Users」でユーザー名の指定が可能に
Facebookが提供する開発者アプリ「Test Users」がバージョンアップされ、テストユーザー作成時にユーザー名の指定が可能になりました。
これにあわせて、当ブログで公開している、Facebookのテストユーザーが簡単に作れる「テストユーザー作成ツール」もバージョンアップしました。詳細は４項をご覧ください。
１．「Test Users」とは
Facebook上にダミーのユーザーを作成し、色々な動作確認が行えます。詳細は以下の記事をご覧ください。
２．ユーザー名について
これまでの「Test Users」では、テストユーザー作成時にユーザー名を指定できなかったため、次のようにFacebook側で任意の名前を割り当てていました。
これまでのテストユーザー（ユーザー名をシステムで割り振り）
今回のバージョンアップで、次のように好きな名前を指定できるようになりました。
バージョンアップ後のテストユーザー（ユーザー名を指定可能）
これで「DonnaほにゃらげさんとKarenなんちゃらさんを友達にして」みたいなやりとりをしなくて済みそうです。
３．API
ユーザー生成時のAPIでユーザー名を指定するには次の青色部分を追加します。
https://graph.facebook.com/APP_ID/accounts/test-users?
installed=true
&name=FULL_NAME
&permissions=read_stream
&method=post
&access_token=APP_ACCESS_TOKEN４．テストユーザー生成ツールバージョンアップ
テストユーザー生成ツールもユーザー名の指定ができるようにバージョンアップしました。
「FULL_NAME」に好きな名前を入力してください（全角入力はエラーになります）。
なお、同姓同名のユーザーを大量生産させないよう、このフィールドはユーザー数（Number of Test User）が「1」のときだけ表示するようにしています。
Facebookページのファンを増やす方法
Facebookページのファンを増やす方法です。
先日の「Facebook Power Session!」受講の経験を活かして、自分のFacebookページ「小粋空間」も少し改善してみました。
今回行ったのは以下の２項目です。結構効果あるようです。
１．ブログにLike Boxを設置する
当ブログの各記事のフッタに「Like Box」を設置しました。「Like Box」はFacebookのソーシャルプラグインで、Facebook以外のウェブサイト等でFacebookページの存在を知らせることができます。
ここでは表示してませんが、Like BoxにはFacebookページのウォール投稿を表示することもできます。
２．自動投稿アプリを使わない
これまで「RSS Graffiti」を使ってブログのフィードをFacebookページに流してましたが、ブログ（MT）のプラグインを使ってFacebookページのウォールに投稿するよう変更し、さらに一言添えるようにしました。厳密には「半自動投稿」です。
改善前
改善後
改善前は、郵便にたとえれば味気ないダイレクトメールのような感じだったのが、一言添えるだけで温かみのある投稿になりました（多分）。これで記事に関連する画像を入れられればよりよくなるのではないかと思います。そもそもブログ記事以外の手動投稿をほとんどしていないのが問題ですがそれはおいといて。
ファンを増やす効果は１項の方が大きいかもしれません。
３．効果
7月3日～4日に上記の2項目を実施したところ、Facebookページのファンが増える割合が以前よりやや高くなりました。Facebookのインサイトでは、改善後から新規の「いいね！」率が増加しているのが分かります（このグラフがそれを示していないものだったらすいません）。
それはともかく、改善を行ってから1週間ほどで30人ほど増えて、現在187名です。皆さんの「いいね！」をお待ちしています。
誤解を与えないように補足しておくと、他にもOGPの設定などが必要で、上記の2項目で単純に効果があるかどうかは分かりません。詳細は「Facebookページプロフェッショナルガイド」をご覧ください（笑）。
毎日コミュニケーションズ
売り上げランキング: 1492
Facebook開発者向けアプリケーション「Developer App」バージョンアップ
Facebook開発者向けアプリケーション「Developer App」がバージョンアップされました。
ちなみに、本ブログで紹介しているアプリケーションの管理ページは以下です。
今回のバージョンアップは、2009年から最初のメジャーバージョンアップのようです。以下、開発者ブログの内容を元に簡単に機能紹介しておきます。
１．アプリケーションの検索
トップページ右上に「アプリケーションを検索」があります。
アプリケーション名を入力すればインクリメンタルサーチで簡単の目的のアプリケーションを探すことができます。
２．サイドバー
左サイドバーには最近アクセスしたアプリケーションの順番に表示されます。
３．アプリケーションページ
各アプリケーションのトップには、よくアクセスする情報が表示されます。
トップページの右側にある「編集」をクリックすれば、各セクションの編集画面に移動します。
「Web」「On Facebook」「Mobile」の編集画面上部には、入門者向けのガイドが表示されます。
「About」→「Roles」画面ではアプリケーションの管理者・開発者・テストユーザーなどが簡単に追加できます。
Facebook開発者向けツール「Graph API Explorer」徹底解説
先日、Facebookから開発者向けツールGraph API Explorerがローンチされました。
本エントリーではGraph API Explorerの使い方を、ウォールにメッセージを投稿する方法を中心に解説します。
１．Graph APIとは
Graph APIはFacebook上のデータにアクセスするためのAPIです。実際にはプログラム上でGraph APIを起動するのですが、Graph API Explorerを使えばプログラムを作成する前にGraph APIの動作確認を行うことができます。
Graph APIの詳細は以下の公式サイトを参照してください。
２～５項でウォールにメッセージを投稿する手順を説明しますので、Graph API Explorerにアクセスした状態にしてください。
２．アクセストークンの取得とパーミッションの設定
ウォールの投稿にはアクセストークンが必要なので、右側にある「Get Access Token」をクリック。
パーミッションの選択ダイアログが表示されます。
「Extended Permissions」をクリックして、ウォールの投稿に必要なパーミッション「publish_stream」をチェックし、「Get Access Token」をクリック。
アプリの許可ウィンドウが開くので、「許可する」をクリックします。なお、選択したパーミッションに対応する動作がウィンドウの左側（ここでは「ウォールへの投稿」）に表示されるので、動作に対応するパーミッションが不明な場合、ここで確認することもできます。
これでアクセストークンが取得できました。
３．URLとPOSTデータの設定
ウォールの投稿はPOSTメソッドを利用するので、「POST」を選択します。
URLの末尾を「me/feed」に変更し、ウォールの投稿であることを指定します。
「Add a field」をクリック。これはPOSTデータに相当します。
「key」に「message」、「value」に適当なメッセージを入力します。ここではmessageのみ指定していますが、「Add a field」をクリックしてさらにパラメータを増やすことも可能です。
４．APIの実行
右側にある「Submit」をクリック。
下のテキストエリアにレスポンスが表示されます。JSON形式で「id: "xxxxx..."」が表示されればウォールの投稿は成功です。
自分のウォールにアクセスすると投稿されてました。ちょっと感動です（笑）。
５．パーミッションのクリア
アクセストークン取得後、再度「Get Access Token」をクリックしてパーミッションを確認したところ、自動的に次のようにチェックされていました。
ウォール投稿の場合、投稿を削除するときに「Graph API Explorerも削除」をチェックして削除すれば、さきほどのパーミッションの設定などがクリアされるようです（多分）。
他の方法でパーミッションをクリアする方法はみつけられていません。「Get Access Token」の左側にある×印をクリックしてもテキストフィールドがクリアされるだけです。
６．Connections
右側にある「Connections」のリンクをクリックすれば、関連するオブジェクトのリストを取得できます。アクセストークンを取得した状態でのクリックを推奨します。
例えば「feed」をクリックすれば、投稿一覧のレスポンスデータ（JSONオブジェクト）を取得できます。
レスポンスデータの青色部分はリンクになっています。
クリックすれば、そのオブジェクトのデータのみを表示します。
元に戻るには「Back to Parent」をクリックします。
７．Fields
「Fields」にはレスポンスデータの説明が表示されるようですが、初期画面でしか表示されません（操作ミスだったらすいません）。
以上です。「Graph APIがよく分からない」という人も、Graph API Explorerで少しとっつきやすくなるのではないでしょうか（ならないか）。
「Facebookページ Power Session！」に参加しました
書籍「Facebookページ プロフェッショナルガイド」刊行記念の「Facebookページ Power Session！」に参加してきました。書籍も無事に完成して参加者全員に配布されました（書店での発売は7月9日）。
毎日コミュニケーションズ
セミナーはマーケティングの話を中心に、講師として書籍前半の執筆陣が登壇されました。以下、セミナーの中で気になった（というか覚えている）部分を箇条書きでピックアップしておきます。
オープニング（蒲生 トシヒロさん）
- Facebook F8カンファレンスにエッジランクに関する仕組みの説明がある
- 「Facebookページ プロフェッショナルガイド」はFacebook開発者ドキュメントに忠実な技術書籍
- Facebookは、マーケティングとテクノロジーの両方のスキルが揃ってはじめて活用できる
キーノート・スピーチ「ソーシャルシフト」（斉藤 徹さん）
- 企業と顧客の絆が深まることによるLoyalty Loopが発生
- eコマースの購買行動はAttention/Interest→Search→Action。ソーシャルコマースの購買行動では、Attention/Interest→Search→Action→Share（Facebook／Twitter）で次のAttention/Interestにつながる
- 企業のソーシャルメディア運用には人件費をかける。開始してからの運用が大事
- ソーシャルメディアの効果測定指標で一番向いていると言われているのはNPS（Net Promoter Score）。推奨者率（9or10） - 批判者率（0-6）がスコアとなる
結果を出すWebサイト－Facebookの双方向利用（井出 一誠さん）
- モデルには「ファン化→集客」と「拡散→集客」の2つがある
- ファンの投稿に反応する（レス・いいね！）ことが大事
- エッジランクの構成要素で成果が出やすいのは「weight（重み）」
- ウォール投稿にもノウハウがある（短い文章での投稿など）
- サイトにOGPを設定すれば「いいね！」が友達のニュースフィードにも反映される
- 投稿はプラグインを利用するよりもネイティブがいい
Facebookページの設計からデザイン、実装まで（ホシナ カズキさん）
- Facebookページの仕様を決めるには、Don't Feel. Think!（感じるな、考えろ）
- トラブルが発生しないようにするよりも、トラブルを乗り切ることが重要
- 最低6つの仕様を決める（カテゴリー・ロゴ画像・タイトル・URLなど）
- デザインがFacebookにひっぱられないようにする3つのポイント（キーヴィジュアル・キーカラー・キータイプフェース）
- IFrameページはHTML+CSS+jQuery、CMS、サードパーティーアプリなど、諸条件から最適なものを選択
マーケティングからみたFacebookページ（竹村 詠美さん）
- 2010年1月、アメリカでFacebookの滞在時間がGoogle／Yahoo／Amazon／Wikipediaなどのサイトの滞在時間を上回った（月間ベース）
- リアルタイムのコミュニケーションプラットフォームであることがマーケティングとして重要なポイント
- 人の心に刺さるコンテンツによってエンゲージメントが深まる
- FacebookでのアクセスがGoogleを上回っているケースもある
- Facebookはデジタルマーケティングの中で情報のうねりを大きくするしかけのひとつ
国内企業のFacebookインテグレーション事例（原 裕さん）
- Facebookページだけではだめ。運用が重要
- エンゲージメントがすべて
- Facebookインテグレーション（Facebookの豊富な機能を活用し、顧客とのエンゲージメントを高める）
- Facebookは企業にとっていいものが集約されているツール
- LikeboxでFacebookページのファンになる人が多い
- マスメディアと同じことはやらない方がいい
私はテクノロジー中心にFacebookやFacebookページに携わっていたのですが、セミナーを受けてマーケティングの重要性を強く感じました。今日の講演内容を参考に、運営中のFacebookページとサイトについても少し見直そうと思います（企業ではありませんが）。
終了後の懇親会では、初めてお会いする執筆者の方も多く、名刺交換＆歓談させていただきました。ありがとうございました。遠方や都合で参加されなかった方も含め、また集まる機会があることを願っています。
ということで、執筆者の皆様、毎日コミュニケーションズの皆様、大変お疲れ様でした！
Facebookアプリの入力文字数制限まとめ
Facebookアプリの入力項目に文字数制限があるようなので、まとめて紹介しておきます。スクリーンショットは制限文字数に達したときの証拠です。
１．Facebookについて - 基本情報
- アプリケーション名：50文字
- 説明：250文字
- ユーザーサポートのアドレス：無制限
- 連絡先メールアドレス：100文字
- Privacy Policy URL：200文字
- サービス規約のURL：200文字
２．Web Site - Core Settings
- Site URL：200文字
- Site Domain：100文字
３．Facebook Integration - Canvas
- キャンバスページ：20文字
- Canvas URL：200文字
- Secure Canvas URL：200文字
- ブックマークURL：200文字
４．Facebook Integration - Page Tabs
- タブ名：16文字
- タブのURL：100文字
- Secure Tab URL：100文字
- 編集用URL：200文字
「タブのURL」に実験用のURLが途中までしか入力できなくなってこのことに気がつきました。そんなに長いURLなどを入れるケースはないと思いますが参考まで。
Facebookのfb:like要素を設置したページを(X)HTML validにする方法
Facebookのfb:likeタグをブログに設置したときに、そのページを(X)HTML validにする方法です。
１．概要
いいね！ボタン設置用のコードはiframe要素が用意されていますが、「Send Button」をチェックしている場合、スクリーンショットのようにfb:like要素しかありません。
fb:like要素を設置したページは、The W3C Markup Validation Serviceなどではvalidな(X)HTMLとなりません。
２．対処
validな(X)HTMLにするためには、「Send Button」のチェックをはずして、iframe要素を取得するしかありません。下のコードはMovable Typeのブログ記事ページへの設置例です。
<iframe src="http://www.facebook.com/plugins/like.php?href=<$mt:EntryPermalink$>&layout=standard&show_faces=false&width=450&action=like&colorscheme=light" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:30px"></iframe>お詫び：当初投稿していた内容は以下ですが、このカスタマイズではvalidな(X)HTMLになりません（The W3C Markup Validation ServiceではOKになりますが、script要素が評価される前の結果を表示するためです）。誤った情報を公開してしまい、大変申し訳ございませんでした。またご指摘くださった皆様、ありがとうございました。
２．カスタマイズ
validな(X)HTMLにするには、fb:likeタグを次のようなJavaScriptに置き換えます。コードはMovable Typeのブログ記事ページへの設置例です。
<div class="fblike" id="fblike<mt:EntryID>"></div>
<script type="text/javascript">
//<![CDATA[
var c = document.getElementById('fblike<mt:EntryID>');
var e = document.createElement('fb:like');
e.setAttribute('href', '<mt:EntryPermalink>');
e.setAttribute('send', 'false');
e.setAttribute('width', '450');
e.setAttribute('show_faces', 'true');
e.setAttribute('font', 'verdana');
c.appendChild(e);
//]]>
</script>setAttributeの内容は適宜変更してください。
３．参考サイト
参考サイトは以下です。ありがとうございました。
W3C Validated FB (Facebook) Like Button
上記のページをThe W3C Markup Validation Serviceでチェックしてみてください。
WordPress+共有SSLでFacebookページにコンテンツを表示する
「Facebookアプリ「HTTPS+OAuth2.0」の利用を義務付けへ」でお知らせしたとおり、FacebookのIFrameタブはセキュアな接続のみとなる予定です。IFrameタブのコンテンツを制作する場合、この条件は避けて通れなくなります。
このエントリーではそれにさきがけて、WordPress+共有SSLでFacebookページのIFrameタブにコンテンツを表示する実験を行ってみました。WordPressで通常のサイト（http）を運営しつつ、同時にFacebookページをWordPressを使って管理するケースを想定しています。
実験環境は次のとおりです。
- 独自ドメイン（Value Domain取得）
- さくらインターネット・マネージドサーバ＋共有SSL ※スタンダードプラン以上であれば共有SSL利用可能
- WordPress 3.1
１．さくらインターネットに独自ドメインを設定する
Value Domainの管理画面で、取得したドメインのネームサーバ設定画面で、「他社提供/自前ネームサーバー」を選択してから「ns2.dns.ne.jp」「ns1.dns.ne.jp」を設定します。他に設定する項目はありません。
さくらインターネットのコントロールパネルの「ドメイン設定」→「新しいドメインの追加」をクリック。
「他社で取得したドメインを移管せずに使う～」の「ドメインの追加へ進む」をクリック。
ドメイン名を設定して「送信する」をクリック。
内容を確認して「送信する」をクリック。
追加されました。続いて「詳細設定にすすむ」をクリック。
「マルチドメインの対象のフォルダをご指定ください」の項目で、ドメインに対応するパスを設定します。ここではWordPressのインストールディレクトリのひとつ上位の階層を設定します。
２．共有SSLを設定する
注：この作業は、１項の作業を終えて30分ほど待ってから行ってください。
共有SSLを設定するには、１項の設定画面にある「共有SSLの利用をお選びください」から「共有SSLを利用する」を選択。
非推奨の旨のダイアログが表示されるので「OK」をクリック。
正常に反映されると、ドメイン一覧の「共有SSL」欄に「表示」のリンクが表示されます。クリックすれば、SSLでアクセスします。さくらで共有SSLを利用する場合のURLは「https://securexxxxx.sakura.ne.jp/独自ドメイン/」となります。
１項の作業直後に共有SSLを設定しても「このドメインでは利用できません」というエラーではじかれるので、焦らず、時間を空けて再度実行してください。
共有SSLを設定した状態での、httpとhttps（SSL）でWordPressのトップページにアクセスした画面を比べておきます。
httpでアクセス（http://独自ドメイン/）
httpsでアクセス（https://securexxxxx.sakura.ne.jp/独自ドメイン/）
httpsでアクセスしたときにスタイルが反映されないのは、link要素のhref属性がhttpsになっていないためです（この対処は後で実施します）。
３．WordPressの画面をFacebookアプリのIFrameタブとして設定する
注：Facebookアプリの作成方法は割愛しますので、「FacebookページにMovable TypeやWordPressの最近のブログ記事を表示する」の２項を参照してください。
登録したFacebookアプリの「Facebook Integration」→「Secure Tab URL」に任意の記事ページのセキュアURLを設定します。この後Facebookページにアプリを追加するのですが、現状は「タブのURL」にも通常のURLを設定しておかないと、IFrameタブをFacebookページに表示する設定が行えないようです。
これでFacebookアプリを追加したFacebookページのIframeタブからアクセスすると、次のように表示されます（実験ですのでレイアウトは無視してください）。これはFirefox 3.6/4での表示です。
ただし、IE9では次のようにスタイルが適用されません。
ちなみに、IFrameタブにアクセスするときのFcebookアカウント設定の「アカウントのセキュリティ」→「セキュアな接続(https)」は、次のようにチェックをしています。
４．スタイルを適用できるようにする
2011.06.01 プラグイン作りました。プラグインを利用すれば本項の設定は不要です。
ということで、IEでもスタイルを適用できるようにする方法を紹介します。これはWebデザイナーの口田さんから教えて頂いたサイト情報「WordPress で URL をすべて相対 URL にする方法」のコードを元にしています。
対処方法は、利用しているテーマのfunctions.phpの最後に、以下のコードを設定します。
class relative_URI {
function relative_URI() {
add_action('get_header', array(&$this, 'get_header'), 1);
add_action('wp_footer', array(&$this, 'wp_footer'), 99999);
}
function replace_relative_URI($content) {
$home_url = trailingslashit(get_home_url('/'));
return str_replace($home_url, 'https://securexxxxx.sakura.ne.jp/独自ドメイン/', $content);
}
function get_header(){
ob_start(array(&$this, 'replace_relative_URI'));
}
function wp_footer(){
ob_end_flush();
}
}
if ($_SERVER['HTTPS']) {
new relative_URI();
}元情報のコードと異なる部分は以下です。
- httpsでアクセスがあった場合のみ追加コードを起動するように変更（青色部分）
- 元のコードではスタイルが反映されなかったため、赤色部分（変更前は'/'）をセキュアURLに変更
実際の運用では、IFrameタブで利用する特定のページのみ起動するようにした方が良いでしょう。
WordPressでFacebookページのコンテンツを作る方法は、7月刊行予定の「Facebookページプロフェッショナルガイド」に掲載しています（宣伝）。
毎日コミュニケーションズ
５．注意事項
今回の実験結果は他のレンタルサーバでも同様に表示されることを保障するものではありません。予めご了承ください。
６．関連情報
Facebookテストユーザー作成ツール
Facebookテストユーザー作成ツールを公開します。
Create and Delete tool for Facebook Test Users
１．テストユーザーの概要
「Facebookテストユーザー」とは何か？というところから説明します。
Facebookではアプリケーション動作確認のために、テストユーザー作成機能が提供されています。Facebookのデフォルト機能を確認することもできるようです。
スクリーンショットは作成したテストユーザーでログインしたところです。
テストユーザーはFacebookアプリにひもづいて作成します。主に以下の機能があります。
- ひもづいてるアプリケーションにアクセスできます
- テストユーザー同士で友人になることができます
- テストユーザーは複数作成できます（1アプリケーションにつき500まで）
複数作成できるので、異なるブラウザで別々のテストユーザーでログインすれば、1つのPCでチャットも行えます。
テストユーザーの主な制限事項は次の通りです。
- 本物のユーザーと友人になることはできません
- Facebookページを作ることはできません
- 本物のアカウントに切り換えることはできません
テストユーザーを作成するには「Test Users API」を利用するのですが、入力が面倒なのでブラウザから操作できるようにしてみました。
なお、開発者ロードマップによると、2011年の第3四半期にツールが改善されるようです。
２．ツールの概要
ツールでは次の機能を提供しています。
- テストユーザーの作成
- テストユーザーの一覧表示
- テストユーザーのパスワード変更
- テストユーザー同士の友人承認
- テストユーザーの削除
- テストユーザーの一括削除
３項以降で各機能の利用方法について簡単に紹介します。
３．テストユーザーの作成
「Create Test User」のフォームに以下の内容を設定して「Create」をクリックします。
- Application ID：アプリケーションID
- Application Secret：シークレットID（アプリの秘訣）
- Number of Test User：作成したいユーザー数
- Installed：アプリケーション登録済みの指定
- Permissions：テストユーザーに与えたい権限
作成に成功すると、次の情報が表示されます。「Login URL」をクリックすればテストユーザーとしてFacebookにログインできます。
「TEST_USER_ID」「TEST_USER_ACCESS_TOKEN」「Login URL」は４項の「一覧表示」で確認できます。メールアドレスはFacebookのログイン画面で確認できます。パスワードは（多分）確認手段がないので、忘れた場合は５項の「パスワード変更」を実行してください。
ログインURLは1時間で無効になりますが、同一ユーザーに対し新しいログインURLを取得できます（一覧表示で取得できると思いますが未確認）。
作成完了ページでは削除・友人承認・パスワード変更が行えるようになっています。
４．テストユーザーの一覧表示
「List Test User」のフォームに以下の内容を設定して「List」をクリックします。
- Application ID：アプリケーションID
- Application Secret：シークレットID（アプリの秘訣）
一覧ページでは削除が行えるようになっています。
５．テストユーザーのパスワード変更
「Change Test User's Password」のフォームに以下の内容を設定して「List」をクリックします。
- TEST_USER_ID：テストユーザーのID
- TEST_USER_ACCESS_TOKEN：テストユーザーのアクセストークン（テストユーザー作成時に表示されます）
- NEW_PASSWORD：新しいパスワード
６．テストユーザー同士の友人承認
「Make friend connections」のフォームに以下の内容を設定して「Make friend」をクリックします。設定するテストユーザーは、同じアプリケーションで生成されている必要があります。
- Application ID：アプリケーションID
- Application Secret：シークレットID（アプリの秘訣）
- TEST_USER_ID1：一方のテストユーザーID
- TEST_USER_ID2：もう一方のテストユーザーID
７．テストユーザーの削除
「Delete Test User」のフォームに以下の内容を設定して「Delete」をクリックします。
- Application ID：アプリケーションID
- Application Secret：シークレットID（アプリの秘訣）
- TEST_USER_ID：テストユーザー
- TEST_USER_ACCESS_TOKEN or APP_ACCESS_TOKEN：テストユーザーのアクセストークンまたはアプリのアクセストークン
８．テストユーザーの一括削除
「Delete All Test User」ののフォームに以下の内容を設定して「Delete」をクリックします。
- Application ID：アプリケーションID
- Application Secret：シークレットID（アプリの秘訣）
９．制限事項
現在、「Adding existing test users to other apps」の動作確認ができていないため機能提供していません。
Facebookアプリ「HTTPS+OAuth2.0」の利用を義務付けへ
ブログヘラルドで知りましたが、今後、Facebookアプリは「HTTPS+OAuth2.0」の利用が義務付けられることになるようです。
Facebookから開発者へ: OAuthとHTTPSを利用せよ（原文）
ユーザーが楽しさと安全性と言う究極の選択を行わなければいけない状況を避けるため、フェイスブックは、HTTPSの利用に対する期限を開発者に向けて定めた（OAuth 2.0の利用も併せて）。
FacebookアプリをHTTPSでアクセスできるようにすることで、利用ユーザーはFacebookに対し、常にセキュアな接続でアクセスすることができます。
すぐに移行が必要というわけではなく、約5ヶ月の移行期間が設定されています。詳細は次項のロードマップをご覧ください。
１．ロードマップ
移行に関するロードマップは次の通りです（画像は公式サイトの開発者ロードマップより）。下の表に示すように段階的な移行を行い、2011年10月1日にすべて完了となります。翻訳が間違っていたらすいません。
| 2011年7月1日 | PHP SDKとJavaScript SDKについて、OAuth2.0と新しいクッキー形式（＝アクセストークンなし）が利用可能となるアップデートを行います。JavaScript SDKは、直接アクセスしている場合は自動的にアップデートされます。 |
| 2011年9月1日 | すべてのアプリケーションは、OAuth2.0と暗号化されたアクセストークンに移行しなければなりません。 |
| 2011年10月1日 | すべてのCanvasアプリケーションはsigned_request（fb_sigは10月1日から利用不可）を処理し、そしてSSL証明書を入手しなければなりません（Sandboxモードは除く）。 |
２．HTTPSでアプリを提供するには
HTTPSでアプリを提供するためには、アプリを提供しているサーバにSSLの設定が必要になります。利用サーバで共用SSLなどを提供していれば簡単な設定で済みます。国内の主要レンタルサーバでは、下位グレードでなければ共用SSLが利用できるところが多いようです。
問題なのは、サーバでSSLを利用できない場合でしょう。公式ブログでのアナウンスのコメント欄に、は「利用しているサーバにSSL証明書をインストールできない」と嘆いている人がいました。
自前でSSLを設定する場合、SSL証明書の入手が必要となります。SSL証明書は「日本ベリサイン」や「グローバルサイン」で入手できますが、代理店などを利用すると安価で入手できます。無償で証明書が入手できる「StartSSL™」というサービスもあります。
３．関連情報
Facebookのソーシャルプラグイン「Send Button」をブログに設置する
Facebookのソーシャルプラグインに「Send Button（Sendボタン・送信ボタン）」が追加されたので、ブログへの設定方法を簡単に紹介します。
とりあえず、ネーミングはフォームの「送信」ボタンと紛らわしいこと間違いありません。
１．機能
「Send Button（送信ボタン）」は、友人やグループに記事やサイトを知らせるための機能です。
記事などに表示された「送信」をクリックすると、送信用のダイアログが表示されます。
「宛先」に送信先の友達やグループの名前を入力します。アルファベットを入力すれば候補の名前やグループ名が出てきます。メールアドレスを直接入力することもできます。
こんな感じでどんどん追加できます。あとは、メッセージを添えて送信します。
送信されました。
送信先にはURLとメッセージが送信されるようです。下は自分のメールアドレスに送ってみたものです。
Facebookの友人宛の場合は「メッセージ」に送信されます。
２．コードの取得
Send Buttonのページにアクセスして、FontとColor Schemeを設定して「Get Code」をクリック。「URL to Send」は後で修正するのでそのままで構いません。
表示されたコードをコピー。
３．コードの修正と貼り付け
コードにある「en_US」を「ja_JP」に修正。
<script src="http://connect.facebook.net/ja_JP/all.js#xfbml=1"></script><fb:send href="example.com" font="verdana"></fb:send>Movable Typeの場合、「example.com」をMTPermalinkタグに置き換え、MTEntriesタグ内に設定します。
<script src="http://connect.facebook.net/ja_JP/all.js#xfbml=1"></script><fb:send href="<$mt:EntryPermalink$>" font="verdana"></fb:send>WordPressの場合、「example.com」をthe_permalink()タグに置き換え、loop.phpやloop-single.phpの内部に設定します。
<script src="http://connect.facebook.net/ja_JP/all.js#xfbml=1"></script><fb:send href="<?php the_permalink()?>" font="verdana"></fb:send>Facebookで使用しているアプリを削除する方法
Facebookで使用しているアプリを削除する方法を紹介します。
１．マイページの左メニューの表示を削除する
ログインしている状態で右上ナビゲーションメニューの「アカウント」→「プライバシー設定」をクリック。
「アプリとウェブサイト」の「設定を編集」をクリック。
「利用しているアプリ」の「不要または不適切なアプリを削除」のリンクをクリック。右側にある「設定を編集」をクリックしても同じ画面に移動します。
使用中アプリの一覧が表示されるので、右側にある×印をクリック。
確認ダイアログが表示されるので「削除」をクリック。
これで削除されました。
これでマイページの左側にあるメニューから該当のアプリの表示が消えていると思います。
２．Facebookページから削除する
Facebookページでアプリを使っている場合、以下の方法で削除します。
ウォールなどの右側に表示されている「Facebookページを編集」をクリック。
左メニューの「アプリ」をクリック。
アプリ一覧に表示された該当アプリの右側にある×印をクリック。
「削除」をクリック。
これでFacebookページのメニューから削除されます。
Facebookページにアクセスして「通常の接続(http)に切り替えますか？」と表示される問題について
Facebookページのiframeタブページにアクセスすると、コンテンツが表示される代わりに、「通常の接続(http)に切り替えますか？」と表示される事象があるようです。ということで本エントリーでまとめてみました。
１．問題点
セキュアな接続（HTTPS）でFacebookにアクセスしている状態でiframeタブページにアクセスすると、次のようなメッセージが表示される場合があります。
通常の接続(http)に切り替えますか？
Facebookをセキュアな接続(HTTPS)でご利用の場合、このコンテンツを表示することができません。
一時的に通常の接続(http)に切り替えますか？
ログインし直すとセキュアな接続に戻ります。
実際の画面
「続行」をクリックすればコンテンツが表示されます。
「続行」をクリックしたあと、ログアウトして再度ログインすると、再びセキュアな接続でFacebookにアクセスできるようになります。
ちなみに、iframeタブアプリ開発者がセキュアな接続（HTTPS）でそのiframeタブページにアクセスすると、次のようなメッセージが表示されます。
セキュアなタブURLを更新してください
ユーザーがブラウザからセキュア接続(https)を使用してアプリを見ることができるように、開発者コンソールにアクセスしてセキュアなキャンバスページのURLを更新してください。
実際の画面
「続行」をクリックすれば、iframeタブアプリケーションの「Facebook Integration」設定画面にジャンプしてくれます。
２．原因
「通常の接続(http)に切り替えますか？」というメッセージが表示される原因は、次の条件が重なった場合です。
- FacebookユーザーがHTTPSでFacebookにアクセスしている
- iframeタブページの「Page Tabs」の「Secure Tab URL」が設定されていない
つまり、HTTPSでアクセスしている状態でiframeタブへのアクセスがHTTPの場合に、冒頭のメッセージが表示されます。
OKのケースとNGのケースを図に示します。
以前はこの条件が重なった場合でもiframeタブページは表示されたようですが、Facebookの動作が変更されたのかもしれません。
３．対処
対処は以下のいずれかとなります。2つめの対処は厳しいかもしれません。
- FacebookユーザーがHTTPSでFacebookにアクセスしないようにする。
- iframeタブページの「Page Tabs」の「Secure Tab URL」を設定する
1つめの対処の具体的な方法は、まずアカウントメニューの「アカウント設定」をクリック。
マイアカウントの「設定」タブをクリック（選択されていればそのまま次へ）。
「アカウントのセキュリティ」欄の「セキュアな接続(https)」のチェックを外して「保存」をクリック。
本質的な対処でないかもしれませんが、これで常にHTTPでFacebookにアクセスするようになります。HTTPSでアクセスが必要な場合はこの対処は使えません。
Facebookにログインしていない場合の「いいね！」ボタンやコメントボックスについて
Facebookにログインしていない場合の、ブログに表示している「いいね！」ボタンやコメントボックスの挙動について未確認でしたので、情報展開しておきます。
１．「いいね！」ボタンについて
Facebookにログインしていない状態でも「いいね！」ボタンはクリックすることができます。
クリックするとログインを促すウィンドウが表示されます。
ログインした直後に「いいね！」ボタンが押された状態になりました。
ブラウザの他のウィンドウ（またはタブ）でFacebookからログアウトしてリロードすれば、次のように一人増えた状態で表示されます。
２．コメントボックスについて
Facebookにログインしていない状態のコメントボックスは、右下に「コメントしています...」というプルダウンメニューが表示されます。
クリックすると、ログイン可能なサービスが表示されます。
選択したサービスのログイン画面が表示されます。
ログインするとコメントボックスが次のように切り替わります。
コメントボックスの場合、右下の「変更」のリンクをクリックすればプルダウンに切り替わり、他のユーザーに切り替えたり、ログアウトすることができます。
Facebookでよく使われるようになったインラインフレーム（iframe）の注意事項
これまでウェブサイトの制作であまり使ったことがなかったインラインフレーム（iframe）ですが、Facebookが登場してからiframeタブやソーシャルプラグインなどで利用するシーンが増えてきました。
ということで、インラインフレームについての注意事項をまとめてみました。
１．親フレームでインラインフレームのCSSは定義できない
「Facebookのコメントボックスを黒背景のブログで使えるようにする」でも書きましたが、親フレームで定義したCSSはインラインフレームに適用されません。
サンプルの枠上部にある「foo」という文字と枠内（インラインフレーム）の「bar」という文字に対し、親フレームで同じスタイルを与えていますが、インラインフレームには反映されていないことが分かります。
CSSを反映できるのはiframe要素までです。
２．リンクターゲットに気をつけよう
iframe内ページのリンクにtarget属性を付与しないと、リンク先のコンテンツがフレーム内に表示されてしまいます。
次の例は、当Facebookページの「いいね！ランキング」のiframeタブページをサンプルにした失敗例です。
インラインフレームにあるリンクをクリック
適切なtarget属性を指定しないとリンク先のコンテンツがフレーム内に表示
このようなことにならないよう、適切なリンクターゲット（target属性）を設定しましょう。フレームを解除して表示する場合はtarget属性に「_top」を指定します。
各target属性の振る舞いについてはサンプルで確認してください。他のフレームに表示する方法も掲載しています。
iframe3.htmlというのは、次項のサンプルで登場でする、アクセス方法を確認するスクリプトを組み込んだページです。
３．インラインフレームで表示されているかどうかを確認するには
該当のページがブラウザから直接アクセスして表示されているのか、インラインフレームとして表示されているかを判断するには、JavaScriptで次のような判定を行います。
<script>
if(self == top){
alert("直接アクセスしています");
} else {
alert("インラインフレームでアクセスしています");
}
</script>上記のスクリプトの動作は次のサンプルで確認できます。IE6でも動作します。
iframeタブは外部ページで作成するので、何かの役に立つかもしれません（そもそもFacebookの機能で判断できるかもしれませんが）。
Facebookのコメントボックスを黒背景のブログで使えるようにする
Facebookのコメントボックスを、黒背景のブログで使えるようにする方法について調べました。2011年4月時点の調査結果です。
2011.04.16 追記
コメントボックス作成画面に「Color Scheme」が追加されました。
以前のコメントボックス作成画面
2011年4月16日現在のコメントボックス作成画面（「Color Scheme」が追加）
適用後のデザイン
よって以下の記事は不要となります。
１．問題点
Facebookのコメントボックスは白背景であれば次のように表示されます。
黒背景の場合、コメント本文などが見えなくなってしまいます。
コメントボックスの表示はfb:commentsタグを設定し、それがiframe要素として展開されます。iframe要素までは（そのページのCSSで）スタイルを設定できますが、iframe内の要素についてはスタイルが適用されません。
２．対処案１
本質的な解決ではありませんが、旧バージョンのコメントボックスにすることで黒背景でも見えるようになります。
背景を変更するには、fb:commentsタグに対して次の5つの変更を行います。
- css属性を追加（適用したいCSSのURLを指定）
- xid属性を追加（ページを一意に決めるための番号を指定）
- url属性を追加（href属性と同じ内容を指定）
- simple属性を追加（trueを指定することで不要な背景を削除）
- href属性を削除
WordPressの場合の設定例は次のようになります。
変更前（赤色部分を削除）
<fb:comments
num_posts="2"
width="500"
href="<?php the_permalink(); ?>"
></fb:comments>変更後（青色部分を追加）
<fb:comments
num_posts="2"
width="500"
css="http://www.fileden.com/files/2006/10/3/258652/dark_comments.css"
xid="<?php the_id(); ?>"
url="<?php the_permalink(); ?>"
simple="true"
></fb:comments>ただし、旧バージョンに戻すと以下の制約が発生します。
- これまで使っていたコメント情報が（多分）引き継がれません
- コメントがスレッド表示されません
- いいね！がコメントボックスの先頭に表示されます。
参考サイトは以下です。
- Facebook Plugins Dark Background Tutorial
- [TLK] Dark Background Tutorial (Comments-Box & Like-Button)
参考サイトには、旧コメントボックスの「いいね！」ボタンを非表示にする方法が書かれていましたが動作しませんでした。また、css属性の末尾に「?数字」を付与することが記載されていましたが、付与しない場合との差分が分かりませんでした。
ちなみに、CSSの変更可能なセレクタは以下に限定されている可能性があります（下記以外のセレクタのCSSを変更しても反映されなかったため）。
/* Like button text color */
div.like span.connect_widget_text {color:#eee;}
div.like div.connect_widget_confirmation {color:#eee;}
div.like span.connect_widget_text a {color:#ffc6ff;}
/* Comemnts box text color */
div.comment_body div.composer div.connected {color:#eee;}
div.comment_body div.composer div.connected div.UIImageBlock_Content {color:#fff;}
div.comment_body div.composer div.connected span.namelink a {color:#ffc6ff;}
div.comment_body div.post_area div.connected label {color:#ccc;}
div.comment_body div.show_connected a.editsettings {color:#ffc6ff;}
div.comment_body div.wallkit_postcontent h4 {color:#eee;}
div.comment_body div.wallkit_postcontent h4 a {color:#ffc6ff;}
div.comment_body div.wallkit_postcontent h4 span.wall_time {color:#ccc;}
div.comment_body div.wallkit_postcontent div {color:#fff;}
div.comment_body div.wallkit_postcontent div a {color:#c4ffc4;}
div.comment_body div.wallkit_actionset a {color:#ffc6ff !important;}
div.comment_body div.wallkit_subtitle div.post_counter {color:#ccc;}
div.comment_body div.wallkit_subtitle div.pager a {color:#ffc6ff;}
div.comment_body div.wallkit_subtitle div.pager a:hover {color:#fff;}
div.comment_body div.connect_area div.or {color:#eee;}
div.comment_body div.connect_area div.connect_button_text {color:#eee;}
div.comment_body div.wall_captcha {color:#eee;}
div.comment_body div.wall_captcha h3 {color:#eee;}
div.comment_body div.wall_captcha a {color:#ffc6ff;}
div.comment_body div.wall_captcha label {color:#eee;}３．対処案２
こちらも本質的な解決ではありませんが、以下のCSSをブログに追加することで現行バージョンのコメントボックスの背景を白くします。
.fb_ltr {
background:#fff;
}
４．その他
「いいね！」ボタンやアクティビティフィードなど、他のソーシャルプラグインでは「colorscheme」とう属性が追加されているので、コメントボックスにもいずれ追加されると思われます。試しにfb:commentsタグに「colorscheme="dark"」を追加してみましたが動作しませんでした。
それまでは３項の対処を行っておくことを推奨します。
Facebookのiframeタブ用ページをモジュール化する
Movable Typeでiframeタブ用ページを管理する場合のモジュール化について紹介します。
１．モジュール化とは
モジュール化とは「部品化」という意味で、テンプレートで共通的に利用できる部分をMovable Typeのテンプレートモジュールとして切り出し、部品化します。
iframeタブを使ったページでは、HTML5のヘッダ・フッタ部分、JavaScriptの読み込みや「fb-root」のdiv要素など、共通化できる部分があるので、本エントリーではそれらをモジュール化してみます。
２．iframeヘッダーモジュール
まず、次のような「iframeヘッダー」というテンプレートモジュールを作成します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>foo</title>
<mt:GetVar name="head_css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<mt:GetVar name="head_js" />
</head>
<body style="margin:0; padding:0">
<div id="fb-root"></div>head要素と「fb-root」のdiv要素までを設定しておきます。なお、iframeタブごとにCSSや利用するJavaScriptが異なる場合があるので、コンテンツとなるテンプレートに設定したCSSやJavaScriptを埋め込めるように、MTGetVarタグを設定しておきます。
…前略…
<mt:GetVar name="head_css" />
…中略…
<mt:GetVar name="head_js" />
…後略…３．iframeフッターモジュール
次に「iframeフッター」というテンプレートモジュールを作成します。
<script>
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/ja_JP/all.js';
document.getElementById('fb-root').appendChild(e);
}());
window.fbAsyncInit = function() {
FB.init({
appId: '<mt:var name="appID">',
status: true,
cookie: true,
xfbml: true
});
FB.Canvas.setAutoResize();
};
</script>
</body>
</html>iframe用のJavaScript読み込みとbody要素／html要素の終了タグを設定しておきます。関数FB.initにはappIDが必要なので、コンテンツとなるテンプレートから呼び出すときにappIDを取得できるようにしておきます。
FB.init({
appId: '<mt:var name="appID">',４．インデックステンプレートでのモジュールの利用
モジュール化を行うことで、インデックステンプレートには次のように記述するだけですむようになります。
<mt:include module="iframeヘッダー" />
（iframeタブ用コンテンツ）
<mt:include module="iframeフッター" appID="xxxxxxxxxxxxxxx" />実践例として、「Facebookページのiframeタブにタブメニューを表示する」に掲載しているインデックステンプレートは、次のようになります。赤色部分がモジュール化による変更箇所です。
<mt:SetVarBlock name="head_css">
<link type="text/css" href="css/jquery-ui.css" rel="stylesheet" />
<link type="text/css" href="css/styles.css" rel="stylesheet" />
</mt:SetVarBlock>
<mt:SetVarBlock name="head_js">
<script src="js/jquery-ui-1.8.11.custom.min.js"></script>
<script>
$(function(){
$('#tabs').tabs({
fx: { opacity: 'toggle', duration: 300 }
});
});
</script>
</mt:SetVarBlock>
<mt:include module="iframeヘッダー" />
<div id="tabs">
<mt:Pages tag="@facebook">
<mt:PagesHeader>
<ul>
</mt:PagesHeader>
<li><a href="#<mt:PageBasename regex_replace="/\.html/","" />"><mt:PageTitle /></a></li>
<mt:PagesFooter>
</ul>
</mt:PagesFooter>
</mt:Pages>
<mt:Pages tag="@facebook">
<div id="<mt:PageBasename regex_replace="/\.html/","" />">
<mt:PageBody />
</div>
</mt:Pages>
</div>
<mt:include module="iframeフッター" appID="xxxxxxxxxxxxxxx" />変数head_cssや変数head_jsに設定する場合は、MTIncludeタグで「iframeヘッダー」を呼び出す前に記述します。
<mt:SetVarBlock name="head_css">
<link type="text/css" href="css/jquery-ui.css" rel="stylesheet" />
<link type="text/css" href="css/styles.css" rel="stylesheet" />
</mt:SetVarBlock>
<mt:SetVarBlock name="head_js">
<script src="js/jquery-ui-1.8.11.custom.min.js"></script>
<script>
$(function(){
$('#tabs').tabs({
fx: { opacity: 'toggle', duration: 300 }
});
});
</script>
</mt:SetVarBlock>
<mt:include module="iframeヘッダー" />また、appIDは「iframeフッター」を呼び出すMTIncludeタグに、appIDモディファイとして設定します。
<mt:include module="iframeフッター" appID="xxxxxxxxxxxxxxx" />５．ウェブページテンプレートでのモジュールの利用
iframeタブ用のページをウェブページテンプレートを使ってで作成・管理するのであれば、ウェブページテンプレートを次のように設定しておけばさらに効率良く管理できると思います（実際には通常のウェブページと振り分ける必要があるので、これだけではありません）。
<mt:PageBody mteval="1" />ウェブページの本文には次のように記述します。
<mt:include module="iframeヘッダー" />
（iframeタブ用コンテンツ）
<mt:include module="iframeフッター" appID="xxxxxxxxxxxxxxx" />Facebookページのiframeタブにタブメニューを表示する
Facebookページのiframeタブのコンテンツに、jQuery UI Tabsを利用してタブメニューを表示するカスタマイズです。ここではMovable Typeと連携させる例で紹介します。
１．サンプル
「小粋空間」Facebookページにiframeタブを使った「テーマ・プラグイン・書籍」というメニューを作りました。
このメニューをクリックすると、「テーマ・テンプレート」「WordPressプラグイン」「Movable Typeプラグイン」「書籍」という4つのタブでコンテンツを切り替えられるようになっています。
タブをクリックすればコンテンツがいい感じに切り替わります。
２．Movable Typeのテンプレート構成
このページでは、Movable Typeのテンプレート構成を下の図のようにしています。
iframeタブで読み込むページをインデックステンプレートに対応させ、iframeタブの中に表示しているタブのコンテンツはウェブページを対応させています。jQuery UI Tabsはタブ切り替え時、外部ファイルのAjax読み出しをサポートしているのでこのようにしてみました。
３．テンプレートのカスタマイズ
iframeタブの作成については、「FacebookページにMovable TypeやWordPressの最近のブログ記事を表示する」の２項～５項の作業を行ってください。
jQuery UI Tabsの設定については「jQuery UI Tabsを使ってタブを実装する」を参考にしてください。
iframeタブに対応するページとして、新しいインデックステンプレートを1つ作ります。サンプルのインデックステンプレートは次のように設定しています。赤色部分がタブメニューに関するカスタマイズです。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iframe_test3</title>
<link type="text/css" href="jquery-ui.css" rel="stylesheet" />
<link type="text/css" href="styles.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="js/jquery-ui-1.8.11.custom.min.js"></script>
<script>
$(function(){
$('#tabs').tabs({
fx: { opacity: 'toggle', duration: 300 }
});
});
</script>
</head>
<body style="margin:0; padding:0">
<div id="fb-root"></div>
<div id="tabs">
<mt:Pages>
<mt:PagesHeader>
<ul>
</mt:PagesHeader>
<li><a href="<mt:PageBasename />"><mt:PageTitle /></a></li>
<mt:PagesFooter>
</ul>
</mt:PagesFooter>
</mt:Pages>
</div>
<script>
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/ja_JP/all.js';
document.getElementById('fb-root').appendChild(e);
}());
window.fbAsyncInit = function() {
FB.init({
appId: 'xxxxxxxxxxxxxxx',
status: true,
cookie: true,
xfbml: true
});
FB.Canvas.setAutoResize();
};
</script>
</body>
</html>それほど難しい内容ではなく、通常のHTMLページ表示にjQuery UI Tabsの設定を加えています。タブ部分の表示はMovable Typeのテンプレートタグを利用しています。
具体的には、MTPagesタグにtagモディファイアを与え、ウェブページのタグに「@facebook」が設定されたものだけを出力します。メニュー部分はMTPageTitleの内容を、リンクはMTPageBasenameタグの内容を出力しています。
次にウェブページテンプレートをカスタマイズします。Facebookに表示するページと、通常のウェブページを振り分けるために次のようにします。
<mt:PageIfTagged include_private="1" tag="@facebook">
<$mt:PageBody$>
<mt:else>
（通常のウェブページテンプレートの内容）
</mt:PageIfTagged>MTPageIfTaggedタグを使い、「@facebook」がつけられたウェブページであればページの本文のみを出力し、それ以外は通常のウェブページテンプレートでファイル出力します。
４．CSSの修正
jQuery UI TabsはCSSが組み込まれているので、下記のCSSで上書きします。このCSSは外部ファイルにするか、インデックステンプレートのstyle要素で追加してください。
#tabs {
line-height: 1.5;
}
.ui-widget {
font-size: 87%;
}
.ui-tabs .ui-tabs-panel {
padding: 1em 0
}
.ui-tabs .ui-tabs-nav li {
margin: 0;
}読み込みは、jQuery UI Tabs用CSSの読み込みより後方になるようにしてください。
５．ウェブページの作成
ウェブページにはFacebooページに表示したいコンテンツを入力し、タグに「@facebook」を加えます。
６．iframeタブ内にコンテンツを出力する
サンプルでは、タブのコンテンツを外部ファイルを使って読み出す方法を紹介しましたが、iframeタブ内にコンテンツを出力し、それらをタブで切り替える場合、３項のインデックステンプレートは次のように変更します。赤色が変更点です。
…前略…
<div id="fb-root">
<div id="tabs">
<mt:Pages tag="@facebook">
<mt:PagesHeader>
<ul>
</mt:PagesHeader>
<li><a href="#<mt:PageBasename regex_replace="/\.html/","" />"><mt:PageTitle /></a></li>
<mt:PagesFooter>
</ul>
</mt:PagesFooter>
</mt:Pages>
<mt:Pages tag="@facebook">
<div id="<mt:PageBasename regex_replace="/\.html/","" />">
<mt:PageBody />
</div>
</mt:Pages>
</div>
</div>
…後略…タブのhref属性をフラグメント（#...）に変更しています。フラグメントの値はregex_replaceモディファイアを利用して、ベースネームからファイルの拡張子を除去した形式を利用しています。
コンテンツ（ウェブページ本文）の出力にはMTPagesタグとtagモディファイを組み合わせます。
Facebookアプリの「タブのURL」の形式変更について
「FacebookページにMovable TypeやWordPressの最近のブログ記事を表示する」の中でFacebookアプリの設定方法を紹介していますが、「Page Tabs」の設定が変更されていました。すでにご存知の方も多いと思いますが情報展開しておきます。
httpsから始まるSSLページを設定できる「Secure Tab URL」が追加されることは知っていたのですが、「タブのURL」について、以前は「Canvas Page」のURLにサブディレクトリを追加する形式になっていたものが独自URLを設定できるようになっていました。
以前のフォーマット
2011年4月現在のフォーマット
新しい「タブのURL」に設定する内容は、「Canvas URL」の末尾に任意のファイル名を追加した形式はもちろん、「Canvas URL」と異なるドメインを設定しても表示されることを確認しています。過去に作成したFacebookアプリは自動的に新フォーマットに変更されているようです。
ネット上の情報では、この部分の設定が過去のフォーマットのものがあるので、新たに作る場合は気をつけましょう。
Movable TypeやWordPressのメインページ・アーカイブページにFacebookのコメント欄を表示する
Movable TypeやWordPressのメインページやアーカイブページにFacebookのコメント欄を表示するカスタマイズです。
「Movable TypeやWordPressにFacebookのコメント欄を表示する」ではブログ記事ページ・個別記事ページなど、1ページに1記事の場合の設定方法を紹介しましたが、1ページに複数の記事が表示されるトップページやアーカイブページにも記事別に表示することが可能です。
１．概要
イメージを下図に示します。
メインページやアーカイブページなど、Facebookコメントボックスを記事単位に表示します（①）。投稿コメントはFacebookのウォールにも反映され、コメントにはそれぞれの記事タイトルが表示されます（②）。
２．サンプル
サンプルは当サイトのトップページです。複数の記事に対しFacebookコメントが表示されます。
それぞれの記事にコメントしたところです。同じ顔ばかりで気持ち悪いのは気にしないでください。
下は、上の画面のそれぞれの投稿コメントがFacebookに表示されたところです。各コメントに異なる記事タイトルが表示されています。
３．カスタマイズ
「Movable TypeやWordPressにFacebookのコメント欄を表示する」の３項・４項・５項の作業を行ったあと、各コードを次のように設定してください。例はMovable Typeですが、WordPressも同じです。
まず、head要素に以下の内容を設定します。「xxxxxxxxxxxxxxx」の部分はそのまま設定しないように注意してください。
<div id="fb-root"></div>
<script src="http://connect.facebook.net/ja_JP/all.js#appId=xxxxxxxxxxxxxxx&xfbml=1"></script>そして、メインページやカテゴリアーカイブ・月別アーカイブなどの記事を繰り返し表示するタグの中に以下の内容を設定します。
<fb:comments href="<$mt:EntryPermalink$>" num_posts="5" width="470"></fb:comments>Movable Typeでは次のようにMTEntriesタグ内部にfb:commentsタグを設定します。
<mt:Entries>
…中略…
<fb:comments href="<$mt:EntryPermalink$>" num_posts="5" width="470"></fb:comments>
…中略…
<mt:Entries>WordPress 3.xのTwentytenテーマであれば、loop.phpのwhile文の中にfb:commentsタグを設定します。
<?php while ( have_posts() ) : the_post(); ?>
…中略…
<fb:comments href="<?php the_permalink(); ?>" num_posts="5" width="470"></fb:comments>
…中略…
<?php endwhile; // End the loop. Whew. ?>Movable TypeやWordPressにFacebookのコメント欄を表示する
Movable TypeやWordPressなどのブログにFacebookのコメント欄を表示するカスタマイズを紹介します。コメント欄の表示にはFacebookのソーシャルプラグイン「Comments」を利用します。
１．概要
イメージを下図に示します。
ブログ記事ページに表示したコメント欄からコメントを投稿すれば、即座にブログ記事ページに投稿コメントが反映されます（①）。投稿コメントはFacebookのウォールにも反映されます（②）。Facebookに表示されたブログ記事のコメントに返信すれば、返信がFacebookとブログ記事の両方に反映されます（③）。
２．動作例
実際の動作例を示します。
ブログ記事に次のようなコメント欄を表示することができます。
投稿コメントは次のように表示されます。「返信」をクリックして投稿すればコメントがインデント表示されます。
ブログ記事ページのコメントはFacebookにも反映されます。投稿したブログ記事タイトルも表示されます。
このようにFacebook上で返信することもできます。
Facebook上の返信コメントはブログ記事ページに反映されます。
３．アプリIDの取得
まず、「Create an App」のページにアクセスし、コメント欄を利用するサイト名とURLを入力（http://で開始し、末尾は"/"または"?"で終了すること）します。設定したら「create app」をクリック。
セキュリティコードを入力して「送信」をクリック。
成功したら次のような画面になります。
４．ソーシャルプラグイン「Comments」の設定
「Social Plugins」のページで「Comments」をクリック。
次の画面で以下を設定し、「Get Code」をクリック。設定フォームに入力するとフォーム下にプレビューが表示されます。
- URL to comment on：コメント欄を表示するURL。とりあえずブログのURLを設定して後で変更します。
- Number of posts：デフォルトの表示コメント数
- Width：コメント欄の幅
「Commentsのプラグインコード:」をコピーします。モザイク部分に１項で取得したアプリIDが設定されていることを確認してください。設定されていない場合は取得したアプリIDと置き換えてください。
５．プラグインコードの修正
プラグインコードを次のように変更します。「www.koikikukan.com」の部分は当サイトの例なので、利用するドメインに適宜読み替えてください。
変更前（赤字は変更対象）
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=xxxxxxxxxxxxxxx&xfbml=1"></script>
<fb:comments href="www.koikikukan.com" num_posts="5" width="470"></fb:comments>
変更後（Movable Typeの場合。青字は変更後の値）
<div id="fb-root"></div>
<script src="http://connect.facebook.net/ja_JP/all.js#appId=xxxxxxxxxxxxxxx&xfbml=1"></script>
<fb:comments href="<$mt:EntryPermalink$>" num_posts="5" width="470"></fb:comments>変更後（WordPressの場合。青字は変更後の値）
<div id="fb-root"></div>
<script src="http://connect.facebook.net/ja_JP/all.js#appId=xxxxxxxxxxxxxxx&xfbml=1"></script>
<fb:comments href="<?php the_permalink(); ?>" num_posts="5" width="470"></fb:comments>６．テンプレートの修正
４項で修正したプラグインコードをMovable TypeまたはWordPressの記事ページ出力用のテンプレートに埋め込みます。
Movable Typeでスタティックパブリッシング（静的生成）の場合はブログの再構築を行ってください。
以上です。
FacebookページにMovable TypeやWordPressの最近のブログ記事を表示する
Facebookアプリを利用して、FacebookページにMovable TypeやWordPressのCMSを使って最近のブログ記事を表示する方法を紹介します。
以下はサンプルページです。最近のブログ記事5件の概要とブログ記事1o件のタイトルを表示しています。
「FacebookページにブログのRSSフィードを表示する」ではRSSフィードを表示する方法を紹介しましたが、本エントリーの方法であればより自由なデザインでページをカスタマイズすることができます。
１．Facebookにブログ記事を表示する仕組み
イメージを図に示します。
Facebookにブログ記事を表示するには、まず利用しているCMSでFacebookに表示したいページをテンプレート等を使ってhoge.htmlなどのファイル名で出力します（①）。
次に、Facebook側で出力したページを表示するためのFacebookアプリを登録します。登録したアプリにはCMSで出力するページ（ここではhoge.html）のURLを指定します（②）。
マイページまたはFacebookページで登録したアプリの利用設定を行えば、アプリのタブがマイページまたはFacebookページに表示されるので、そのタブをクリックすれば、アプリが①のページを取得し（③）、表示します（④）。
以下設定方法です。完全に理解できていない部分もあるので認識誤りがありましたらご指摘ください。
２．Facebookアプリの登録
ここでは必要最低限の操作のみ紹介します。
「アプリケーションを作成」のページで任意のアプリケーション名を設定し、「同意する」を選択して、「アプリケーションを作成」をクリック。
表示されている文字を入力して「送信」をクリック。
３．Facebookアプリの設定
成功したらアプリケーション設定画面に移動します。「About」タブではアプリケーション名やアプリケーションのサムネイル・ロゴなどを登録します。「アプリケーション名」はFacebookページに表示する名称とは関係ないので適当につけてください。
「Facebook Integration」タブで、「Canvas」の項目にある「Canvas Page」と「Canvas URL」を設定します。今回のメインとなるページの設定ではありませんが、タブを利用するにはこの項目の設定が必須です。「Canvas Page」は登録したアプリのベースURLです。「Canvas URL」は「Canvas Page」に対応する自サーバなどのURLです。具体的には、「Canvas URL」に配置したindex.htmlは、「Canvas Page」のURLにアクセスすれば表示されるようになっています。「Canvas Type」は「IFrame」を選択します。
「Page Tabs」が今回のメインの設定となり、この項目にある「タブ名」「Page Tab Type」「タブのURL」を設定します。「タブ名」は任意の名称を設定してください。この部分がタブ名になるようですが、アプリ利用時に変更することができます（後述）。「Page Tab Type」は「IFrame」を選択します。「タブのURL」にはFacebookページに表示されたアプリのタブをクリックしたときに表示させたいファイルのURLを設定します。「Canvas URL」と異なるドメインでもOKです。
「Advanced」タブの「サンドボックスモード」を「有効にする」を設定しておけば、開発中にこのアプリを他のユーザーが利用できなくなるようです。実際に利用する際には「無効にする」を選択してください。
４．FacebookページでのFacebookアプリの利用
「マイアプリケーションのページ」の左メニューから該当のアプリを選択。
右側の「Application Profaile Page」をクリック。
「マイページへ追加」をクリック。
追加したいFacebookページなどの「Facebookページに追加」をクリックしたあと、「閉じる」をクリック。
これで追加したFacebookページのタブとして追加されます。
５．タブ名を変更する
「Facebookページを編集」をクリック。
「アプリ」をクリック。
「設定を編集」をクリック。
「Custom Tab Name:」がタブ名になるので、任意の内容を入力して「保存」→「OK」をクリック。
タブの表示が変わりました。
６．ページタブに出力するサンプル
Movable Typeで最新の5件のブログ記事を出力するサンプルです（XHTMLとHTML5が混在していてすいません）。このコードをインデックステンプレートに貼り付け、出力ファイル名を「Page Tabs」の「タブのURL」に設定したファイルとして出力できるように設定します（ファイル名にはパスも指定できます）。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css" type="text/css" title="Default" media="screen,tv" />
<title>最近のブログ記事</title>
</head>
<body>
<div id="fb-root">
<div class="box">
<mt:Entries lastn="5">
<div class="entry">
<div class="entry_info">
<h3><a href="<mt:EntryPermalink />" target="_top"><mt:EntryTitle /></a></h3>
<div><mt:EntryDate format="%Y年%b月%e日" regex_replace="/\s/g","" /></div>
<div>カテゴリ：[<mt:ParentCategories glue=" ＞ "><mtif tag="MTCategoryCount"><a href="<mt:CategoryArchiveLink />" target="_top"><mt:CategoryLabel /></a><mt:Else><mt:CategoryLabel /></mt:if></MTParentCategories>]</div>
<div>タグ：[<mt:EntryTags glue=", "><a href="<mt:TagSearchLink />&IncludeBlogs=<mt:BlogID />" target="_top" rel="tag" title="<mt:TagName />のタグ一覧へ"><mt:TagName /></a></mt:EntryTags>]</div>
</div>
<div><p><mt:EntryBody words="100" /> ...</p></div>
<iframe src="http://www.facebook.com/plugins/like.php?href=<$mt:EntryPermalink$>&layout=button_count&show_faces=false&width=450&action=like&font=verdana&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:40px;" title="いいね！ボタン"></iframe>
</div>
</mt:Entries>
</div>
</body>
</html>2011.04.02
３項のPage Tabsの画面を最新化しました。
Facebookページでノートを利用する
Facebookのノートは、ブログのようにちょっとした記事を書くために使うものです。
が、Facebookページ作成直後のメニューには「ノート」のタブがありません。Facebookページ作成直後の左メニューに表示されるのは「ウォール」と「基本データ」の2つだけです。
ということで、Facebookページで「ノート」を利用する方法を紹介します。
１．ノートを追加する
Facebookページのウォール画面または基本データ画面の右上にある「Facebookページを編集」をクリック。
「アプリ」をクリック。
「ノート」の「設定を編集」をクリック。
中央の「追加」をクリック。
表示が「追加済み（削除）」となったことを確認して「OK」をクリック。この時点で「ノート」がメニューに追加されます。
追加されたことを確認するには、画面右上の「Facebookページを見る」をクリックして、Facebookページのトップページに移動。
左メニューに「ノート」が追加されました。このリンクをクリックすれば作成したノートが表示されます（編集画面には移動しません）。ノートの編集は次項をご覧ください。ちなみに「Wall Paper」は「RSS Graffiti」というアプリケーションを追加した後に表示されるもので、本エントリーとは関係ありません。
２．ノートの編集
「Facebookページを編集」をクリック。
「アプリ」をクリック。
「アプリケーションへ移動」をクリック。
「ノートを書く」をクリック。
これで編集画面が表示されました。
編集画面ではタイトル・本文の他、タグや画像を挿入できます。画像は左右・中央の配置を決めることができます。プレビューも行えます。
画像は本文中に <Photo x> というタグを埋め込むことで表示されます。
投稿直後の画面です。
余談ですが、投稿直後の画面の左メニューにはノートに関するメニューだらけで、Facebookのトップページに移動するリンクがありません。Facebookのトップページに一発で移動するには、左上の画像か、ひとつ前の画像の上部にある「xxさん作成」の部分をクリックするしかないようです。
３．ノートを見る
Facebookの左メニューにある「ノート」をクリックしたときに表示される画面は次のようになります。
４．ノートの削除
Facebookページのウォール画面または基本データ画面の右上にある「Facebookページを編集」をクリック。
「アプリ」をクリック。
「ノート」の「設定を編集」をクリック。
「（削除）」をクリックして、「OK」をクリックすれば「ノート」をメニューから削除することができます。
FacebookページにブログのRSSフィードを表示する
Facebookページ（旧ファンページ）にブログのRSSフィードを表示する方法を紹介します。ここではRSS Graffitiというアプリケーションを利用します。Facebookページの作り方は「Facebookのファンページ作成～FBMLを使えるようにするまでの流れ」をご覧ください。
余談ですが、小粋空間のFacebookページを作りました。まだ何もありませんが25人以上の方からの「いいね」をお待ちしています（画像下の「いいね」ボタンそれです）。
2011.02.28追記：25人超えました。ありがとうございました。
小粋空間のFacebookページ http://www.facebook.com/koikikukan
１．Facebookページへのアプリケーション登録
「RSS Graffiti」のページ左にある「マイページへ追加」をクリック。
候補の一覧がでるので、追加したいFacebookページの「Facebookページに追加」をクリック。追加されると候補から表示が消えるので、「閉じる」をクリック。
追加したFacebookページに移動して、「基本データを編集」をクリック。
「アプリ」をクリック。
「RSS.Graffiti」の「アプリケーションへ移動」をクリック。
アプリケーション利用のための認証を行います。「Click HERE to authorize RSS Graffiti」をクリック。
「許可する」をクリック。
1回で認証が完了しない場合、表示されているボタンをクリックします。
「許可する」をクリック。
もうひとつの認証ボタンもクリック。
「許可する」をクリック。
すべて許可されるとStatusが次のように「Configured」なります。
Statusが「Some Permissions Required」から進めなくなった場合は、３項を参照してください。
２．フィードの追加
「+Add feed」をクリック。
フィードの情報を入力します。設定項目は次の通りです。日本語は文字化けするようです。
- Feed URL（フィードのURL）
- Source Name（ウェブサイト名）
- Source URL（ウェブサイトURL）
「click here to fetch and preview it.」のリンクをクリックすればプレビューが行えます。
プレビューはこのように表示されます。
設定が完了したら「Save」をクリックします。
３．トラブルシューティング
「Allow Publishing: Pending」というメッセージが表示されて認証画面から先に進むことができない場合は、http://www.facebook.com/settings/?tab=applications&app_id=45439413586にアクセスして、「ウォールへの投稿」を削除。
次に、http://www.facebook.com/connect/uiserver.php?app_id=45439413586&next=http%3A%2F%2Fapps.facebook.com%2Frssgraffiti%2F&display=page&perms=publish_stream&enable_profile_selector=1&method=permissions.request
にアクセスし、表示させたいページにチェックを入れる（ただしこの作業では表示させたいFacebookページは表示されず）。
４．参考サイト
参考サイトは以下です。ありがとうございました。
facebook使いこなし術 パワーユーザーが明かす「楽しむ秘訣」
facebook入門用新書の紹介です。
アスキー・メディアワークス
売り上げランキング: 4695
冒頭で「Facebookで何ができるか」を簡単に紹介したあと、Facebookの各機能についての操作方法を詳しく解説しています。キャプチャ画面を豊富に使っているので非常に分かりやすいです。Facebookの使い方をとりあえず把握したいという方におすすめです。
以下、目次です。
- 目次 はじめに
- 第1章 フェイスブック。それはもうひとつのインターネット
- 全世界6億人以上が使うフェイスブックとは
- フェイスブックを始めるとやみつきになる理由
- インターネットの中のもうひとつのインターネット
- 第2章 フェイスブックを実際に使う
- フェイスブックにユーザー登録する準備
- ユーザー登録を開始する
- 第3章 フェイスブックに投稿してみる
- フェイスブックへの最初の投稿
- まず自分の近況を投稿してみる
- 「いいね！」とコメントを入力してみる
- 投稿を削除する
- ホーム画面とプロフィール画面
- コミュニケーションの基本はウォール
- 自分以外のウォールにも投稿できる
- ニュースフィードは、必要な情報を選りすぐってくれる
- 画像、リンク（URL）、動画のシェア
- 第4章 フェイスブックで「友達」を増やすと、楽しく便利になる
- フェイスブックは「ユーザー」がコンテンツ
- 雑談はあなたを幸せにする
- フェイスブックで「友達」とつながる
- フェイスブックで知り合いを探す
- メッセージで自己紹介する
- メッセージやリクエストは即配信される
- フェイスブックがオススメする人から選ぶ
- 友達を承認する基準
- ツイッターと使い分けるべき？
- やってきたフェイスブックのブレイクは…
- ソーシャルとは何か？ という議論
- ガラパゴスなんて気にしない
- フェイスブックでバーチャルな友達を作る方法
- 友達が100人いると
- 第5章 リスト、グループ、ファンページでたくさんの人と情報をシェアする
- たくさんの人とつながる３つの方法
- リストで、安全かつ便利に写真や情報を共有する
- リストを作ってみよう
- 作成したリストをあとから修正する
- リストを使って投稿を公開する相手を限定する
- 指定したリストに含まれる人の投稿だけをニュースフィードに表示する
- リストは「プレイリスト」に似ている
- グループを使ってコミュニティを作る
- グループを作成する
- グループを自分向けにどう表示するか設定する
- グループの機能を設定する
- グループに写真を投稿してみる
- グループでイベントを告知・共有する
- グループで長文を共有する「ドキュメント」
- ホームページ、ブログの次はファンページ
- ファンページは、グループのハイグレード版？
- ファンページを作成する
- 作成したファンページを告知し、細部を作り込む
- ファンページを管理する
- ファンページのユーザーネームを取得
- ファンページの「いいね！」ボックスを外部サイトに表示する
- 第6章 最新ソーシャルゲーム「シティヴィル」攻略入門
- フェイスブックでゲームを楽しむ
- ソーシャルゲームといえばジンガ
- 最新ゲーム「シティヴィル」は街作りシミュレーション
- 4つの要素で「街を経営する」ゲームシステム
- シティヴィルの始め方
- 自分のペースで街を育てていこう
- 「友情か」「金か」
- 隣人と助け合うと、ゲームが楽しく進む！
- シティヴィル攻略のヒント
- 第7章 さらに使いこなす
- アルバムを使いこなす
- ブログと連携させる
- ツイッターと連携させる
- フェイスブックでわからないことがあったら
Facebookページ（旧ファンページ）作成～FBMLを使えるようにするまでの流れ
Facebook（フェイスブック）でファンページを作成し、作成したファンページでFBML（FaceBook Markup Language）を使えるようにするまでの手順を紹介します。
FBMLはMTML（Movable Type Markup Language）、つまりMTのテンプレートタグと同じようなものです。ネットで検索して手順を調べたところ、一番最初のページがリニューアルされているようでした。ということで、紹介するのは2011年1月30日現在の情報です。
注：Facebookで「スタティックFBML」は利用できなくなりました。新しくページを追加する場合はiframeタブなどを利用してください。iframeタブの概要や設定方法は「FacebookページにMovable TypeやWordPressの最近のブログ記事を表示する」をご覧ください。
蒲生さん率いる「Facebookファンページガイドブックプロジェクト」に参加させて頂けることになりましたので、このエントリーはそのとっかかりです。
１．ファンページの作成
ファンページを作成するには、Facebookのアカウントをもっていることが必要です。アカウントを持っている場合、ファンページ作成のページへ移動。
作成したいカテゴリをクリックすれば入力フォームが開くので、任意の名称を入力して「利用開始」をクリック。名称にはいくつかの制約があるようで、「利用開始」をクリックしたときにNGとなる場合があります。
これでファンページができあがりました。
ファンページのURLは、25名を超えるファンがいればURLを変更することができます。その情報はヘルプセンターにあります。
２．ファンページでFBMLを利用する
注：Facebookで「スタティックFBML」は利用できなくなりました。新しくページを追加する場合はiframeタブなどを利用してください。iframeタブの概要や設定方法は「FacebookページにMovable TypeやWordPressの最近のブログ記事を表示する」をご覧ください。
ファンページでFBMLを利用するためには、「スタティックFBML」というFacebookアプリケーションをファンページに追加します。このアプリケーションを加えることで、FBMLが使えるボックスを追加することができます。追加したボックスは、ファンページにある「ウォール」「写真」「ディスカッション」などのタブと並んで表示されます。
「スタティックFBML」をファンページに追加するには、ファンページ左メニューの「ファンページを編集」をクリック。
左メニューの「アプリ」をクリック。