4 PHÂN TÍCH VÀ THIẾT KẾ WEBSITE BÁN COUPON 1Phân tích yêu cầu
5.2.4 Tạo nút Login
Có thể đầu tư thêm thời gian và nỗ lực vào việc tạo kiểu dáng cho nút đăng nhập Facebook Connect, tuy nhiên tốt nhất nên sử dụng nút đăng nhập được cung cấp bởi Facebook. Nút đăng nhập được tạo với tag Facebook Markup Language (FBML) fb:login button được nhúng trong trang website.
Các tag FBML sẽ tự động render vào những thành phần HTML tương đương của chúng bằng thư viện JavaScript của Facebook Connect. Mặc dù vậy, vẫn phải có những dự phòng đặc biệt để bảo đảm rằng tất cả các trình duyệt đều nhận ra không gian tên mở rộng được yêu cầu bởi FBML; bằng không thư viện Facebook Connect sẽ không thể tìm thấy các tag FBML:
• Trang web sử dụng FBML phải tuân thủ theo chuẩn XHTML và sử dụng XHTML DOCTYPE: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
• Thành phần HTML phải tuyên bố không gian tên XHTML mặc định và không gian tên FBML:
Code:
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://www.facebook.com/2008/fbml">
Sau khi không gian tên fb được định nghĩa, có thể sử dụng nó trong các tag FBML. Để nhóm nút Facebook Connect trên website, hãy sử dụng đoạn mã dưới đây:
Code:
<fb:login-button></fb:login-button>
Bạn có thể tạo kiểu cho nút bằng các thuộc tính size
, background, và length.
<fb:login-button size="large" background="white" l ength="long">
</fb:login-button>
Bên cạnh đó bạn cũng có thể nhóm bộ quản lý sự kiện onlogin, bộ quản lý này sẽ được thực thi sau khi người dùng kết nối ứng dụng với tài khoản Facebook của họ. Giống như chức năng mà bạn đã sử dụng như giá trị ifUserConnected trong hàm gọi FB.init:
Code:
<fb:login-button onlogin='fb_login();'
size="large" background="white" length="long"> </fb:login-button>
Thư viện FBML sẽ thiết lập lớp của tab fb:login-button thành fb_login_ready sau khi người dùng đã đăng nhập, điều này giúp dễ dàng ẩn nút đăng nhập nếu người dùng đã kết nối với Facebook. Tất cả những gì bạn cần là một dòng CSS:
Code:
.fb_login_ready { display: none; }