Facebook SDK dành cho JavaScript
Phiên bản API Đồ thị

SDK Facebook dành cho JavaScript với jQuery

Trong hướng dẫn này, bạn sẽ tìm hiểu cách kết hợp SDK Facebook dành cho JavaScript vào ứng dụng web dựa trên jQuery của bạn. Cả jQuery và SDK JavaScript đều cung cấp giải pháp riêng để trì hoãn quá trình thực thi mã cho tới khi thư viện đã tải và hướng dẫn này sẽ giúp bạn kết hợp cả hai cũng như đảm bảo cả hai đều sẵn sàng sử dụng trước khi bạn gọi ra SDK.

Ví dụ này sử dụng jQuery 2.0.0 được cung cấp từ CDN thư viện được lưu trữ của Google. Để tìm hiểu thêm về jQuery, hãy xem Tài liệu về jQuery

Triển khai

Thêm jQuery vào đầu tài liệu của bạn và thực hiện phương thức $(document).ready(), phương thức này sẽ thực thi khi DOM được hoàn tất và jQuery được thực thể hóa. Trang của bạn sẽ có dạng như sau:

<html>
<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <title>jQuery Example</title>
  <script>
    $(document).ready(function() {
      // Execute some code here
    });
  </script>
</head>

Thay vì nhập SDK Facebook dành cho JavaScript với tập lệnh không đồng bộ mặc định, hãy sử dụng phương thức getScript() của jQuery để nhập SDK từ URL đúng cho ngôn ngữ của người dùng của bạn. Bạn có thể bỏ giao thức khỏi đầu URL và điều này sẽ giúp giao thức đó khớp với giao thức của URL hiện tại.

Theo mặc định, jQuery gắn nhãn thời gian vào các yêu cầu không đồng bộ để tránh việc trình duyệt lưu chúng vào bộ nhớ đệm ẩn. Bạn cần tắt chức năng này bằng phương thức ajaxSetup() để SDK được lưu vào bộ nhớ đệm ẩn cục bộ giữa các trang.

Phương thức getScript() không đồng bộ, vì thế bạn sẽ truyền hàm gọi lại không đồng bộ, trong đó bạn có thể thực thi mã khởi tạo SDK như thường lệ. Thêm ID ứng dụng cho ứng dụng của bạn từ Bảng điều khiển ứng dụng.

$(document).ready(function() {
  $.ajaxSetup({ cache: true });
  $.getScript('https://connect.facebook.net/en_US/sdk.js', function(){
    FB.init({
      appId: '{your-app-id}',
      version: 'v2.7' // or v2.1, v2.2, v2.3, ...
    });     
    $('#loginbutton,#feedbutton').removeAttr('disabled');
    FB.getLoginStatus(updateStatusCallback);
  });
});

Tách rời đối tượng phụ thuộc

Việc đặt tất cả logic gọi ra SDK vào hàm gọi lại getScript sẽ đảm bảo rằng đối tượng FB tồn tại nhưng đó không phải là mẫu thiết kế tuyệt vời cho ứng dụng phức tạp. Vì đối tượng FB mang tính toàn cầu nên bạn có thể đặt logic SDK bên ngoài hàm gọi lại getScript miễn là bạn đảm bảo rằng đối tượng đó tồn tại trước khi gọi. Ngoài ra, bạn có thể sử dụng khung phụ thuộc mô-đun, chẳng hạn như RequireJS để đảm bảo rằng đối tượng FB được tải như một phần của quá trình thiết lập ứng dụng.

Xem thêm