Web design

Tích hợp Facebook Comment cho Blogspot (Blogger)

Trong một bài trước mình đã hướng dẫn mọi người cách tích hợp bình luận Facebook Comment vào Website, trong đó nổi...

Written by Tú Cao · 3 min read >
Kết quả thêm Facebook Comment cho Blogger

Trong một bài trước mình đã hướng dẫn mọi người cách tích hợp bình luận Facebook Comment vào Website, trong đó nổi bật là phần bật tính năng thông báo (notification). Nhưng có rất nhiều câu hỏi rắc rối về việc tích hợp phần bình luận Facebook Comment cho Blogger (Blogspot), vì vậy để hỗ trợ các bạn, trong bài lần này mình sẽ hướng dẫn chi tiết cách thêm Facebook Comment dành riêng cho Blogspot.

Facebook comment : Tích hợp phần bình luận của Facebook vào trong Website của bạn, để bổ xung hoặc thay thế cho phần bình luận trên Website. Theo đó những người sử dụng tài khoản Facebook họ có thể để lại lời bình luận, đánh giá về sản phẩm, dịch vụ trong khung bình luận được tích hợp trên Website của bạn.

Nếu bạn muốn khi ai đó comment trên Blog của bạn, bạn đều nhận được thông báo về tài khoản Facebook hoặc kiểm duyệt các comment trước khi nó được xuất bản, để làm được việc này bạn cần bổ xung app_id, làm theo hướng dẫn tại kiểm duyệt thông báo Facebook comment cho Website.

Facebook Comment cho Blogspot, Blogger

Yêu cầu: Bạn đã có Blog được tạo trên Blogger.com
Bước 1: Bạn vào phần Mẫu –> Tùy chỉnh HTMLChỉnh sửa HTML BlogspotBước 2: Bạn Copy đoạn Code sau đây, sau đó kéo thanh cuộc xuống cuối cùng, và bạn thêm trước thẻ </body>

[code]

[/code]

Thêm đọa mã Javascript của Facebook vào Blogspot
Thêm đọa mã Javascript của Facebook vào Blogspot

 

Bước 3: Xác định nới mà bạn muốn hiển thị bình luận Facebook – Facebook Comment trên Blogspot của mình.

Trong phần này, Tú sẽ hướng dẫn bạn tích hợp phần bình luận, để nó bên trên phần bình luận mặc định của Blogspot – Blogger Comment hoặc Google Comment. Mỗi bài viết sẽ có một khung bình luận Facebook riêng cho bài viết đó.

Tại khung chỉnh sửa HTML của Blogspot. Bạn nhấn tổ hợp phím CTRL + F

Tiếp đó bạn nhập vào đoạn nội dung tìm kiếm:
[code][/code]

Bạn thêm vào bên dưới đoạn code sau.

[html]

[/html]

Thêm đoạn code hiển thị Facebook Comment cho Blogspot
Thêm đoạn code hiển thị Facebook Comment cho Blogspot

Chú ý: Bạn cần lưu ý 2 thông số sau.

  • data-num-posts=’10’ : Số lượng bình luận lớn nhất sẽ hiển thị trên Blogspot của bạn. (Trong VD là 10 bình luận)
  • data-width=’600′ : Kích thước khung bình luận sẽ hiển thị trên Blogspot của bạn, kích thước này tính bằng Pixcel. Bạn hãy kiểm tra, thay đổi con số tăng hay giảm để phù hợp với kích thước Blog của mình. (Ở đây đang là 600 pixcel)

Bước 5: Bạn nhấn nút LƯU MẪU.

Nhấn nút Lưu Mẫu để lưu toàn bộ sửa đổi thêm Facebook Comment
Nhấn nút Lưu Mẫu để lưu toàn bộ sửa đổi thêm Facebook Comment

Và cuối cùng, hãy quay trở lại blogspot của mình và xem kết quả, những gì mình làm được.

Kết quả thêm Facebook Comment cho Blogger
Kết quả thêm Facebook Comment cho Blogger

Tích hợp facebook comment vào Website sử dụng Blogspot, Blogger

Trên đây là toàn bộ quá trình tích hợp hoàn thiện Facebook Comment vào Website. Tú tin chắc chắn rằng nếu bạn làm theo các bước, bạn có thể tích hợp phần bình luận này cho hầu hết Website sử dụng Blogspot hoặc Blogger.

Lưu ý: Nếu bạn chỉ muốn tất cả các sản phẩm để sử dụng chung một khung bình luận, công việc bạn chỉ cần là quy định đường dẫn cố định cho phần bình luận Facebook comment. Nhớ thay URL trên bằng URL của bạn nhé.

VD: 
[code]

[/code]

Cập nhật ngày 5/8/2014: Hướng dẫn thêm facebook comment blogspot bằng Video
https://www.youtube.com/watch?v=iILMZZZE9tQ

Chúc bạn thành công !

Tú Cao – Marketing Online

Hiệu quả là số 1

Written by Tú Cao
Tôi là Tú Cao. Tôi chia sẻ và dạy mọi người cách kinh doanh trên Internet. Bởi vì "Hạnh phúc không phải là nhận, hạnh phúc chính là sự cho đi". Bài viết này dựa trên quan điểm, hiểu biết của Tôi. Bạn tự cân nhắc và chịu trách nhiệm khi làm theo, nếu nó hữu ích với bạn hãy Mời Tú Cao một tách CÀ PHÊ. Profile

92 Replies to “Tích hợp Facebook Comment cho Blogspot (Blogger)”

    1. Chào bạn Hung.

      Lỗi đó là do bạn chưa khai báo hoặc thiếu thẻ gọi đường dẫn. Mỗi một bài viết của Blogspot thì có 1 thẻ tự sinh là canonical.
      expr:href=’data:post.canonicalUrl’

      Bạn view source lên, xem cái đoạn nhúng faceboọk nó đã gọi đc đường dẫn trong phần href chưa nhé.

  1. lam the nao thay mau chu dc vay ban ! mau chu trung voi nen mau den luon roai 🙁

    1. Bạn thêm cái data-colorscheme=’light’ nếu muốn mày trắng hoặc data-colorscheme=”dark” cho màu đen bạn nhé.

      VD:

      Chúc bạn thành công.

  2. anh oi them dung em cai facebook comment duoc khong? em lam hoai ma ko hien ra, gio no mat ca 2 khung Google va facebook luon ro

    1. Tham khảo lại, mình vừa gửi các bạn video hướng dẫn được cập nhật bên trên vào ngày 5/8.

  3. The widget with id “Blog1” cannot contain element: “div”. A widget can only contain b:includable elements.
    nó hiện thông báo như vậy khi em dán dòng

    thì làm thế nào giờ anh?

  4. Cái này nếu làm theo y sì thì không được Tú Cao, mình muốn hiện thì cái dòng phải thay bằng nó mới hiện được. Một vài blog có 2 dòng này, nên chỉ thêm vào dòng đầu tiên!

    1. Chào bạn,

      Mọi người có thể attạck cho mình xin file, mình sẽ test lại các bước trên. Mình vẫn dùng cách này hướng dẫn cho rất nhiều ng, họ vẫn làm thành công.

      Ai gặp lỗi attack file giúp mình nhé.

  5. mình làm như hướng dẫn của bạn nhưng vẫn không đc bạn ak!

    1. Tú đã thêm video hướng dẫn, mình nhận thấy hướng nẫy này vẫn có thể sử dụng được. Bạn có thể tham khảo video hướng dẫn, chúc bạn thành công.

  6. Bạn ơi mình gặp một lỗi là khi có ai đó bình luận bằng cmt Google thì cái khung cmt FB sẽ bị biến mất kiểu như bị đè lên đó. Nếu xóa cmt GG đi thì khung cmt FB sẽ hiện lại. Bạn có cách nào khắc phục không ? xin cám ơn !

    1. Đúng rồi, hôm trước fix cho 1 bạn, bạn gửi lai cái file xml lên đây mình fix cho, mình cũng kiểm tra luôn nguyên nhân vì sao.

    1. Ưu điểm: Giao điện đẹp, nhỏ gọn, vẫn có thể SEO comment (Vì Tú tích hợp thêm những cái khác), có thể trao đổi với nhau thuận tiện hơn, thậm chí trong bình luận tải hình ảnh trên trực tiếp…..

      Nhược điểm: Cái lo nhất là ko seo đc comment thì mình làm được rồi, thế nên vẫn dùng nó, chưa thấy có vấn đề gì.

    1. Bạn làm đúng là sẽ hiện, bạn nên xem lại đã cấu hình đúng tài khoản trong setting của FB hay chưa ?.

  7. Mình làm đến bước này và cấu hình xong nhưng không Save được. Mình bấm vào Save mà nó không save, mặc dù đã thử trên máy tính khác nhưng vẫn không hoạt động. Phiền bạn thử tạo lại 1 cái app khác và cấu hình lại bước số 8 xem có được không ? Mình mò 1 ngày hơn rồi mà ko được nên mới post câu hỏi lên đây. Mong bạn giải đáp ! Và đừng xóa cmt của mình !

    1. Chào bạn,

      Xin lỗi vì mình bị lạc mất comment của bạn nên ko trả lợi để bạn đợi khá lâu. Mình tôn trọng tất cả ý kiến khen chê của các bạn nên việc xóa commetn là hy hữu.

      Tú có thử lại thì vẫn Save bình thường. Vấn đề này có thể là do facebook. Nên thử lại vào 1 thời gian khác.

  8. Mình thử bao nhiêu hướng dẫn không được. Cách của bạn thì được luôn chứ. Cảm ơn bạn nhé 🙂
    Bạn có thể hướng dẫn các cách thiết kế trang blogspot cho đẹp hơn được không?

    1. Chào bạn,
      Tú rất vui vì bạn đã làm được sau ki xem hướng dẫn bên trên.
      Thiết kế không phải thế mạnh của Tú (khỏi nói là khoản mỹ thuật mình khá là kém), còn những cái chỉnh sửa tối ưu để blog đẹp hơn thì cần phải có sự cố gắng và biết nhiều hơn về code. Bạn nên tham khảo HTML và CSS cơ bản thì bạn sẽ tự làm được. Tú thì chưa có kế hoạch để viết tài liệu cho chủ đề này.

      1. Bạn cho mình hỏi chút là phần chèn đoạn code

        Thì chỗ fb:admins sẽ thay tên facebook của mình vào đó hả?

        1. Facebook sẽ dùng chính tài khoản Facebook của bạn để xác nhận người
          quản lý. Việc chúng ta là lấy ID của tài khoản, và đưa vào Website.

          VD ních Facebook của Tú Cao . https://www.facebook.com/all.onlylove

          Bạn truy cập vào: http://graph.facebook.com/

          Sau đó gõ tên tài khoản vào phía sau. VD: http://graph.facebook.com/all.onlylove

          Lấy ID của tài khoản Facebook

          Kết quả mình nhận được là ID: 100000454020972

          1. Mình hiểu chỗ ý. Vậy chỉ người khác bình luận thì mới có thông báo hiện lên FB mình? Hay nếu mình bình luận thì cũng thông báo hả bạn?

          2. Bạn phải cài đặt app_id và cấu hình đúng như mình hướng dẫn sẽ được bạn nhé. Mỗi khi có ng bình luận bạn sẽ nhận được thông báo.

          3. Người khác bình luận bạn sẽ nhận được thông báo nhé. Với lại bạn phải là chủ app đó, tức là người tạo app hoặc bạn được chia sẻ quyền của app mới sử dụng được.

          4. Uhm, có người comment mà nó không báo lên Fb cho mình bạn à 🙁

            Ko biết là lỗi gì :v
            bạn muốn trang đích là trang gì? thuật ngữ thế mình ko hiểu đâu T.T

          5. Mình ko làm được là do đáng ra phải cop dòng này của bạn:

            thì mình đã cop dòng trong vd này:

            :v

          6. Chỉ cần bạn cài đặt phần người thông báo, bạn có ghi tên tài khoản của những ai, họ sẽ nhận được 1 cái thông báo.

  9. Sau khi tích hợp xong thì khi mình ấn vào phần Setting thì bị hiện như này bạn ơi 🙁

  10. Sau khi mình cài hoàn thiện như bạn hướng dẫn thì ấn vào chữ Setting trong phần bình luận nó hiện như này bạn ơi 🙁
    Tức là chưa được phải ko?

    1. Dựa theo lỗi là bạn KHÔNG phải admin của app này nên bạn ko thể thay đồi cài đặt cho nó.

      Truy cập: https://developers.facebook.com/ để tạo app bạn nhé, rồi tích lấy IP thay vào là ok thôi. Chỉ còn 1 chút nữa thôi, cố lên.

  11. Bạn ơi, mình làm ok hết rồi, nhưng thử test viết 1 bình luận, thì bình luận đầu tiên ko tự hiển thị mà phải load lại trang mới nhìn thấy là sao nhỉ? bình luận tiếp theo thì vẫn hiển thị bình thường

    1. Chào bạn, điều này do fb ơ Việt Nam thôi, thỉnh thoảng nó vẫn bị như vậy. Kệ nó sẽ hết khi đường truyền tốt hơn bạn nhé.

  12. Mình dùng đúng cái này

    nhưng comment vẫn ra màu tối, trùng màu với theme. Giúp mình vụ này với

      1. Demo của cái gì bạn ơi. Nhân tiện cho mình hỏi vụ, add tool share vào nó bị chèn khung của comment với

          1. Bạn thêm cái này vào đoạn code lúc chèn Facebook comment nhé data-colorscheme=”dark”

            Hoặc data-colorscheme=”light”

            Nó sẽ hiển thị màu đen và trắng tương ứng.

          2. minh chen cai nay no ghi the nay

            The widget with id “Blog1” cannot contain element: “div”. A widget can only contain b:includable elements.

            Ẩn thông báo

  13. Có bình luận mặc định của Bloger rồi cài thêm cái này có sao không anh? E thích cái này hơn là trình comment mặc định!

  14. mình làm 2 lần mà vẫn không được..bạn giúp mình đc không

    1. Bạn comment lại vấn đề bạn gặp phải cho mình hiểu nhé, hy vọng có thể giúp được bạn.

  15. Em làm theo hướng dẫn nhưng phần cm FB chỉ hiện ở bài viết mới nhất thôi. Khi xem bình luận ở bài viết nào qua app fb (như phần cuối clip anh hướng dẫn) thì nó chuyển sang trang chủ blog chứ ko vào bài cụ thể. Lỗi này là sao hả a?

    1. Em bổ sung thêm là: phần cm = fb chỉ hiện ở 1 bài, các bài khác không hiện 🙁

      1. Chào bạn,

        Vì thẻ data-href bạn để nó là url tĩnh – tức là cố định không thay đổi nên nó chỉ hiển thị của mỗi trang chủ.

        data-href đưa vào giá trị url nào thì nó sẽ hiểu phần bình luận mà người dùng comment thuộc trang đích đó.

        Bởi lý do đó mà mình đặt code:

        Như vậy là đã đặt url động, thay đổi theo từng bài viết. bạn chú ý làm theo từng bước nhé.

  16. S mình bấm vào link nhưng không thấy mục Create new app :'(

    1. Tài khoản của bạn cần xác minh số điện thoại. Hoặc nếu đã xác minh mà không tạo được, bạn gửi thư hỗ trợ cho facebook (link của nó đính kèm bên dưới mỗi cái thông báo từ chối) cung cấp CMND, khoảng 2 ngày là facebook trả lời, bạn sẽ được tạo bình thường – Mình đã gặp với tài khoản chính của mình.

      P/s: Nhớ để cái tên facebook liên quan tới tên trong CMND bạn nhé.

    1. Mình cũng không biết trả lời, ko biết bạn khó ở bước nào?. Thường thì là do chèn code vị trí hiển thị bình luận bị nhầm. Nếu không được nữa thì bạn gửi template lên đây, rảnh mình sẽ coi cho bạn.

  17. bạn ơi, mình muốn đưa comment vào trang chủ luôn chứ không phải từ bài post thì làm thế nào

  18. Anh ơi, em ấn lưu không được. Nó hiện ra thế này là sao ạ?

  19. Bạn ơi cho mình hỏi rõ ràng mình để code facebook plugin coment là en_US rồi vậy mà cái plugin này toàn hiện ra tiếng pháp :'( thay đổi cả thành vi_VN nhưng vẫn k đổi dc :'(

    1. Chào bạn,
      Bạn sẽ nhận được trên tài khoản cá nhân facebook của bạn nhé. (xem ảnh bên trên nhé)

  20. bác Tú có biết cách nào tích hợp comment cho Facebook k bác? Blogger có tích hợp đc Disquiz vào k bác nhỉ?

    E thấy cái Disquiz rất hay, mà k biết liệu có chèn đc vào blogpost hay k?

  21. cho mình hỏi bài viết hiển thị ở ngoài trang chủ nhưng click vào bài viết thì không hiển thị nội dung gì, thì phải làm như thế nào?

    1. Chào Thuận,
      Cái này thường do lỗi htaccess (nếu chạy trên server apache) hay vhost (chạy trên server nginx) chưa cấu hình đúng. Bạn có thể để lại link website nhé.

    1. Chào em,
      Em chú ý khi sử dụng blogspot, mặc định blogspot sẽ tự chọn 1 giao diện cho Mobile và code trên sẽ không hoạt động (vì em ko thay đổi được nội dung của nó).
      Em vào Mẫu => phần giao diện mobile tắt đi nhé.

    1. Chào bạn,

      Chắc lúc copy code và dán vào bạn làm thừa hay thiếu thẻ nào đó, thử làm lại xem sao. Khi thiếu thẻ thì Blogspot ko cho bạn lưu code lại.

    1. Chào bạn,

      Do nhà mạng ở Việt nam chặn blogspot.com nên bạn không truy cập được, bạn nên gắn tên miền riêng cho các dạng blog này ở Việt nam.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *