Thêm Facebook Comment vào Ghost Blog

Như đã giới thiệu về một số nhược điểm của Ghost Blog trong bài Giới thiệu về Ghost thì một tính năng rất cần thiết nhưng lại thiếu đó chính là Comment. Với bài này, tôi sẽ hướng dẫn các bạn tích hợp Comment Facebook vào Ghost Blog để giải quyết điều này.

  • Vào trang Comment Plugin của Facebook để lấy mã Comment: Lấy mã Comment Facebook Ghost
  • Copy dòng code đầu tiên (ở Step 2) và dán vào Blog Header trong Menu Code Injection của Ghost rồi bấm Save: Chèn Comment Facebook vào Ghost
  • Sau đó edit file post.hbs tại /nơi-cài-ghost/content/themes/theme-đang-sử-dụng/post.hbs, thêm dòng code thứ 2 trong trang lấy mã (ở Step 3) vào nơi cần đặt Comment (thường sau {/author} hoặc phần chia sẻ bài viết) rồi lưu lại. Chèn Comment Facebook vào Ghost 1 Lưu ý: Thay đổi link tại phần data-href bằng http://địa-chỉ-ghost{{url}}.

  • Khởi động lại Ghost. Nếu bạn đã sử dụng PM2 thì chỉ đơn giản đăng nhập vào root và gõ lệnh:

    pm2 restart all
    
  • Tiếp theo truy cập vào bất kì một bài viết nào của Ghost và tận hưởng: Chèn Comment Facebook vào Ghost 2

Tips: Responsive cho Facebook Comment:

  • Một vấn đề nữa đó là Comment nguyên gốc của Facebook không thể Responsive được. Để làm nó có thể Responsive, hiển thị đẹp trên Mobile, thêm những dòng sau vào cuối một file css bất kì trong /nơi-cài-ghost/content/themes/theme-đang-sử-dụng/css/ (thường là screen.css):

    .fb-comments span {
        width: 100% !important;
    }
    .fb-comments iframe {
        width: 100% !important;
    }
    
  • Reload lại trang và sẽ có ngay Facebook Comment Responsive!
Dây rút nhựa tp hcm