本篇延續 [AS3] Facebook 朋友列表在 Flash 中用捲軸方式呈現 這篇,一樣用 Jozef Chúťka 前輩所寫的 Facebook AS3 Graph API 作法,來發佈訊息到塗鴉牆上。(由於 Connect 時就應用程式就會要求發佈塗鴉牆的權限,因此這種方法就不會跳出任何發佈視窗喔)
此外也附加了一個以 JavaScript 方式發佈塗鴉牆的方法,這個就會跳出常見的發佈訊息小視窗囉。可以依需求搭配使用~
Facebook AS3 Connect 方法在此一樣不提,請自行參考教學連結。
※ 其中要注意的是,發佈時需發佈成 Flash Player 10 版本,否則在 IE 中會無法在 connect 後正確 authorized!會一直跳出 callback.htm 頁面卻無法正確授權。為了這個問題卡很久,需特別注意。
.fla
部分,第 1 格的 AS 不多提,就是 Connect、取得權限等。
stop();
import com.adobe.serialization.json.JSON
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.MouseEvent;
import flash.geom.Rectangle;
import flash.text.TextField;
import flash.utils.ByteArray;
import sk.yoz.events.FacebookOAuthGraphEvent;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
// 網站網址
var siteaddress:String="http://www.yoururl.com.tw/";
// AppID
var clientId:String="APP ID";
// 登入資訊傳遞頁
var redirectURI:String="http://www.yoururl.com.tw/callback.htm";
// 需要的 permissions
var scope:String="publish_stream,user_photos,user_photo_video_tags";
// ==========================================================================
// facebook 連線設定 [開始]
// ==========================================================================
var facebook:Facebook = new Facebook();
facebook.clientId = clientId;
facebook.redirectURI = redirectURI;
facebook.scope = scope;
facebook.useSecuredPath = true;
facebook.addEventListener(FacebookOAuthGraphEvent.AUTHORIZED, onAuthorized);
facebook.autoConnect(stage.root.loaderInfo.parameters);
fbconnect_mc.addEventListener(MouseEvent.CLICK, onClick);
fbconnect_mc.buttonMode = true;
// 點擊 Connect
function onClick(event:MouseEvent):void
{
try{
facebook.connect();
}
catch(errObject:Error) {
trace(errObject);
};
}
// Connect 成功
function onAuthorized(event:FacebookOAuthGraphEvent):void
{
MovieClip(root).gotoAndPlay(5);
}
// ==========================================================================
// facebook 連線設定 [結束]
// ==========================================================================
- 第 5 格的 AS:
stop();
// ==========================================================================
// 發布方法 [開始]
// ==========================================================================
function streamPublish(message:String, id:String):void {
/*
var data:URLVariables = new URLVariables();
data.message = message;
var method:String = URLRequestMethod.POST;
var loader:URLLoader = facebook.call(id+"/feed", data, method);
//loader.addEventListener(FacebookOAuthGraphEvent.DATA, callComplete);
*/
var media:Object={};
media.type="image";
media.src="http://patw.idv.tw/logo.png";
media.href="http://patw.idv.tw/";
var attachment:Object={};
attachment.name="Partner Studio";
attachment.href="http://patw.idv.tw";
attachment.description="這是小p的網站啊~";
attachment.caption="你的好友 {*actor*} 跟你說:來逛逛吧!";
attachment.media=[media];
var data:URLVariables = new URLVariables();
data.message=message;
data.attachment=JSON.encode(attachment);
data.target_id = id;
//facebook.call(id+"/feed", data, URLRequestMethod.POST, null);
facebook.call("method/stream.publish", data, URLRequestMethod.POST, null, "https://api.facebook.com");
}
// ==========================================================================
// 發布方法 [結束]
// ==========================================================================
streamPublish("這是我想說的話", "FB使用者UID");
我們在此定義了一個 streamPublish 方法,參數值有 message(也就是使用者暱稱後方的訊息)與 id(就是欲張貼到誰的牆上,它的 uid)。
至於 media、attachment 的設定請參考 Facebook 開發者官方文件,主要是用於附加圖檔的效果。
如果你只要發佈到使用者自己的牆上,其實可以用程式碼中被註解的那幾行的做法就可以了 .. 留下來供參考囉。
其餘檔案配置(callback.htm, Callback.swf, Facebook.as, index.html)請參考範例檔。
- index.html 的 code 列出如下,也包含了 JavaScript 的發布方法:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head runat="server">
<title>Facebook StreamPublish Test</title>
<style type="text/css">
#FacebookOAuthGraphTest {
width:550px;
height:400px;
margin:0 auto;
}
</style>
</head>
<body>
<div align="center">
<div id="flashContent"></div>
</div>
<div id="fb-root"></div>
<script type="text/javascript" src="Scripts/swfobject.js"></script>
<script type="text/javascript">
var flashVars = {};
var params = { menu: "false", allowScriptAccess: "always" };
params.wmode = "opaque";
var attributes = { id: "FacebookOAuthGraphTest", name: "FacebookOAuthGraphTest" };
swfobject.embedSWF("main.swf", "flashContent", "550", "400", "9.0.47", "Scripts/expressInstall.swf", flashVars, params, attributes);
</script>
<script type="text/javascript">
function streamPublishForFriend(friend_uid, msg) {
FB.ui(
{
method: 'stream.publish',
message: msg,
attachment: {
name: '測試用 js 發布',
caption: '{*actor*} 說要測試看看囉!',
href: 'http://patw.idv.tw',
media: [{ 'type': 'image', 'src': 'http://patw.idv.tw/logo.png', 'href': 'http://patw.idv.tw'}]
},
target_id: friend_uid,
action_links: [{ 'text': 'Partner Studio', 'href': 'http://patw.idv.tw'}],
user_prompt_message: '你想要對你的朋友說什麼呢?'
},
function(response) {
if (response && response.post_id) {
alert('已經發布');
} else {
alert('未發布');
}
}
);
}
</script>
<a href="javascript:streamPublishForFriend('FB使用者UID', '測試喔');">以 js 發布</a>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({ appId: 'APPID', status: true, cookie: true, xfbml: true });
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/zh_TW/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
} ());
</script>
</body>
</html>
擺放到正式對外的主機上,應該可以看到正常運行的頁面。
畫面下方應該有 「以 js 發布」 的文字,點擊後應該可以看到熟悉的 FB 發佈訊息框跳出,使用者可自行輸入發佈文字 .. 送出或略過 JavaScript 也會判斷傳回不同狀態的 alert。
實際運用上也可在 Flash 中透過 AS3 的 ExternalInterface 語法來 call 這個方法。
好了,最後是範例檔(CS4)。
有些 code 寫得不是很漂亮,請多包涵 <(_ _)>