funP 麻吉開發者俱樂部十月份聚會

funP 開發者俱樂部
十月份聚會
tippy@funp.com

今日議程

• 6:30~7:30 晚餐與自由交流時間
• 7:30~8:30 介紹 Facebook F8 平台開發環境
• 8:30~9:00 funP F8 Application 合作方案介紹

shindig fbOpen
http://incubator.apache.org/shindig/ http://developers.facebook.com/fbopen/

Canvas

Your application Here

應用程式頁面

Your application Here

Profile box

Narrow
Wide

個人檔案元件

Wide
Narrow

最新動態
Mini-feed
麻吉快報
事件 Newsfeed

Flow
http://apps.facebook.com/myapp/page.php?q=abc
http://myappserver.com/page.php?q=abc
<xml> </html>
Users.getInfo()
</xml>
<fbml> … </fbml>
<html>

request

API / FQL

Client library
request calls
Your
response facebook API / FQL
App
user results Server

FBML
FBJS

Server
Your
App

Modified client library
Client library
funP麻吉
facebook

Development building blocks

API FQL

FBML FBJS

API

• Users • Fbml
– getInfo – refreshImgSrc
• Friends • Feed
– get – publishUserAction
• Groups • Notifications
– getMembers – send
• Profile
• FQL – setFBML
– query

API Test Console
http://developers.facebook.com/tools.php?api

tables

Group
Friend member
uid1 uid
uid2 gid
User position Group
uid gid
name name
pic pic
sex desc

Scenario
• 顯示有使用同一個application的好友

$ids = friends.getAppUsers();
$users = users.getInfo(
$ids,
array(‘name’, ‘pic’)
);

FQL

$query = “
SELECT uid, name, pic FROM user
WHERE uid IN (
SELECT uid2 FROM friend
WHERE uid1 = $user
) AND is_app_user
“;
$users = fql.query($query);

Why FQL?
• reduce the number of requests necessary
• reduces bandwidth and parsing costs
• consistent, unified interface

FBML
Facebook Mark-up Language

顯示複雜的原件
<fb:multi-friend-selector/>

一致的外表

<fb:tabs/> <fb:tab-item/>

邏輯判斷
• <fb:visible-to-owner/>
• <fb:visible-to-user/>
• <fb:visible-to-friends/>

動作
• Visibility • Mock AJAX
– clicktoshow – clickrewriteid
– clicktohide – clickrewriteurl
– clicktotoggle – clickrewriteform

FBML Test Console
http://developers.facebook.com/tools.php
?fbml

Preview

FBML

HTML

Security

function foo(bar) {
var obj = {prop: bar};
return obj.prop;
}
function a12345_foo(a12345_bar) {
var a12345_obj = {prop: a12345_bar};
return a12345_obj.prop;
}

Security

document.getElementById(‘div’).innerHTML = ‘abc’;
document.getElementById(‘div’).setInnerFBML(‘abc’);

v = document.getElementById(‘input_text’).value;
v = document.getElementById(‘input_text’).getValue();

document.getElementById(‘p').style.display = 'none';
document.getElementById(‘p').setStyle(‘display’,'none‘);

FBJS - libraries

• Ajax
var ajax = new Ajax();
ajax.ondone = function(data) { …}
ajax.post(url);

• Dialogs
var d = new Dialog();
d.showMessage('Dialog', 'Hello World.');

• Animation
Animation(document.getElementById('container')).
to('height', '0px').to('width', '0px').
to('opacity', 0).blind().hide().go();

Getting started
1. add the “Developer” app
2. create your app
3. download the client lib
4. fill in api key & secret
5. hello facebook

1. add the “Developer” app
• go to
http://www.new.facebook.com/developers/
• click “Allow”

2a. create your app
• click “set up new application”

2b. edit app settings
1. fill in application name
2. check to agree terms
3. show optional fields
4. fill in callback url ( real url of your app on
your server)
5. fill in canvas page url ( virtual url of your app
on facebook ) and make sure it is Available

Canvas Page URL Callback URL
http://funp.com/apps/funpresent/ http://example.com/funpresent/

request request
Your
facebook App
Server

2c. edit app settings
6. select “yes” for Can your application be
added on Facebook?
7. check “users” for Who can add your
application to their Facebook account?
8. check Developer Mode
9. submit

3. download the client lib
• # wget
http://developers.new.facebook.com/cl
ientlibs/facebook-platform.tar.gz
• # tar xvf facebook-platform.tar.gz

5. hello facebook
# vim facebook-platform/test.php

<?php

include_once(‘client/facebook.php’);
$facebook = new Facebook(
‘<API_KEY>’, ‘<SECRET>’);
$facebook->require_frame();
$user = $facebook->require_login();
echo ‘hello <fb:name uid=“’.
$user.’“ useyou=quot;falsequot;/>’;

?>

Conclusion
• opportunities
– existing users and connections
– viral channels: feeds, requests, notifications
• difficulties
– FBML, FBJS

feed fql
auth profile
money marketplace
group event
… … users photos
pages

SocialApps in funP
Nathan Chiu
nathan@funP.com

大綱
• funPlugin & funPlatform
• 成功案例
• funPartner 合作方案

funPlatform SocialApps 標準
• Facebook F8 Platform
– 應用服務頁、個人檔案元件、個人檔案頁籤
• OpenSocial (測試中，近期推出)
– 應用服務頁、個人檔案元件、個人檔案頁籤
• funPlugin
– 自有的程式開發標準
– 可提供白金級應用服務開發商使用

funPlugin 特殊應用
• 紅利點數應用

funPlugin 特殊應用
• 社群網路、群組與活動應用服務

funP 競爭優勢
• 整合代替對抗
– 跨網站相簿、部落格、影音、與微網誌支援
• 專注在本地市場
– 應用服務開發商、應用服務、社群與行銷
• 開放平台
– F8、OpenSocial與OpenID

香港的 Facebook - 6Waves
• 香港公司，專心至力於中文Facebook應用服務，
現今一天有數百萬PageViews。
• 對很多香港人而言，Facebook 就等於 6Waves.
• 香港Facebook為香港地區第一的網站.

開發SocialApps 最大的困難
• 技術與整合遇到瓶頸
• 網路廣告利潤不足
• 經營成本不易掌握

加入 funPartner 合作方案
• 提供應用服務經營所需頻寬與設備
• 協助廣告代理
• 技術協助
• 行銷資源協助
• 委外合作應用服務開發

• 詳細合作方案請與我們連絡:
– singlelog@funP.com

Thank you

http://funp.com/

funP 麻吉開發者俱樂部十月份聚會

Recommended

Recommended

More Related Content

What's hot

What's hot (15)

Similar to funP 麻吉開發者俱樂部十月份聚會

Similar to funP 麻吉開發者俱樂部十月份聚會 (20)

Recently uploaded

Recently uploaded (20)