javascriptで写真をアップロード

javascriptで写真をアップロードするには
FB.login() の
scopeプロパティに publish_stream を設定し
Permissionsを取得
つぎに
写真をアップロードするための
リクエストURLを生成し
form要素のaction属性に指定します
ちょっと復習のため、
コードを書いてみました
アプリ初期化
FB.init({
appId: ‘アプリID’,
cookie: true,
oauth: true
});
ログイン状態チェックは
FB.getLoginStatus(function(resp){
if(resp.authResponse){
getdata(resp.authResponse);
}else{
$(“#result”).text(“ログイン”);
}});
ログイン処理
$(“#login”).click(function(){
FB.login(function (resp){
if(resp.Response){
getdata(resp.authResponse);
}
},{scope: ‘publish_stream’});
});
アルバムに写真をアップロードするには
var access_token authResponse.accessToken;
var graph_url = ‘https://graph.facebook.com/me/photos?access_token=’
+ access_token;
フォームのaction属性にリクエストUrlをセットするには
$(“#result”)[0].action = graph_url;
javascript SDKロードは
$(function(){
(function(){
var e = document.createElement(‘script’);
e.src=document.location.protcol +’//connect.facebook.net/ja_JP/all.js’;
e.async = true;
document.getElementById(‘fb-root’).appendChild(e);
}());
});

facebookへの写真のアップロード

facebookて写真をアップロードするには
publish_stream のPermissionsを取得して
Graph API の /me/photos コネクションに
post メソッドで画像ファイル(source)と
メッセージ(message)を送信する
このとき、画像ファイルは
MIMEのマルチバイトデータで送信
MIME のマルチバイトデータで送信するには
forn要素の enctype 属性を
multipart/form-dataに指定する

fb:profile-pic タグのオプション

profile-pic タグのオプションは
以下のようなものがあります
uid
ユーザID
設定値は
ユーザID、 loggedinuser
size
サイズ
設定値は
thumb(t)
small(s)
normal(n)
square(q)
linked
プロフィールへのリンク設定
設定値は
true/false で行う
facebook.logo
facebookロゴの表示の設定
設定値は
true/false
width
幅の設定
設定はピクセル単位の整数値
height
高さ設定
設定はピクセル単位の整数値

fb:login-buttonのオプション

fb:login-buttonのタグのオプション
show-faces
プロフィール写真の表示指定
設定値はyes/no
width
幅指定
設定値はピクセル単位の整数値
max-rows
プロフィール写真を表示する行の
最大数を指定
設定値は
整数値
scope
アクセス権限の指定
設定は
Permissionsの中から設定
onlogin
ログイン後に実行する関数を指定
これには
関数名を設定する
autologoutlink
ログイン後に自動的にログアウトボタンを表示する
設定値はtrue/falseで行う
size
大きさの指定
設定値は
small 小
medium 中
large 大
xlarge 特大?
icon アイコンサイズ

XFBML

XFBMLを使うには
FB.init()で
xfbmlプロパティをtrueにして
アプリを初期化します
XFBMLでログインボタンを表示するなら
fb:login-button
タグ
プロフィール写真を表示するなら
fb:profile-picタグ 
を使うことで表示できるようになります

XFBMLでUI部品表示

XFBMLは
FBML 
(facebookのパーツを
表示するための特殊なXMLタグのこと)
をクライアントサイドの
javascriptで表示するための機能
XFBMLを使えばfacebookで使われているUI部品を
アプリやWebページに組み込みできるようになります
いかは
FBMLタグの一部
fb:activity
最近のアクティビティ
fb:add-profile-tab
プロフィールタブの追加ボタン
fb:bookmark
ブックマークボタン
fb:comments
コメントプラグイン
fb:facepile
フェイスパイル
fb:fan
ファンウィジェット
fb:like-box
likeボックスプラグイン
fb:like
いいねボタン
fb:live-stream
ライブストリーム
イベントのディスカッション
fb:login-button
ログインボタン
fb:name
ユーザ名
fb:profile-pic
プロフィール写真
fb:recommendations
おすすめ
fb:serverFbml
facebookのサーバー上でFBMLを
パースする
fb:share-button
シェアボタン
fb:user-status
ユーザステータス

PHP SDKでダイアログボックス

PHPで feed ダイアログを表示するには
ダイアログボックスのURL」を java script の
top.location.href プロパティに設定して
echo コマンドで取得する
echo “<script>top.location.href~ ‘$url’;</script>”;
Feed ダイアログボックスのかえす post_id プロパティは
$_REQUEST
これはHTTPリクエスト変数
から取得します
コードを書くと
if(!empty($_REQUEST[“post_id”]))
ちなみにIEでは
アプリ認証処理と
Feed ダイアログボックスを表示するコードが同一ファイルにあると
投稿できないということがあります
このため、Feed ダイアログボックスを別ファイルにして
例えば post_wall.php とか

サブミットされたとき
(form タグの submit ボタンがクリックされたとき)

post_wall.php が実効されるようにします
こう考えると、IEは結構面倒かも….

ダイアログボックスを使ってウォールへ投稿

facebook で
認証、ウォールへの投稿リクエストの往診などのユーザインターフェースとしてDialog
が使える
ダイアログボックスを使うと
統一されたユーザインターフェースでアプリ作成ができる
参考URLは
http://developers.facebook.com/docs/reference/dialogs/
ちなみに、これは英語サイト
でも最新技術は基本英語
ウォールに投稿するには
Feed ダイアログボックスを使う
Feed ダイアログボックスを使うには
http://www.facebook.com/dialog/feed
に必要なプロパティを指定してアクセス
キャンバスアプリの場合
最低限 app_id つまり アプリケーションID

redirect_url これはキャンバスアプリのURL
この2つの指定が必須
もし。アプリのIDが12345
キャンバスページURLが http://apps.facebook.com/test
だった場合
Feed ダイアログボックスのURLは
http://www.facebook.com/dialog/feed?app_id=12345&redirect_url=http://apps.facebook.com/test
となります(ちなみに
画面の都合上2行に見えますが、入力するときには1行です)
Feed ダイアログボックスは
投稿に成功すると
post_id プロパティに オブジェクトのIDが返ってくるので
この値をチェックして投稿の成否を調べます

PHP SDK の使い方 その4

次は、ログイン処理の実行です
ログイン処理には、
Facebookクラスの getLoginUrl()
を使います
ソースで書くと
$url =$facebook->getloginUrl(
array(‘redirect_url’=>$canvasurl)
);
echo ““;
そして、このメソッドで必要な
アクセス権限を設定します
になみに
PHP SDKの ver3.0以降の場合
redirect_url に Facebookでの
キャンバスページのURLを指定しないと
ログイン後にfacebookの
フレームが解除されます
こうなると、php入門書にあるような
真っ白なページに表示されるという
状態になりますので注意しましょう

PHP SDK の使い方 その3

引き続き PHP SDKの解説です
今回はアプリ初期化から
アプリ初期化は
new で Facebookクラスのインスタンスを
生成します
ソースを書くと
$facebook = new Facebook(
array(‘appId’=> ‘アプリケーションID’,
‘secret’=>’シークレットキー’));
となります
new を使った初期化は
androidでも使うため、覚えておくと便利です
あと、facebookではなく
大文字で、Facebookになっているので
注意しましょう
PHP SDKを使う場合
シークレットキーが必須なのも
注意しましょう
続いて、ログイン状態のチェックです
これは、
FacebookクラスのgetUser()で取得します
 
ソースで書くと
$user =$facebook->getUser();
getUser()は
ログイン済みならユーザIDを返し
ログインしていないなら0を返します
このメソッドの返り値を使い
if文で判定すれば
ログイン状態がチェックできます