Dưới đây sẽ là một số bước để giúp bạn tạo ra ứng dụng nhỏ trên Facebook theo ý muốn; đây chỉ là những ví dụ đơn giản về viết ứng dụng Facebook dùng code HTML và ASP.Net.
Để viết ứng dụng Facebook, bạn cần một số kiến thức về các ngôn ngữ lập trình web và cần biết một số máy chủ (web server) cho phép bạn có thể đặt ứng dụng Facebook lên đó.
1. Ứng dụng Facebook dùng code HTML
Bước 1: Giả sử bạn đã có tài khoản trên Facebook, thêm ứng dụng Developer (https://www.facebook.com/developers/) vào hồ sơ Facebook của bạn, sau đó nhấn “Set Up New App”.
Bước 2: Bạn đặt tên cho ứng dụng Facebook, đồng ý với những điều khoản trên Facebook.
Tiếp tục nhập mã bảo vệ, sau đó bạn có thể tải lên một số hình ảnh để chọn làm biểu tượng (logo) cho ứng dụng của bạn.
Bước 3: Bạn có thể dùng công cụ trình biên tập WYSIWYG HTML hay notepad, để ghi nội dung bạn muốn hiển thị bên trong ứng dụng Facebook. Trong ví dụ này sẽ thiết lập ứng dụng máy tính điện tử (calculator).
<head>
<title>PC World VN Calculator by JavaScript</title>
<script type="text/javascript" src="calculate.js"></script>
</head>
<body>
<h1>PC World VN Calculator by JavaScript</h1>
<form name="calculator">
<table border="0" cellpadding="2" cellspacing="0" background="/images/background.jpg" width="233" height="259">
<tr><td align="center" style="padding-bottom:0px;padding-top:15px"><input type="text" name="win" value="0" style="height:30px;width:190px;text-align:right;font-size:20px;font-weight:bold;border:1px solid #666666;padding-right:2px;" maxlength='15'></td></tr>
<tr><td>
<table border="0" cellpadding="5" cellspacing="1" align="center">
<tr><td style="padding-top:0px"><input type="button" value="CE" style="width:40px" onClick="calc('CE')"></td>
<td style="padding-top:0px"><input type="button" value="C" style="width:40px" onClick="calc('C')"></td>
<td style="padding-top:0px"><input type="button" value="+/-" style="width:40px" onClick="calc('+/-')"></td>
<td style="padding-top:0px"><input type="button" value="%" style="width:40px" onClick="calc('%')"></td></tr>
<tr><td><input type="button" value="7" style="width:40px" onClick="calc('7')"></td>
<td><input type="button" value="8" style="width:40px" onClick="calc('8')"></td>
<td><input type="button" value="9" style="width:40px" onClick="calc('9')"></td>
<td><input type="button" value="/" style="width:40px" onClick="calc('/')"></td></tr>
<tr><td><input type="button" value="4" style="width:40px" onClick="calc('4')"></td>
<td><input type="button" value="5" style="width:40px" onClick="calc('5')"></td>
<td><input type="button" value="6" style="width:40px" onClick="calc('6')"></td>
<td><input type="button" value="x" style="width:40px" onClick="calc('*')"></td></tr>
<tr><td><input type="button" value="1" style="width:40px" onClick="calc('1')"></td>
<td><input type="button" value="2" style="width:40px" onClick="calc('2')"></td>
<td><input type="button" value="3" style="width:40px" onClick="calc('3')"></td>
<td><input type="button" value="-" style="width:40px" onClick="calc('-')"></td></tr>
<tr><td><input type="button" value="0" style="width:40px" onClick="calc('0')"></td>
<td><input type="button" value="." style="width:40px" onClick="calc('.')"></td>
<td><input type="button" value="=" style="width:40px" onClick="calc('=')"></td>
<td><input type="button" value="+" style="width:40px" onClick="calc('+')"></td></tr>
</table>
</td></tr>
</table>
</form>
</body>
</html>
Canvas URL: là nơi đặt dịch vụ web (web service) để lưu trữ ứng dụng sẽ được liên kết với Facebook (http://www.thegioigame.vn/facebook).
Hoàn tất xong bạn nhớ lưu lại các thao tác vừa làm. Bạn hãy quan tâm đến 2 khóa: API Key và App Secret, 2 khóa này cần khai báo trong ứng dụng khi có truy cập thư viện (API) của Facebook.
Từ ứng dụng đơn giản này, bạn cũng có thể xây dựng các ứng dụng có mức độ phức tạp hơn, chẳng hạn có kèm thêm RSS để cập nhật tin tức, chèn thêm các đoạn video clip… Hy vọng các bạn sẽ tạo được nhiều ứng dụng bổ ích và hữu dụng để chia sẻ cùng với bạn bè.
Bước 1:
Vào phần phát triển ứng dụng: https://www.facebook.com/developers/ , nhấn nút “Set Up New App” để tạo ứng dụng mới.
Bước 2:
Điền tên ứng dụng và chọn đồng ý, nhấn nút khởi tạo.
Nhập mã xác nhận rồi submit.
Tab About: Có thể mô tả ứng dụng trong phần Description, chọn icon, logo cho ứng dụng…
Application ID và Application Secret là 2 key của ứng dụng cho phép ta viết code truy xuất thông tin.
Canvas Page là trang ứng dụng facebook.
Canvas URL sẽ là trang ASP.Net mà ta viết code truy xuất thông tin.
Hoàn tất, nhấn Save Changes
Bước 4:
Download Starter Kit tích hợp vào Visual Studio.
Cài đặt Starter kit:
Khởi chạy Visual Studio tạo website. Chọn Facebook Starter Kit v2.1
Bước 6:
Code; chỉnh tập tin web.config các “key” cho đúng với ứng dụng Facebook đã tạo ban đầu.
Starter Kit sẽ tự tạo cho chúng ta trang Default.aspx có nội dung như hình vẽ:
Ghi chú
Image1 hiện thị hình ảnh của người tạo ứng dụng.
Control FriendList1 sẽ liệt kê hình bạn bè của người tạo ứng dụng.
DropDownList1 thay đổi sẽ làm thay đổi Image2 hiển thị hình ảnh bạn trong danh sách bạn bè friend list.
Bước 7:
Đưa website lên host free đã tạo.
Bước 8:
Chạy ứng dụng facebook: http://apps.facebook.com/pcwsample/
Hộp thoại Request for Permission hiện ra, chọn Allow.
Kết quả cuối cùng:
Chúc các bạn thành công!
Bước 6:
Starter Kit sẽ tự tạo cho chúng ta trang Default.aspx có nội dung như hình vẽ:
Ghi chú
Control FriendList1 sẽ liệt kê hình bạn bè của người tạo ứng dụng.
DropDownList1 thay đổi sẽ làm thay đổi Image2 hiển thị hình ảnh bạn trong danh sách bạn bè friend list.
Bước 7:
Đưa website lên host free đã tạo.
Chạy ứng dụng facebook: http://apps.facebook.com/pcwsample/
Hộp thoại Request for Permission hiện ra, chọn Allow.
Kết quả cuối cùng:
Chúc các bạn thành công!
Không có nhận xét nào:
Đăng nhận xét