Hôm nay mình sẽ hướng dẫn các bạn cách tạo quản lý và chèn comment Facebook cho sản phẩm của Woocommerce.
Trước hết bạn phải tạo một Apps trên Facebook để có thể quản lý được các commnet này.
Bạn cần lưu ý những thông số sau:
- Your_App_ID: có được ID App của bạn
- User_ID: lấy được id của bạn trên Facebook
Bước 1: Tạo Apps trên Facebook
Để có thể tạo được Apps trên Facebook để quản lý bình luận bạn vào theo đường dẫn: https://developers.facebook.com
Sau đó bạn chọn Ứng dụng của tôi > Thêm ứng dụng mới
Nhập tên ứng dụng và Email liên hệ sau đó nhấp Tạo ID ứng dụng
Bạn chọn menu bên trái Cài đặt -> Thông tin cơ bản
Tại đây bạn cần nhập vào các trường sau:
Miền ứng dụng: Nhập vào domain của bạn
URL chính sách quyền riêng tư: nhập vào url trang chính sách của bạn (url phải truy cập được nhé)
Sau đó bạn kéo xuống dưới và chọn Thêm nền tảng -> Trang web
Tại đây bạn thêm địa chỉa trang web của mình
Nhấn lưu thay đổi. Sau đó kéo lên trên và chọn bật ứng dụng. Tại đây nó sẽ yêu cầu bạn chọn hạng mục cho ứng dụng. Bạn chọn hạng mục phù hợp với trang web là được.
Đến đây chúng ta đã tạo xong App.
Các cách thêm comment Facebook vào Woocommerce
Đầu tiên bạn vào đường dẫn: https://developers.facebook.com/docs/plugins/comments/ Sau đó thiết lập như hình. (Bước thiết lập này cũng khôn quan trọng lắm vì khi chèn code mình có thể thay đổi được thông số).
Sau khi xong bạn nhấn lấy mã để lấy code chèn vào website.
Bạn nhớ chọn đúng APP mình mới tạo nhé. Tại có thể có nhiều APP khác.
Và bạn sẽ có được đoạn code như sau:
<div id="fb-root"></div>
<script>(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 = "//connect.facebook.net/vi_VN/all.js#xfbml=1&appId=Your_App_ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Bạn nhớ thay Your_App_ID bằng số ID Apps của bạn nhé. Nếu bạn coppy code từ trình tạo của Facebook thì sẽ tự có số Apps ID này.
Sau đó bạn chèn đoạn code thứ nhất vào sau thẻ <body> của theme bạn đang sử dụng. (Thường thì trong file header.php)
Tiếp theo chúng ta sẽ có rất nhiều phương án chèn comment Facebook vào Woocommerce
Bạn vào file Function.php của theme bạn đang sử dụng và thêm vào 1 trong 3 đoạn code sau vào:
1. Chèn thêm Tabs comment Facebook
Có nghĩa là bạn vẫn sẽ có các Tabs cũ mặc định của Woocommerce gồm:
Mô tả sản phẩm, Đánh giá sản phẩm, Thuộc tính sản phẩm và thêm nữa là comment Facebook.
function woo_new_product_tab( $tabs ) {
$tabs['test_tab'] = array(
'title' => __( 'Comments Facebook', 'woocommerce' ),
'priority' => 50,// Vị trí hiển thị. Số càng nhỏ thì sẽ càng hiển thị về bên trái
'callback' => 'woo_new_comment_fb_content'
);
return $tabs;
}
function woo_new_comment_fb_content() {
echo '<div class="fb-comments" data-href="'. the_permalink() .'" data-numposts="20"></div>';
}
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab');
Thay chữ New Product Tab thành tên mà bạn muốn. VD: Bình luận
2. Thay thế Tabs đánh giá mặc định
Với cách này sẽ thay thế tabs đánh giá mặc định của Woocommerce thành bình luận của Facebook.
/**
* Thay thế tabs Reviews (Đánh giá) mặc định của Woocommerce
*/
add_filter( 'woocommerce_product_tabs', 'woo_custom_reviews_tab', 98 );
function woo_custom_reviews_tab( $tabs ) {
$tabs['reviews']['callback'] = 'woo_custom_description_tab_content';
return $tabs;
}
function woo_custom_description_tab_content() {
echo '<div class="fb-comments" data-href="'. the_permalink() .'" data-numposts="20"></div>';
}
Trường hợp nếu bạn thay Tabs đánh giá mặc định của Woocommrece bị lỗi thì bạn có thể sử dụng cách 1 và xóa Tabs đánh giá mặc định đi bằng đoạn code.
/**
* Xóa tabs Woocommerce
*/
add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );
function woo_remove_product_tabs( $tabs ) {
unset( $tabs['reviews'] ); // Xóa tabs đánh giá
return $tabs;
}
3. Chèn comment Facebook bên dưới mô tả sản phẩm
Với cách này Comment Faceboook sẽ hiện bên dưới mô tả sản phẩm và không nằm trong tabs nào.
/**
* Hiện comment Facebook bên dưới mô tả sản phẩm
*/
function woo_new_product_tab_content() {
echo '<div class="fb-comments" data-href="'. the_permalink() .'" data-numposts="20"></div>';
}
add_action( 'woocommerce_after_single_product_summary', 'woo_new_product_tab_content', 10 );
Trường hợp mà comment Facebook không xuống bên dưới mô tả thì bạn có thể thay số 10 thành số lớn hơn.
Đến đây đã gần nhưn hoàn thành nhưng còn thiếu 1 chút nữa. Đó là để có thể quản lý được những comments này bạn cần chèn đoạn code sau vào thẻ <head>
<meta property="fb:app_id" content="Your_App_ID"/> <meta property="fb:admins" content="User_ID">
fb:app_id: Sẽ giúp chúng ta quản lý comments. Your_App_ID thay bằng App ID của bạn.
fb:admins: Sẽ giúp bạn nhận được các thông báo khi có người nào đó comments. User_ID là ID của bạn trên facebook của bạn.
Cách lấy User_ID: Bạn vào trang cá nhân của bạn. Sau đó kích vào ảnh đại diện của chính bạn và ID nằm ngay trên đường dẫn như trong hình nhé. Hoặc bạn cũng có thể lấy bằng cách vào đường dẫn sau:
https://findmyfbid.com/
Từ bây giờ bạn có thể vào đường dẫn https://developers.facebook.com/tools/comments để có thể quản lý các comments. Hãy nhớ chọn đúng APP nhé!
Chúc các bạn thành công
đoạn chèn code khó hiểu quá, bạn hd chi tiết hơn đi