Để thêm các tính năng như: Messenger chat, nút like share và bình luận của Facebook vào WordPress thì bạn phải tích hợp Facebook Javascript SDK vào WordPress.
Bài viết này sẽ hướng dẫn bạn chi tiết cách thêm Facebook Javascript SDK vào WordPress không cần plugin và cũng không làm ảnh hưởng đến tốc độ của WordPress.
Bước 1: Tạo ứng dụng cho website trong cổng Developers của Facebook
Bạn có thể làm theo thứ tự các bước trong ảnh dưới đây để tạo ứng dụng cho website WordPress.
Đầu tiên, truy cập developers.facebook.com/apps/, nếu bạn chưa tạo ứng dụng nào trước đây thì giao diện nó sẽ như thế này.
Bạn click vào nút màu xanh lá cây “Tạo ứng dụng”.
Cửa sổ tạo ứng dụng sẽ được mở ra. Bạn cần phải nhập: Tên hiển thị của ứng dụng và Email liên hệ của ứng dụng để tạo ứng dụng.
Sau khi tạo ứng dụng thành công, bạn sẽ được chuyển đến trang Bảng điều khiển ứng dụng.
Như vậy là bạn đã xong bước 1.
Bước 2: Chèn code Facebook Javascript SDK vào WordPress
Ở trang Bảng điều khiển ứng dụng, bạn click vào mục Cài đặt >> Thông tin cơ bản.
Bạn kéo xuống tìm nút Thêm nền tảng ở phía dưới của trang cài đặt thông tin cơ bản và click vào nó.
Cửa sổ chọn nền tảng sẽ hiện lên, bạn chọn nền tảng là Trang web.
Tiếp theo, bạn nhập URL của trang web và click vào nút Bắt đầu nhanh.
Bạn sẽ được chuyển đến trang có chứa đoạn mã Facebook Javascript SDK. Bạn copy đoạn mã để chèn vào WordPress.
Hoặc bạn có thể copy đoạn code dưới đây và thay bằng appID của bạn. Đoạn code này đã được nâng cấp hơn so với đoạn code mà Facebook cung cấp cho bạn trong hình trên.
window.fbAsyncInit = function() {
FB.init({
appId : '1234567890123', // thay bằng appId của bạn
xfbml : true,
version : 'v9.0' // tại thời điểm viết bài này, v9.0 là phiên bản api mới nhất, bạn có thể truy cập vào trang https://developers.facebook.com/docs/graph-api/changelog/ để cập nhật phiên bản api mới nhất cho phù hợp
});
FB.AppEvents.logPageView();
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/vi_VN/sdk/xfbml.customerchat.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));AppID (ID ứng dụng) là đoạn mã bằng số mà Facebook cung cấp cho ứng dụng của bạn, bạn có thể tìm thấy nó ngay trong trang Bảng điều khiển ứng dụng.
Sau khi copy đoạn mã Facebook Javascript SDK ở trên, bạn tạo một file javascript mới trong folder js của child theme và paste mã vào file đó (đọc hướng dẫn tạo child theme, bao gồm cả folder js của child theme tại đây).
Bạn đặt tên cho file là facebook-javascript-sdk.js. Bạn sẽ dùng tên file này để enqueue script trong file functions.php của child theme ở bước 3.
Sau khi hoàn tất, bạn nhớ click vào nút Cập nhật tập tin và chuyển sang bước 3.
Bước 3: Tích hợp Facebook Javascript SDK vào WordPress (enqueue script)
Bạn chỉ cần copy và paste code dưới đây vào file functions.php của child theme để tích hợp Facebook Javascript SDK vào WordPress là xong.
/* Enqueue custom scripts */
function bss_custom_scripts() {
wp_enqueue_script('facebook-sdk-script', get_stylesheet_directory_uri().'/js/facebook-javascript-sdk.js', false, true);
}
add_action('wp_enqueue_scripts', 'bss_custom_scripts');Nếu bạn đã có function custom scripts riêng thì bạn chỉ cần copy dòng wp_enqueue_script trong đoạn code trên và paste nó vào dòng tiếp theo trong function custom scripts là được.
wp_enqueue_script('facebook-sdk-script', get_stylesheet_directory_uri().'/js/facebook-javascript-sdk.js', false, true);Như vậy là bạn đã tích hợp Facebook Javascript SDK vào WordPress thành công.
Sau khi tích hợp Facebook Javascript SDK vào WordPress, bây giờ bạn có thể: