[AS3][JavaScript] Facebook 發佈訊息的方法

Standard

本篇延續 [AS3] Facebook 朋友列表在 Flash 中用捲軸方式呈現 這篇,一樣用 Jozef Chúťka 前輩所寫的 Facebook AS3 Graph API 作法,來發佈訊息到塗鴉牆上。(由於 Connect 時就應用程式就會要求發佈塗鴉牆的權限,因此這種方法就不會跳出任何發佈視窗喔)

此外也附加了一個以 JavaScript 方式發佈塗鴉牆的方法,這個就會跳出常見的發佈訊息小視窗囉。可以依需求搭配使用~

Facebook AS3 Connect 方法在此一樣不提,請自行參考教學連結

※ 其中要注意的是,發佈時需發佈成 Flash Player 10 版本,否則在 IE 中會無法在 connect 後正確 authorized!會一直跳出 callback.htm 頁面卻無法正確授權。為了這個問題卡很久,需特別注意。

  1. .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 連線設定 [結束]
// ==========================================================================
  1. 第 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)請參考範例檔。

  1. 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 寫得不是很漂亮,請多包涵 <(_ _)>

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *