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

Silverlight – lập trình viên .NET cần đón đầu công nghệ

http://weblogs.asp.net/scottgu/archive/2008/10/14/silverlight-2-released.aspx

http://weblogs.asp.net/scottgu/archive/2007/05/07/silverlight.aspx

http://weblogs.asp.net/scottgu/archive/2008/11/16/update-on-silverlight-2-and-a-glimpse-of-silverlight-3.aspx

http://weblogs.asp.net/scottgu/archive/2008/02/22/first-look-at-silverlight-2.aspx

Lập trình Yahoo Messenger Plug-in

Bài viết này thực hiện theo tiêu chí: ngắn gọn, đi vào ý chính, nhắm tới người đọc là Lập trình viên (sử dụng windows, biết sơ sơ về HTML và webapp)

Với các bản Yahoo Messsenger (YM) mới từ 8.1 trở lên, Yahoo cho phép chạy các ứng dụng con (plugin) trong YM.
Các bạn download SDK bằng cách: lên google, search từ khóa “YM plugin SDK”, download nó về (nhỏ thôi, khoảng hơn 1MB). Trong SDK ấy có file PDF mô tả chi tiết thông số kỹ thuật, và có các Plugin để Test. (nếu lười, mời down tại đây vậy)

Giải nén file Test.zip trong SDK, vào thư mục Plug-in trong thư mục cài đặt YM (Thường là ở đây C:\Program Files\Yahoo!\Messenger\Plugin). Bạn sẽ có các folder kiểu thế này:
C:\Program Files\Yahoo!\Messenger/Plugin/Test/ContentTab/test.yplugin
C:\Program Files\Yahoo!\Messenger/Plugin/Test/SidePanel/test.yplugin

Trong folder test.yplugin, file quan trọng nhất là MANIFEST/plugin.property. File này chứa các khai báo tham số của plugin cho Yahoo.

Để chạy thử một plugin, bạn vào YM, chọn menu Actions/Load a Plugin

Để bắt đầu chỉnh sửa plugin theo ý bạn, hãy mở file manifest (plugin.property):
Sửa giá trị “Location” trỏ tới file HTML của bạn.

Sau khi xong xuôi, test cẩn thận OK, mời bạn đưa plugin của mình cho Yahoo để nó xét duyệt, đưa lên danh sách chính thức hỗ trợ.
http://us-gallery.yahoo.com/messenger/

plugin.property bản tự giới thiệu của plugin cho YM
Bạn có thể hiểu đây là file config của Plugin đối với YM, ta có thể Comment bằng dấu # ở đầu dòng, config theo kiểu INI , kiểu key=value.
Không được để dấu trống ở đầu dòng, luôn viết từ đầu mỗi dòng.
Các giá trị Key Value có phân biệt hoa thường.
Mỗi dòng là một cặp KeyValue
Nếu bạn định dùng tiếng Việt trong các Value, nhớ dùng dạng UTF-8, và save file này dưới dạng UTF-8 (nhưng khi tôi thử thì không được, cứ save UTF-8 thì YM nó không load file manifest nữa)

Plugin của YM hoàn toàn là một trang web HTML (YM sử dụng một control Internet Explorer để chạy). Nên nếu bạn làm web với IE (kiểu ajax) thế nào thì làm với YM Plugin như thế.

Một số chú ý:
Dùng được setTimeout, setInterval (cho nên làm được các công việc kiểm tra theo định kỳ, định kỳ check status, định kỳ post lên loop.vn , …)
Dùng được các library javascript ngoài (tôi mới thử jquery, tuy nhiên phải bật chế độ ActiveX lên mới dùng được Jquery, vậy nên cũng phải tránh)
Dùng được cả Flash lẫn ActiveX (cái này lằng nhằng, tránh dùng, Dùng flash cũng là dùng ActiveX, phải đợi Yahoo verify rất lâu)

Mỗi lần chỉnh sửa file manifest (cái này chắc ít chỉnh thôi), muốn test lại, bạn dùng YM, đóng plugin (nhấn vào mũi tên nhỏ bên góc phải của nó, chọn Close) rồi lại chọn Menu Action/Load test plugin.
Nếu chỉnh code HTML javascript của Tab Plugin, bạn chỉ cần chuột phải vào cửa sổ plugin, chọn Refresh là được.