Hiển thị khung bình luận Facebook cho từng bài viết trang index

Giới Thiệu

Thông thường muốn đọc bình luận hoặc để lại bình luận người dùng sẽ phải vào trong bài viết để thực hiện thao tác này, tuy nhiên để cho tiện lợi hơn ta có thể đưa khung bình luận ra ngoài trang index dưới đạng popup

Để hiểu rõ hơn các bạn có thể test bằng cách click vào link "Bình Luận" ngay bên dưới hiển thị số lượt bình luận ngoài index của blog này hoặc demo bên dưới

2X Bình Luận

Tất nhiên bài viết chỉ áp dụng cho blog nào tích hợp chức năng bình luận bằng Facebook thay vì nhận xét mặc định của blogspot

Hướng dẫn

Và khung bình luận của Facebook mà các bạn đã đưa vào bài viết nó sẽ hoạt động dưới dạng 1 iframe, và việc của chúng ta bấy giờ là sẽ đưa khung frame này hiển thị khi click vào link ta đặt ngoài trang index cho từng bài viết, như ví dụ ở blog của mình đang đặt ở chữ "Bình luận" ngay bên dưới số đếm hiển thị lượt comment như hình dưới

Và phân tích link iframe này sẽ có dạng như sau

https://www.facebook.com/plugins/feedback.php?app_id=2447642041934248&href=https%3A%2F%2Fwww.huydc.net%2F2020%2F06%2Fthem-button-bookmark-vao-cho-blog.html

Trong đó 2447642041934248 là App ID Facebook của bạn và https%3A%2F%2Fwww.huydc.net%2F2020%2F06%2Fthem-button-bookmark-vao-cho-blog.html là link bài viết chứa khung bình luận

Hiểu được vấn đề bạn chỉ việc dán đoạn code bên dưới vào vị trí muốn mở khung bình luận Facebook vào trong template, tất nhiên là nó phải nằm trong khuôn khổ vị trí của bài viết

<a class='post-comment' expr:href='&quot;https://www.facebook.com/plugins/feedback.php?app_id=2447642041934248&amp;href=&quot; + data:post.url' onclick='openRequestedPopup(this.href, this.target); return false;' target='PromoteFirefoxWindow' title='Xem bình luận trong bài viết'>Bình Luận</a>  

Lưu ý: thay 2447642041934248 thành App ID của bạn

Vậy là đã lấy link của khung bình luận rồi, giờ muốn hiển thị dưới dạng popup ta sử dụng đoạn code bên dưới

<script type='text/javascript'>
var windowObjectReference = null; // global variable

function openRequestedPopup(url, windowName) {
  if(windowObjectReference == null || windowObjectReference.closed) {
    windowObjectReference = window.open(url, windowName,
           &quot;resizable:no,scrollbars,status&quot;);
  } else {
    windowObjectReference.focus();
  };
}
</script>

Và các bạn cũng có thể kết hợp với bài Hiển thị số nhận xét bằng Facebook cho blogspot

Nếu trong quá trình thực hiện nếu gặp khó khăn đừng quên để lại bình luận dưới bài viết để cùng thảo luận!