LẤY KHÓA API
Hãy bắt đầu bằng cách truy cập vào developers.facebook.com và đăng nhập bằng tài khoản Facebook của bạn. Nhấp vào nút Apps ở trên cùng của trang và chọn Register as a Developer. Điền vào tất cả những thông tin cần thiết và nhấn Send để chuyển đến trang có chứa khóa API và mã bí mật của bạn.
CẤU HÌNH CÀI ĐẶT
Khi đã có khóa API thì bạn nhấn vào nút Add platform và chọn Website. Điền tên miền của bạn ở phía trên và trong phần Site URL. SDK sẽ sử dụng chúng để đảm bảo cho việc ủy quyền yêu cầu đăng nhập từ máy chủ của bạn. Việc này được khuyến cáo là không nên sử dụng trên localhost.
CÀI ĐẶT SDK
Chúng ta sẽ sử dụng SDK JavaScript để nhúng nút đăng nhập Facebook và website. Chạy IDE của bạn và tạo ra một tập tin HTML mới. Thêm vào đoạn mã sau, thay thế APP-ID với APP-ID mà bạn được cung cấp ở phía trên.
1
2
3
4
5
6
7
8
9
10
|
<div id=”fb-root”></div>
<script> window.fbAsyncInit = function() { FB.init({ appId : ‘{APP-ID}’, status : true, cookie : true, xfbml : true }); </script> |
XỬ LÝ ĐĂNG NHẬP
Thêm đoạn mã dưới đây vào phần trên (vẫn đặt trong thẻ script), đoạn code này sẽ kiểm tra phản hồi từ SDK và xử lý đăng nhập. Nếu đăng nhập thành công, nó sẽ gọi hàm testAPI(), nếu không nó sẽ quay trở lại trang đăng nhập.
1
2
3
4
5
6
7
8
9
10
|
FB.Event.subscribe(‘auth. authResponseChange’, function(response) {
if (response.status === ‘connected’) { testAPI(); } else if (response.status === ‘not_authorized’) { FB.login(); } else { FB.login(); } }); }; |
CHÀO MỪNG NGƯỜI SỬ DỤNG
Thêm đoạn mã sau vào phần phía trên sẽ xử lý các phản hồi từ SDK, lấy dữ liệu người dùng từ API và cập nhật nội dung cho các thẻ để hiển thị thông điệp chào mừng.
1
2
3
4
5
6
7
8
9
10
11
12
13
|
(function(d){
var js, id = ‘facebook-jssdk’, ref = d.getElementsByTagName(‘script’)[0]; if (d.getElementById(id)) {return;} js = d.createElement(‘script’); js.id = id; js.async = true; js.src = “//connect.facebook.net/en_US/all.js”; ref.parentNode.insertBefore(js, ref); }(document)); function testAPI() { FB.api(‘/me’, function(response) { document.getElementById (‘welcome’).innerHTML=’Good to see you, ‘ + response.name + ‘.’; }); } |
Đã hoàn thành rồi. Chúc mừng các bạn vừa hoàn thành một việc hết sức quan trọng trong việc kết nối website của bạn tới mạng xã hội phổ biến bậc nhất hiện nay. Khách hàng từ nay có thể đăng nhập cũng như chia sẻ những thông tin thú vị của bạn lên facebook ngay lập tức mà không gặp bất kì phiền phức gì. Nếu có bất kì thắc mắc nào, đừng ngần ngại để lại comment phía dưới để chúng tôi có thể cùng bạn giải quyết vấn đề một cách nhanh chóng.
Chúng tôi phân vân rằng liệu bạn có hứng thú với việc biến website trở thành giao diện làm việc thân thiện với những sticky notes? Vậy thì bạn nên xem qua bài viết: Tạo sticky-notes trên website thật đơn giản. Chắn chắn bạn sẽ tìm thấy được nhiều điều thú vị thông qua bài viết này từ việc sử dụng CSS3 cũng như PHP.
0 nhận xét:
Đăng nhận xét