Canvas 型アプリの横幅は
デフォルトだと 760ピクセルの固定になっています
内部フレームの幅、高さを自分で決定したい場合
JavaScript test console のサンプルにある
camvas の custom-size のようにします
例えば
<script>
FB.Canvas.setAutoResize(false);
FB.Canvas.setSize({ height:200, width:760});
</script>
FB.Canvas.setAutoResize(false);
は自動的にサイズが変更されることを無効化します
false は大抵無効化という意味です
FB.Canvas.setSize({ height:200, width:760});
で内部フレームの大きさを指定しています
今回は 高さ(height) 200 ピクセル
幅(width) 760 ピクセル
となっています
カテゴリー: ｆａｃｅｂｏｏｋ app develop
Canvas型アプリ
おみくじアプリのように
Canvas 型アプリでは
アプリ自体はfacebook 上から見て内部フレーム
iframe で表示されるけど
HTMLの内容は完全なHTMLファイルではないので注意
逆に。完全にHTMLファイルを
Canvasとして表示することは不可能
<head>タグや
<head>タグ内に書かれた script タグなどは取り除かれ
bodyタグの中身だけの状態になるので注意
FB.init() のパラメータ
ＦＢ．ｉｎｉｔ() では
JSONハッシュオブジェクトを引数として指定します
パラメータはいかのようになります
appid
アプリのID
cookie
クッキーサポートなら true
status
最新の状態を取得するなら true
xfbml
XFBMLタグをパースするなら true
oauth
OAuth2.0 を使ってログインするのに指定
これは true にしないとだめ
logging
ログの出力をするなら true
channelUrl
チャンネルファイルへのURlを指定
チャンネルファイルは
JavaScript SDK へのURLが指定された
<script>タグだけ記述する
authResponse
FB.getAuthResponse() で取得できる内容を
受けとるなら true
hideFlashCallback
Flash を使用する Canvas型アプリを開発するなら true
frictionlessRequests
アプリケーションリクエストを友達に送るとき
確認画面を出さないようにするオプションを表示するなら true
facebook 提供の JavaScript 関数を使う場合
Ｆａｃｅbook で提供されている JavaScript を使う場合
<div id=”fb-root”></div>
が必要です
これが、facebook の関数を呼び出すための
JavaScript を呼び出したとき必要になります
それと、ライブラリを読み込むため
<script type=”text/javascript” src=”http://connect
.facebook.net/en_US/all.js”></script>
も必要です
これで、Facebook Graph API を簡単に呼び出せます
facebook アプリと文字コード
10日でおぼえるFacebookアプリ開発入門教室
を購入し、
おみくじアプリ作成のところでつまづいたので、対処法を書いておきます
今回のつまづきは
chrome や IS04 のブラウザを使ったときの問題でした
firefox で行うぶんには問題ありません
まず、通常にすすめて問題はありませんが
最初に
index.html
を作成し
コードをすべて写したところ、
firefox では通常に動くのに chrome では文字化けするという状態でした
文字化け状態でクリックしても
おみくじの結果はでません
解決方法として
一番最初に
<meta charset=”utf-8″>
を
追記して、文字コードを指定します
これで、無事 chrome やスマホでも実験できます
ちなみに、chrome と IS04（ａｎｄｒｏｉｄ）
がダメだったのは、ブラウザの処理が同じためです
これで、無事にすすめます
ちなみに、この本の内容を実行するときには
レンタルサーバがなくても
XAMPP で代用できます
facebookアプリ開発を行う際の情報交換サイト
10日でおぼえるFacebookアプリ開発入門教室
を購入しました
この本に載っていましたが
facebookアプリ開発を行う際の情報交換サイトが紹介されています
ちなみに、日本語サイトです
ほとんど最新の情報は英語なので、英語になれるまでは、こちらを使うとよいかもしれません
https://www.facebook.com/groups/tyhuik6r
また、この書籍のサポートサイトもあります
https://www.facebook.com/pages/10daysfaceboooksupport/223843231046487
投稿時のエラーメッセージの例
以下はエラーメッセージの例です
Error walidating access token
Session has expired at unix time XXXXXX
The current unix time is XXXX
セッションの時間が制限を過ぎている
(#289)Requires extended permission:
publish_streem
拡張アクセス権限 publish_stream が必要
(#100)Required parameter “user” was not provided
指定されたパラメータ user が指定されていない
(#506)Duplicate status message
同じ内容が直前に投稿されている
Unsupported post request
入力されているURLでは指定された操作ができない
(#100)The parameter place is required
パラメータに place が必要
Graph API Exploer でウォール投稿
今回は Graph API Explorer でウォールへ投稿です
https://developers.facebook.com/tools/console/
へアクセスし
参考資料 > tools > SDKs & Tools をクリック
次に
Tools のところにある
Graph API Explorer
をクリック
次に、ニュースフィールドの内容を取得するため
Graph API Explorer のアクセス権限を変更します
アクセストークン取得 をクリック
でてきたダイアログから
Extended Permissions
をクリック
read_stream
にチェックを入れ
Get Access Token をクリックすれば
次に表示されるダイアログで許可を求められるので
許可すると
アクセストークンのところに新しいアクセストークンが表示されます
次に
自分のウォールの内容を表示するため
URLの最後に
me/posts
を追記します
最初に
https://graph.facebook.com/
がかかれているので
https://graph.facebook.com/me/posts
とします
最後に送信をおすと
自分の投稿内容が
JSON形式で表示されます
とはいっても、過去に自分が投稿したものが表示され、
実際にはまだウォールには投稿されません
今度はウォールに投稿するために
Grap API Explorer の権限を変更します
もう一度、
アクセストークンを取得をクリックし
Extended Permissions をクリックし
publish_stream
にチェックを入れます
最後に
Get Access Token
をクリックすると、またしてもダイアログがでてくるので
許可する をクリックします
次にURLを
https://graph.facebook.com/ユーザID/feed
として
となりの GET を POST へ変更します
次に、フィールドの追加をクリックし
name
のところへ
message と入力し
value には
ウォールに投稿する文章を入力します
最後に送信をおすと、実際にウォールに文章が投稿されます
ちなみに、コンソール画面には
戻り値のポストIDが表示されます
java script Test Console でウォール投稿
javaScript Test Console でウォール投稿してみます
https://developers.facebook.com/tools/console/
へアクセスし
参考資料 ＞ Tools ＞ JavaScript Test Console
とクリックしていきます
次に example >fb.ui の中にある feed をクリックすると
ダイアログがでてくるので
何かメッセージを書き込み、シェアをおすと
実際にウォールに投稿されます
ちなみに、アカウント取得してログインしていないと書き込まれません
JavaScript Test Console のサンプルスクリプト
javaScript Test Console には37種類のサンプルがあります
大きく分けると
・認証
アカウント情報の表示、パーミッションをつかったログイン
・Canvas
Canvas型アプリの場合の Canvasの設定
・API
Facebook Graph API を利用した情報の取得
・UI
Facebook Dialog を利用したポップアップ画面の表示
・XFBML
XFBMLを使ったソーシャルプラグインの表示
例として いいね ボタンとか
あと、スクリプトのログの出力は
サンプルソースの右にでます