Lập trình ứng dụng Facebook

(FASTFOOD version  – không trau chuốt sửa chữa)

UPDATE:
Lập trình ứng dụng cho Facebook sử dụng Eclipse Galileo – Develop a #Facebook #app with #Eclipse Galileo – Learn the Facebook Connect API
http://su.pr/AckWqo

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

Ngày 18/11/2010, Facebook thông báo một tính năng mới cho các lập trình viên.
– Chúng ta đã có thể tạo TestUser để thử nghiệm ứng dụng mà ko phải lo lắng về chuyện bị Facebook coi là spam.
– Các testUser có thể kết bạn với nhau (ko cần accept).
– Khi dùng xong có thể xoá đi.

– TestUser không tương tác với các account thật của Facebook được,và cũng không chuyển đổi thành account thật được.
– Không truy xuất được các nội dung công khai trên các Page (thật, hiện có).

http://mashable.com/2010/11/17/facebook-test-users/

Cần

  • 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.

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

FBML diagram

  • 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

Iframe diagram

  • 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.

iframe with 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

 

Tổng hợp các kiến thức Facebook

http://developers.facebook.com/docs/guides/web/

 

 

  • 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
About these ads

27 thoughts on “Lập trình ứng dụng Facebook

  1. 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 ?

  2. 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.

  3. 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ở.

  4. @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ì

  5. 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

  6. @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.

  7. 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!

  8. @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

  9. 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.

  10. LockeVN Nguyen :
    @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.

    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!

  11. 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

  12. Xin chào cả nhà, mình đang cần người làm các trang fan club trên facebook. Có ai quan tâm vui lòng liên lạc với:vnebridge1@gmai.com. Cảm ơn đã đọc tin

  13. chào các bạn. mình đang viết ứng dụng nhỏ trên facebook bằng PHP, nhưng tài liệu tiếng Việt ít quá. bạn nao` co’ code thì share nhá ^^(tại đang rất cần). cảm ơn các bài viết.

  14. Cảm ơn tác giả đã viết bài này. Thật hữu ích. Mình cũng từng làm app facebook bằng java và Ruby On rails. Mình thấy.

    1. Viết App FB theo hướng iframe thì chỉ cần design cho vừa với size của facebook là được. CSS, javascript dùng thoải mái. Có điều auto resize thì hoạt động tốt Firefox còn IE thì hơi cà chớn chút.

    2. Viết Theo FBML thì phải viết Javascript theo chuẩn FBJS, Design theo hướng FBML. Nhưng tiện dụng ở chỗ sử dụng lại được style facebook, dialog cũng ngon lắm. ^_^

  15. Hi cả nhà,
    Mình có tao 1 ứng dụng tên là myapp_cuongnq . Khi chạy url http://apps.facebook.com/myapp_cuongnq/ thì mình gặp lỗi này .

    Application Temporarily Unavailable
    URL https://x.x.x.x/fb/ không trả lời
    Sorry, the application you were using is experiencing a problem. Please try again later.
    Bạn nào có thể giúp mình khắc phục được lỗi này không .
    Thanks

  16. @quangcuong: bạn ko nói rõ, nhưng có lẽ bạn sử dụng iframe.

    Vấn đề có thể là do server chứa nội dung app của bạn ko chạy (Theo mình đây là lỗi do bạn chưa cấu hình SSL).

    Theo mình đoán thì bạn nên cấu hình SSL trên webserver của bạn thì link https mới chạy.

  17. Bổ sung: Ngày hôm nay, Facebook thông báo một tính năng mới cho các lập trình viên.
    – Chúng ta đã có thể tạo TestUser để thử nghiệm ứng dụng mà ko phải lo lắng về chuyện bị Facebook coi là spam.
    – Các testUser có thể kết bạn với nhau (ko cần accept).
    – Khi dùng xong có thể xoá đi.

    – TestUser không tương tác với các account thật của Facebook được,và cũng không chuyển đổi thành account thật được.
    – Không truy xuất được các nội dung công khai trên các Page (thật, hiện có).

    http://mashable.com/2010/11/17/facebook-test-users/

  18. Chào các bạn
    Để phục vụ cho các hoạt đông thương mại trong tương lai của công ty mình mình đang cần một trang fb có nhiều fan. Đính kèm các game bói vui lên trang fb là cách nhanh nhất để tăng số lượng fan. Mình định thuê các bạn lập trình dùm mình một số game bói vui. Mình ko cần các game mới hoàn toàn mình chỉ cần các bạn viết lại theo những game đã có sẵn trên fb (không cần thay đổi cơ sở dữ liêu). Ví dụ mình cần copy lại game này http://www.facebook.com/cuulongjewelry?sk=app_307761935953236 Nếu các bạn cần hãy liên lạc lại với mình qua nick yahoo quocthang_3112
    Chúc các bạn một ngày vui vẻ!
    Thân chào!

  19. Có anh/chị thống kê dùm cho em Các cách lập trình ra 1 ứng dụng trên Facebook được ko à. Em đọc mà nghe gì mà ifarem,gì mà FBJS …
    Có thể tổng quan lại cho em với được ko à. Theo mô hình giống như 1 công ty vậy.
    Cảm ơn nhiều.

  20. thì trong frame của app xuất ra TEST

    thì lại ra frame trống
    làm cách nào để khắc phục vậy???
    đường dẫn mình đã điền đúng
    mình nghĩ là host không connect được với facebook nhưng chưa khắc phục được
    bác nào giúp mình với?????

  21. cái php ấy mình lập trình bị xai nhiều nhưng mà vẫn thích lập trình
    cảm ơn bài viết rất bổ ích :)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s