Hướng dẫn viết facebook application | huong-dan-viet-facebook-application

Hướng dẫn viết facebook application

Mình sẽ hướng dẫn các bạn cách viết một facebook application (web app) trong vòng 10 phút. Như mọi người đều biết thì FaceBook có một lượng người dùng cực lớn và hiện tại FB cho phép chúng ta tương tác với dữ liệu đó thông qua các API (Facebook SDK Framework) dựng sẵn mà FB cung cấp cho các developer. SDK hiện tại đang chứa tại Github với phiên bản Facebook PHP SDK v.3.1.1. Nhưng hiện tại phần tài liệu hướng dẫn cho những người mới bắt đầu làm quen với việc phát triển facebook còn hạn chế, do đó để tìm một tài liệu hướng dẫn xây dựng 1 fb app hoàn chỉnh thì khá là khó.

Create Facebook Application

Bạn nào muốn trải nghiệm dùng thử SDK thì có thể truy cập vào Github tại https://github.com/facebook/php-sdk

Facebook cho phép chúng ta tạo ra một app và hiển thị tương tác đối với user theo 2 dạng:

1. Profile: đây là trang chính mà facebook tương tác. Tại đây hiển thị chi tiết các thông tin app, status và các bình luận tương tác của bạn. Rất tốt nếu ta có 1 cái widget hiển thị ở profile này nhưng facebook không cho phép javascript chạy ở trang profile này mà chỉ có thể chạy ở canvas page (trang chính của app). Và chính vì thế bạn phải sử dụng loại ngôn ngữ được facebook tạo ra và đặt tên là FBML (Facebook Makeup Language). Ngôn ngữ này hao hao với phiên bản HTML bình thường, đối với những ai đã làm quen với short code hay các template engine trong lập trình sẽ dễ dàng làm quen với ngôn ngữ này.

2. Canvas page: như mình đã nói ở trên, đây chính là trang hiển thị chính của app khi bạn muốn sử dụng 1 app nào đó thì bạn phải truy cập vào trang của app đó trước. Ví dụ như: http://apps.facebook.com/toiyeufacebook . Bạn có thể tạo nhiều page bạn muốn và facebook không giới hạn việc tạo page này.Và tại trang này bạn có thể chọn hiển thị nội dung từ 1 địa chỉ web nào đó thông qua iframe và chúng ta sẽ sử dụng phương pháp này

Ok trên đây là các thông tin cơ bản để có thể bắt đầu việc viết app:

Bước 1: Tạo 1 trang demo (2 phút)
Trang này là trang sẽ hiển thị tới user. Nếu bạn đã có một trang nào đó thì bạn có thể dùng trang của bạn, còn nếu không bạn hãy copy code bên dưới:

		
								<script type="text/javascript">// <![CDATA[

								var iRandom;

								function Restart()

								{

								iRandom = Math.floor(Math.random()*10)+1;

								alert('OK, I am thinking of a number between 1 and 10');

								}

								function Guess()

								{

								var yourGuess = document.getElementById('myGuess').value;

								if (yourGuess>iRandom)

								    alert('Too High.');

								if (yourGuess<iRandom)

								    alert('Too Low.');

								if (yourGuess==iRandom)

								    {

								    alert('Well done! You guessed it.');

								    Restart();

								    }

								}

								// ]]></script></pre>

								<div>Enter your guess between 1 and 10: <input id="myGuess" type="text" name="myGuess" />

								<input onclick="Guess()" type="button" value="Guess" />

								<input onclick="Restart()" type="button" value="Start Again" />

								<script type="text/javascript">// <![CDATA[

								Restart();

								// ]]></script>

Sau đó lưu file này trên host của bạn đặt tên tùy ý, ví dụ: http://toiyeufacebook.com/index.php

Ok bây giờ bạn hãy login vào facebook để qua bước 2

Bước 2: Đăng ký phát triển application (1 phút)
Bạn có thể truy cập vào https://developers.facebook.com/apps để tạo một application.

Bước 3: Tạo application. (30 giây)
Click vào nút Create new app

Bước 4: Điền thông tin chi tiết về application (6 phút)
Có rất nhiều thông tin nhưng mình chỉ hướng dẫn bạn điền một vài thông tin để có thể sử dụng được app của bạn sẽ tạo.

App Display Name: Tên mà app của bạn sẽ hiển thị (tương đương với tên app)
App Namespace: giống như một username riêng biệt của facebook hay yahoo id, ví dụ như mình là toiyeufacebook
Đánh dấu vào I agree to the Facebook Platform Policies và nhấn Continue

Sau khi nhấn continue fb sẽ đưa bạn đến trang Basic info của app. Tại đây bạn có thể điền thêm một vài thông tin như:
Contact Email, App Domain (ví dụ toiyeufacebook.com)
Phần Website:
Site URL: điền vào tên domain mà bạn có giống App domain
Phần App on Facebook:
Canvas URL: giống Site url và thêm tên file đã tạo phía trên ví dụ như http://toiyeufacebook.com/index.php
Secure Canvas URL: thêm secure tức là địa chỉ sẽ có dạng https nếu host của bạn hỗ trợ
Canvas Page: tại đây sẽ hiển thị dạng http://apps.facebook.com/{namespace} mà bạn đã đặt ở bước trên
Ok vậy là đã hoàn tất các thông tin cơ bản để có thể chạy được app. Sau đó nhấn Save changes.

5. Done! (Trải nghiệm)
Quay trở lại phần Home của facebook và để ý phần dưới bên trái sẽ có tên app mà bạn đã tạo, hãy click vào đó và trải nghiệm một app mà do chính tay bạn đã tạo ra

Chia sẻ Facebook Tweet