Lập trình ứng dụng Facebook
(Draft version – ghi chú nhanh, chưa trau chuốt sửa chữa)
Vào đây tìm hiểu thêm thông tin (tiếng Anh)
http://developers.facebook.com/get_started.php
- Chuẩn bị kỹ thuật, server
- Thêm ứng dụng Facebook Developer vào account Facebook của mình, đây là chỗ quản lý và cấu hình các ứng dụng mà bạn phát triển
- Thiết lập tham số cho ứng dụng mới của bạn
- Phát triển ứng dụng của bạn
- Quản lý ứng dụng của bạn
Cần có facebook account
Cần biết lập trình một ngôn ngữ (dùng để viết) web nào đó, VD như PHP, Ruby on Rails, JavaScript, Python, ASP.NET — Nhất là những nền tảng ngôn ngữ có sẵn thư viện API để viết Facebook app (PHP, ASP.NET).
Hiểu biết cơ bản về Internet, SSH, MySQL, và Unix
Biết sử dụng Web hosting, có host để xài (để chứa ứng dụng của bạn)
Server cần chạy được HTML, tối thiểu một nền tảng lập trình web PHP (có cURL) và/hoặc .NET. Nếu có kết nối CSDL càng tốt
Cần cài ứng dụng Developer của Facebook
Vào mục này http://www.facebook.com/developers/ , chọn allow (để sử dụng facebook app Developer trong profile của mình)
Nhấn “Set Up New Application”. Khai báo, submit.
Xem thêm về các trường có thể khai báo tại đây: http://wiki.developers.facebook.com/index.php/Creating_a_Platform_Application
Có 2 thông tin quan trọng cần lưu ý:
* API key: chuỗi này là định danh ứng dụng của bạn với Facebook (về sau khi gọi API tới facebook luôn phải đính chuỗi này vào)
* Chuỗi bí mật của ứng dụng: Facebook sử dụng key này để xác định ứng dụng nào đang gọi, bạn ko được share key này cho ai khác.
Lưu ý, mỗi khi sửa thông tin của App, sẽ mất vài chục phút để update trên các Server của FB.
Các trường thông tin cần sửa là:
Canvas Page URL (url trên facebook để truy cập ứng dụng của bạn, lúc test bạn sẽ chạy thử từ URL này)
Canvas Callback URL (url của ứng dụng, mà bạn host trên site)
Tóm lại: đây là mô hình của ứng dụng trên Facebook: User Facebook Website của bạn (hay ứng dụng của bạn)
Do vậy, bạn nhất thiết phải có một webserver trên mạng (hosting, hoặc server riêng). PHP và MySQL là nên có, dù không bắt buộc.
Viết facebook app bằng .NET (dùng VS2008 và bộ Toolkit nguồn mở)
http://www.stevetrefethen.com/wiki/Facebook%20application%20development%20in%20ASP.NET.ashx
Một số phần quan trọng để ứng dụng của bạn thực sự trở thành một phần của facebook
Kiểu dáng phù hợp http://devtacular.com/articles/bkonrad/how-to-style-an-application-like-facebook/
Liệt kê App lên Application Directory
Chỉnh sửa các thông tin cơ bản của ứng dụng thật đầy đủ, nhất là trang About của App
Canvas Page: là nơi hiển thị chính của ứng dụng, là nơi cho user tương tác với App của bạn
Profile Box: ứng dụng của bạn có thể được hiển thị trên trang Profile của user
Application Menu: menu nhỏ bên dưới góc phải, tương tự như menu Start của Windows.
Xài FBML hay iframe cho ứng dụng của bạn?
http://wiki.developers.facebook.com/index.php/Choosing_between_an_FBML_or_IFrame_Application
FBML
Dựng trang nhanh dễ, dùng thẻ của facebook
Thể hiện các thành tố cơ bản của facebook rất đơn giản (chỉ cần ghi thẻ tương ứng là xong)
URL và kiểm tra xác thực user đơn giản
IFrames
Linh hoạt, thích viết gì thì viết, vì bản chất là User tương tác với trực tiếp với trang nằm trên hosting của mình
Chuyển các ứng dụng có sẵn sang dạng Facebook dễ dàng
Nhanh hơn khi sử dụng, User view trang không cần qua Proxy của FB để render các thẻ
Sử dụng JavaScript, HTML, CSS của mình (xài jquery, blueprint vô tư)
Chạy ajax nhanh hơn do user chạy trực tiếp trang của mình (không qua proxy)
Debug dễ hơn (vì mã HTML và js là nguyên bản)
vẫn chỉnh được kích thước (auto resize), không ngại bị scrollbar (dùng thêm js của facebook trong iframe)
Khuyên dùng: nên xài iframe, ko phải tái nạp các thành phần topbar và appbar,chatbar của Facebook, vẫn tận dụng được tốt FBML nếu dùng XFBML.
JS của facebook sẽ scan DOM và render lại các thẻ fb trên chính browser, bớt được các vòng roundtrip trên app server của mình
trích xuất dc URL trong iframe của mình ra trang facebook container (dùng js của facebook trong iframe của mình)
Nếu đang dùng iframe, có thể chuyển trang thành dạng FBML, sử dụng fb_force_mode
Có thể dùng HTML, đánh dấu, và dùng javascript lib của Facebook để có khả năng hiển thị tương tự FBML
http://wiki.developers.facebook.com/index.php/Using_HTML_to_Imitate_XFBML
Các thành phần cơ bản quan trọng của Facebook App
* API, gọi hàm, lấy dữ liệu trả về từ Facebook.
* FBML, Facebook Markup Language, ngôn ngữ mô tả của Facebook, khi ứng dụng trả về FBML, đi qua Proxy của Facebook, các thẻ fbml sẽ được render để trả về HTML thực cho User.
* XFBML, một mở rộng của FBML, sử dụng javascript để render FBML trên trình duyệt của User, không đi qua proxy.
* FQL, Facebook Query Language, lấy dữ liệu sử dụng dạng ngôn ngữ tựa như SQL query, không cần dùng API. Giảm tải lời gọi API, chỉ lấy những gì cần, tránh dùng nhiều round trip (nhiều lần gọi API) để lấy thông tin. (cách dùng tương tự như gọi API vì nó là một hàm API mà, bạn gọi API fql.query với tham số là query của bạn)
http://developers.facebook.com/news.php?blog=1&story=257
* FBJS, Facebook javascript
Facebook Connect
- biết được user facebook đang ở trên site của bạn
- đưa bạn bè lên site của bạn
- xuất bản thông tin mới từ site lên stream của các bạn facebook đã connect
- làm cho user comment được thông tin trên site bạn, và hiện cả trên facebook
Di cư ứng dụng web social của bạn lên facebook
Chuyển hết kho user lên facebook account: http://wiki.developers.facebook.com/index.php/Express_Registration
Xây dựng 1 Apps cho Facebook như vậy chẳng dễ chút nào.
Bạn đã viết đuợc Apps nào chưa ?
Viết App cho FB không khó, chỉ là với anh em Dev ở VN thì ít tài liệu tiếng Việt, ít người làm rồi mà lại phổ biến kiến thức cho anh em thôi.
Bọn tớ làm game trên facebook.
Mình thấy cũng hơi khó khó, vì app của mình sử dụng javascript nhiều, nên không thể dùng FBML của facebook được, vì vậy phải nhúng vào dạng iframe, cho nên cũng hơi phức tạp một chút, thực ra cũng không phức tạp lắm. Nhưng mình chưa biết cách điều chỉnh size của iframe, không biết facebook có cho hay không? vì đôi khi trang web của mình thêm nội dung dài ra, thì iframe phải có thanh cuộn, nhưng vậy thì chẳng đẹp. Mình nghĩ cho iframe dài thêm luôn, nếu có cuộn thì cuộn nguyên trang facebook luôn, chứ không phải cuộn có một iframe thấy nó dở.
@Toán:
nếu bạn muốn làm apps tương tác linh hoạt, nhanh gọn thì có 2 cách là xài iframe/ajax và flash thôi.
– Xài flash thì dùng FBML cho tiện, đơn giản, dựng nhanh, giống như Bard Buddy vậy. Tương tác hoàn toàn trên flash, FB App chẳng qua chỉ là canvas cho flash của mình thôi.
– xài iframe thì bạn vẫn chỉnh kích thước iframe được (dùng FBJS), tuy nhiên chỉ chỉnh được chiều dài thôi nhé, chiều rộng của canvas là fix rồi.
Thực ra mà nói thì mình thấy thanh cuộn trong iframe thì lại dễ nhìn hơn, và làm lại đơn giản hơn đấy.
BONUS:
1. XFBML mình thấy chưa ổn lắm, setup khá nhì nhằng, mà ý tưởng dùng js để render FBML tag trên browser cũng chẳng hay ho gì, nói chung là chưa nên xài XFBML ngay.
2. Facebook không cho xài js lung tung trên trang của nó tất nhiên là đúng thôi, vì nếu xài được jquery trong context trang Facebook thì bạn có thể thao tác toàn bộ giao diện cũng như dữ liệu của user rồi còn gì
Thấy khó hiểu quá nhỉ??nhưng mình rất thích Lập Trình…nên mình sẽ cố gắng tìm hiểu kỹ hơn…cám ơn về bài viết
———————————————————
tuyen dung | viec lam |tim viec
@nhattruong: welcome bạn
lập trình với API của một hệ thống khác tất nhiên là khó hiểu hơn nhiều so với cách programming bằng các ngôn ngữ thông dụng (PHP C# Java …) vì nó khác biệt ở rất nhiều chỗ:
– Mình phải “gọi hàm” bằng cách mở một URL, nhận kết quả bằng cách parse response nó trả về cho mình …
– Kiểu dữ liệu là không xác định trước, chưa kể đến chuyện họ thay đổi API
– Thường vướng chuyện security, cần phải cài đặt authenkey, tokenkey … các kiểu thì họ mới cho mình xài API của họ
– Render UI cũng phải theo kiểu của họ, thường cũng chẳng có chỗ nào mà lưu trữ dữ liệu chứ đừng nói đến database và SQL. Môi trường chạy ứng dụng của bạn có thể bị hạn chế rất nhiều, phải chạy trong hệ thống của họ, họ cho gì thì dùng nấy.
– Bất đồng bộ (async), hầu như không debug được …
Như facebook API là khá thoải mái về truy vấn + lưu trữ dữ liệu, UI render cũng đơn giản, lại cho nhúng dạng iframe nên làm app phức tạp được đấy. Bù lại với những hạn chế là họ làm hộ mình những việc còn khó hơn nhiều: hosting, security, userbase lớn vô cùng (hàng trăm triệu user) …
Về sau bạn có làm app trên nền tảng cloud computing thì cũng đại loại như thế này.
hic, mình là dân design, nhưng mà cũng muốn làm cái fbapps này, mình đang mò mò, có cái này mình không hiểu là khi mình dùng mã ví dụ của FB lấy 25 id của 25 friends thì khi chạy ứng dụng, chỉ mình mình xem được, còn acc của các bạn bè thì không thể xem, mình nghĩ là do API đúng ko ạ?
Thứ 2 là khi chuyển sang code ví dụ Using HTML to Imitate XFBML ở http://wiki.developers.facebook.com/index.php/Using_HTML_to_Imitate_XFBML thì không thể chạy được ứng dụng!
Không hiểu là tại sao?
Mong được giải thích!
Cảm ơn rất nhiều bạn LockeVN Nguyen – tác giả bài viết!
@rhino: welcome bạn
Khi chạy ứng dụng mà chỉ mình bạn xem được là do cơ chế security API của facebook, vì bạn đang ở chế độ development để test. Bạn cần phải publish ứng dụng của mình tới facebook apps, sau đó bạn bè của bạn mới “cài đặt” vào profile của họ được.
Nếu xài HTML tag thay cho XFBML, thì thực chất là bạn phải sử dụng FB JS để render. Bạn xem cách dùng http://wiki.developers.facebook.com/index.php/JavaScript_Client_Library ở đây. Tuy nhiên mình cũng phải lưu ý là cách này thực sự không hay, và tránh dùng:
1 là: nếu trình duyệt ko được hỗ trợ bởi FBJS, thì sẽ không chạy được
2 là: nếu trình duyệt tắt JS thì hoàn toàn không hiển thị được
3 là: dùng JS để render tốn tương đối nhiều lần request/response, nói chung sẽ chậm
4 là: mình thấy ngay cả mấy sample trong link hướng dẫn FBJS (link mình đính bên trên) cũng not currently working —> có thể coi đây là cách không được FB khuyến khích, chẳng nên dùng
Thân
Mình đã tạo được cái apps nho nhỏ, chỉ cho thêm thêm được vài mẫu code có sẵn trên FB wiki, chưa làm được gì riêng cho mình.
Thank bạn rất nhiều.
Mình chưa biết vào phần nào để public ứng dụng bạn có thể chỉ giúp mình được không? Cám ơn!
Hihi, bài viết hữu ích quá. Cám ơn bạn nha. Mình đang nghiên cứu cách viết app trên facebook
Hy vọng sẽ được trao đổi với bạn nhiều