跳到主要內容

Facebook - 發佈訊息至塗鴉牆

源起

最近剛好有時間,想讓國軍登出倒數計時器擁有更好的UI。回顧FB Javascript API,原先FB.UI stream.publish發佈方法已經過時了,取而代之的是feed方法。毅然決然一邊修改一邊整理篇筆記,好讓鄉民們可以更快上手。首先我會說明Graph API是怎麼做的,接著再告訴大家如何透過Javascript使用FB Dialog做發佈塗鴉牆動作。

Graph API

打卡、送禮物、分享連結都是發佈至塗鴉牆的功能,使用相當廣泛。而它的核心,就是使用Graph API的user_id/feed做POST。我直接透過Graph API Explorer來做說明:


請用上方的API參數與下方的結果做比較。message通常是User輸入後的訊息;link有可能是你分享的連結或是使用者點擊後預計處理的動作,例如送禮物、開寶箱等,可能會連到App的某一個ActionURL;place就把它當成打卡地點,必須是地點id;picture必須要填入一個完整的URL;name、caption、description就是圖片右邊的那些文字了,如果沒輸入會直接從link中自動抓取metadata顯示。


picture的部分你也許想直接使用臉書上的照片,但這些照片必須有別人看的到的權限,否則會出現「FBCDN image is not allowed in stream」錯誤訊息。你可以選擇把照片放到網路上開放空間,我是放在picasa。如果是放在自己的Server,當user的朋友看到他post的feed時,就會去你的server讀取一次,這將會是一種資源浪費,所以要好好利用「網路資源」。假如是照片分享或打卡程式,應會先將照片上傳至User的相簿中,再做post feed的動作,這是另外一種做法。

Feed Dialog with Javascript

有了Graph API概念後,使用Javascript API就很簡單了! 直接看範例:

var publish = {
	display: 'iframe',
	method: 'feed',
	picture: 'https://lh3.googleusercontent.com/-uFOSXi8Vktk/USTwsItTxjI/AAAAAAAAAMY/Xj4hioX-DxA/s207/lacd_surprise.jpg',
	link: 'http://apps.facebook.com/leavearmycountdown/',
	name: '好好關注你的兄弟吧!',
	caption: ' ',
	description: message
};
FB.ui(publish, null);

在UI上某個button會bind onclcik的動作,會去呼叫上方javascript的method,就是把該填的東西填一填而已。display有其它幾種方式,iframe是我試過在各瀏覽器不會有問題的方法;而caption傳入空格目的是不想讓它以link顯示;FB.ui第二個參數是callback function,這裡我沒特別需要所已設為null;message欄位我在這沒宣告,因為我預期是要讓使用者自行輸入。

我習慣將與FB有關的東西集中放在一起,使用singleton的方式做宣告。

FacebookUtillity.postMessageToWall = function(post_message,
	post_picture, post_link, post_name, post_caption, post_desc, callback){
 
   var publish = {
    display: 'iframe',
	method: 'feed',
	picture: post_picture,
	link: post_link,
	name: post_name,
	caption: post_caption,
	description: post_desc,
	message: post_message
   };
   FB.ui(publish, callback);
};

如果想發佈至朋友的塗鴉牆呢? 多加一個to欄位即可。對於Graph API來說,就是對friend_uid/feed做POST,

Summary

如果你的應用程式是以iframe的方式顯示在Facebook中,會適合用Facebook Dialog的方式發佈,因為這較有UI整合性。但如果你是屬於另外一個web site或server side要做發佈的動作,可以透過Graph API。如果是iOS或Android也有SDK可以做出Dialog的效果喔。

Reference

留言

這個網誌中的熱門文章

PostgreSQL - Unattended installation on windows

Introduction 要將別人軟體包裝到自己軟體中,不可或缺的東西就是Unattended installation。以Unattended installation來說,我們可以選擇透過Installer的silent mode安裝,也可以透過把目標軟體做成portable的版本。本篇文章分享這兩種方法,教導大家如何將PostgreSQL透過Unattended installation方式安裝到目標系統成為service。 Note. 本篇以PostgreSQL 10.7為例。 Install with installer Tips 安裝程式或反安裝程式的參數,除了可以直接上官網搜尋Installation User Guide以外,也可以直接使用help參數查詢: postgresql- 10.7 - 2 -windows-x64.exe --help Windows安裝程式主要有EnterpriseDB與BigSQL兩種。BigSQL版本安裝元件是透過網路下載且支援參數不如EnterpriseDB版本多,以我們需求來說,我們傾向於使用EnterpriseDB版本。接下來分享給大家安裝與反安裝方法。 Installation @ echo off set INSTALL_DIR =C:\postgres10 set INSTALLER =postgresql- 10.7 - 2 -windows-x64.exe   rem options for installation set SSMDB_SERVICE =postgresql- 10 set MODE =--unattendedmodeui none --mode unattended   set DB_PASSWD =--superpassword postgres set DB_PORT =--serverport 5432   set SERVICE_NAME =--servicename % SSMDB_SERVICE %   set PREFIX =--prefix "%INSTALL_DIR%" set DATA_DIR =--datadir "%INSTALL_DIR%\data"   set OPTIONS =

How to install RIDE on Windows?

Introduction 多年沒在Windows上開發RobotFramework,趁著這次整理一下RIDE安裝方法。 目前RIDE最新版本與Python對應版本如下: (3.6 < python <= 3.11) Install current released version (2.0.8.1) with: pip install -U robotframework-ride 安裝Python 直接到Python官網找尋最新的3.11版本,我使用3.11.9: link 。安裝就是一直下一步而已。 安裝wxPython 每次安裝RIDE最困難的都是wxPython。看了一下 官網 描述,我就姑且相信一下: 接著進入下 載頁面 就有安裝教學。基本上就是到Python目錄下的Scripts直接執行以下command: pip install -U wxPython 安裝RIDE 接著就如RIDE官網所說,執行以下command: pip install -U robotframework-ride 啟動RIDE 直接在相同目錄下執行ride就可以啟動了,你也可以直接在桌面建ride連結,加快下次啟動時間。 沒想到這次這麼順利就安裝完成了。因為我是使用java去啟動robot framework,就不特別講要怎麼使用pip安裝robot framework了。

Hello World!

即將要搬家,因此舊網頁內容將慢慢轉移至Blogger。 如果要存取舊網頁,可以使用以下連結: https://wiki.tonylin.idv.tw/dokuwiki/doku.php