[Web] Thêm Facebook Comment Box vào website

1, Giới thiệu

Chắc hẳn các bạn đều biết đến Facebook (FB), mạng xã hội lớn nhất hiện nay với hơn 800 triệu thành viên. Facebook đã phát triển một số plugin giúp cho người dùng tương tác với các website và chia sẻ thông tin rất thuận lợi, nhanh chóng thông qua tài khoản của họ. Ví dụ nút Like đặc quyền của Facebook cho phép người dùng chia sẻ một nội dung ưa thích với tất cả bạn bè của họ trên Facebook. Khi một người dùng nhấn vào nút Like được đặt trên website, một câu chuyện/bài viết sẽ được chia sẻ trên trang Facebook cá nhân của anh ta với đường link được dẫn về trang web của bạn.

Facebook ngày càng phổ biến và trở thành công cụ kết nối hoàn hảo trên mọi phương diện. Nhờ có hệ thống API mở nên hầu hết các hệ thống web đều có thể kết nối với Facebook. Đây là mối quan hệ tương hỗ cùng phát triển: Facebook sẽ được nhiều người biết đến, nhiều website kết nối tới, ngược lại các website thu được một lượng traffic đáng kể từ Facebook.

Facebook đã phát triển một hệ thống Social Plugins rất hữu dụng để cho các website có thể kết nối với Facebook một cách dễ dàng với một số plugin tiêu biểu như Like Button, Like Box

Facebook Social Plugins

Trong bài viết hôm nay, tôi sẽ giới thiệu một plugin khá hay là Comment Box — một công cụ comment có khả năng lan truyền mạnh mẽ. Khi thêm vào website, người đọc có thể bình luận nội dung bài viết thông qua tài khoản Facebook của họ mà không cần phải nhập tên, địa chỉ email hoặc thậm chí là không cần phải đăng kí thành viên mới được đăng bình luận.

2, Cài đặt Facebook Comment Box

Bước 1: Đầu tiên bạn cần tạo mới một ứng dụng để lấy mã Unique ID tại địa chỉ sau https://developers.facebook.com/apps/ và điền các thông tin cần thiết như App Display Name (Ô App Namesapce có thể bỏ qua, không cần điền).

Create a new Facebook app

Bước 2: Nhập mã xác thực cho ứng dụng

Enter Capcha

Bước 3: Sau khi đã tạo mới 1 ứng dụng, bạn cần lưu ý các thông tin như App ID để sử dụng cho Comment Box.

Facebook Apps

Bước 4: Ở bước cuối cùng này, các bạn hãy tham khảo đoạn code tôi dùng làm demo, bạn hãy thay đổi tùy theo cấu trúc dữ liệu trong website của mình.

<meta property="fb:app_id" content="YOUR_APPLICATION_ID">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<div id="fb-root" class="fb_reset">
<div style="position: absolute; top: -10000px; height: 0px; width: 0px;">
<div>
<iframe name="fb_xdm_frame_http" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" id="fb_xdm_frame_http" aria-hidden="true" title="Facebook Cross Domain Communication Frame" tabindex="-1" src="http://static.ak.facebook.com/connect/xd_arbiter/PqAPbTuc2cR.js?version=41#channel=f619a069&origin=http%3A%2F%2Ftanvietblog.com" style="border: none;"></iframe>
<iframe name="fb_xdm_frame_https" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" id="fb_xdm_frame_https" aria-hidden="true" title="Facebook Cross Domain Communication Frame" tabindex="-1" src="https://s-static.ak.facebook.com/connect/xd_arbiter/PqAPbTuc2cR.js?version=41#channel=f619a069&origin=http%3A%2F%2Ftanvietblog.com" style="border: none;"></iframe>
</div>
</div>
<div style="position: absolute; top: -10000px; height: 0px; width: 0px;"></div>
</div>
<fb:comments href="YOUR_CANONICAL_URL" num-posts="2" width="500" fb-xfbml-state="rendered" class="fb_iframe_widget_loader fb_iframe_widget fb_hide_iframes">
<span style="height: 100px; width: 500px;">
<iframe id="f23a0796b" name="f3d84ea2" scrolling="no" title="Facebook Social Plugin" class="fb_ltr" src="https://www.facebook.com/plugins/comments.php?api_key=&channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2FPqAPbTuc2cR.js%3Fversion%3D41%23cb%3Dfedd42a3c%26domain%3Dtanvietblog.com%26origin%3Dhttp%253A%252F%252Ftanvietblog.com%252Ff619a069%26relation%3Dparent.parent&href=YOUR_CANONICAL_URL&locale=en_US&numposts=2&sdk=joey&width=500" style="border: none; overflow: hidden; height: 100px; width: 500px;">
</iframe>
</span>
</fb:comments>

Trong đó:

  • YOUR_APPLICATION_ID: Là giá trị App ID mà bạn vừa tạo
  • YOUR_CANONICAL_URL: Đường dẫn website/bài viết mà bạn muốn hiển thị trên tường (wall) FB của người đọc khi bình luận.
  • num-posts: Hiển thị số lượng bình luận, mặc định là 10.
  • width: Độ rộng Comment Box

Ngoài ra nếu muốn nhận thông báo mỗi khi có comment mới thì bạn chỉ cần thêm đoạn code sau vào thẻ header

<meta property="fb:admins" content="YOUR_FACEBOOK_USER_ID">

Với YOUR_FACEBOOK_USER_ID là số ID tài khoản Facebook của bạn (nếu không biết số ID thì hãy đọc bài viết này). Bạn còn có thể thêm nhiều người khác cùng quản lý với mình bằng đoạn code

<meta property="fb:admins" content="FACEBOOK_USER_ID1, FACEBOOK_USER_ID2">

Bạn có thể quản lý và thiết lập tùy chọn phần bình luận tại địa chỉ sau http://developers.facebook.com/tools/comments.

3, Thử nghiệm

Sau khi cài đặt Comment Box sẽ hiển thị trên website của bạn như hình sau

Facebook Apps

– Comment Box chỉ hoạt động hiệu quả khi người dùng đã đăng nhập tài khoản Facebook

– Nếu đánh dấu chọn mục “Đăng lên trang cá nhân” thì comment sẽ tự động hiển thị trên trang cá nhân của người comment.

4, Phân tích, đánh giá

Facebook Comment cũng không khác nhiều lắm so với nút “Share” hoặc “Like” tuy nhiên nó có tính gợi mở nhiều hơn!

1. Mặt lợi

– Facebook comment giúp webmaster linh động trong việc chèn comment vào bất kỳ chỗ nào trên website

– Có thể thay thế cho hệ thống comment sẵn có của Blog.

– Facebook comment có khả năng lan truyền mạnh mẽ trên mạng xã hội Facebook, nhờ đó website của bạn sẽ được nhiều người biết tới, tạo nên hiệu ứng dây chuyền.

– Dùng kết hợp với FBML để tạo mục sự kiện hoặc đánh giá sản phẩm trên trang Landing Page của Facebook

2. Mặt hại

– Load lâu do phải kết nối với Facebook.

– Không lưu trên hệ thống CSDL của website, chỉ lưu trên Facebook, đối với 1 Blog thì comment là một trong những tài sản quý giá cần được lưu giữ. Do đó nó sẽ là con dao 2 lưỡi khi blog của bạn hoặc facebook gặp vấn đề!

5, Tham khảo

Tấn Việt

Tôi lập trang web này để thỏa mãn sở thích viết cái gì đó vui vui khi rãnh rỗi và đồng thời cũng chia sẻ những gì tôi biết hoặc đọc đâu đó trên mạng về Lập trình web. Tôi hi vọng những bài viết này sẽ giúp ích cho các bạn. Thân ái!

You may also like…

22 Responses

  1. Yêu Host says:

    Ô, cái này mình từng nhúng vào site rồi, tiện ra phết, nhưng mà ngại cái ngồi creat apps trong Facebook quá.

  2. ThanhNguyen says:

    Mình đã gắn comment lên trang của mình được, nhưng mình không quản lý nó được? tại sao vậy? các comment chỉ đăng lên trang cá nhân của những người vào comment. Còn người quản trị thì sẽ làm thế nào để thấy được thất cả các comment đó?
    Mình gắn cái này vô

    và truyền vào FB id của mình nhưng không thấy nó có hiệu quả. 🙁
    Chỉ mình với nha.
    Cảm ơn.

    • Tấn Việt says:

      Trong bài viết mình đã đề cập đến vấn đề này rồi, khi bạn chèn FACEBOOK_USER_ID thì chỉ nhận thông báo mỗi khi có comment, còn nếu muốn quản lý thì bạn vào đường dẫn này http://developers.facebook.com/tools/comments

  3. Khacthuan_bk says:

    Sao mình đã lam đúng như thế này sao nó không hiện ra cái gì nhỉ? giúp mình với

    • Tấn Việt says:

      Bạn có thể chụp hình cho mình xem được không? Bạn thử copy đoạn HTML trong bài viết và chèn những thông tin cần thiết xem sao. Mình thử trên localhost và hosting vẫn ok mà bạn. 🙂

  4. lan says:

    cho mình hỏi muốn lấy số lượng comment facebook hiện thị trên web của mình thì làm thế nào ạ?
    chỉ lấy số lượng thôi 🙂
    thanks

    • Tấn Việt says:

      Chào bạn,

      Đây có phải là điều bạn cần không?

      Count Number Of Comments on Facebook Comments Box

      • lan says:

        mình làm nhưng không ra.hic! khi mình làm xong cái comment facebook vào website thì khi commnet mình thấy thông báo Warning: http://localhost/j/gag/index.php/component/sl_funpics/?view=picture&id=6 is unreachable.mình không biết lỗi này do đâu. nó có ảnh hưởng gì tới phần hiện thị số lượng comment ko ?
        thanhks bạn.

        • lan says:

          không ai jup minh sao ?

          • Tấn Việt says:

            Hi lan,

            Thời gian qua mình khá bận nên chưa reply cho bạn. Lâu rồi mình cũng không code các API của Facebook nên không rõ là FB có thay đổi các thông số gì không. Mình có tìm hiểu trên mạng thì thấy có một số bạn cũng đang gặp tình trạng như bạn. Khi thao tác với FB ở localhost thì bạn cần khai báo thêm các thông số gì đó (bạn có thể search Google), nhưng nếu bạn có hosting thì code sẽ không có vấn đề gì.

        • Thiết kế web giá rẻ says:

          Cái http://localhost/j/gag/index.php/component/sl_funpics/?view=picture&id=6 làm sao mà nó hiểu dc. cái này bạn vẫn chạy trên localhost làm sao mà dc.

  5. Thiết kế web giá rẻ says:

    bạn chạy trên localhost làm sao mà fb nó hiểu dc.

    • lan says:

      có cách fix mà bạn.

  6. UCLA says:

    Chao ban,

    Cam on ban da post bai viet vo cung huu ich nay. Minh tim kiem cach add comment box vao trang website da lau mah chua tim duoc. May man tim duoc bai viet nay.

    Minh da thanh cong add duoc box comment va like vao trang web. Nhung co 1 van de. Minh thu comment va hit like. Nhung no’ hien ra warning error khi minh hit like va warning:

    “Sorry, this post contains a blocked URL

    The content you’re trying to share includes a link that’s been blocked for being spammy or unsafe:

    http://toanbtran.com/blog.html

    For more information, visit the Help Center. If you think you’re seeing this by mistake, please let us know.”

    Ban co the giup minh sua chua loi nay duoc khong? Neu can minh co the send code cua trang html do cho ban. Cam on ban nhieu. Minh moi hoc lam website nen mong ban cho loi khuyen.

    Toan Tran

  7. thang says:

    mình làm giống vậy và đã xóa được comment trên web.nhưng khi fresh lại thì comment vẫn còn nguyên.bạn có thể giúp mình không?

  8. game iwin says:

    You can’t post this because it has a blocked link.
    The content you’re trying to share includes a link that’s been blocked for being spammy or unsafe:
    lỗi này là sao anh em

    • Tấn Việt says:

      Lỗi này là có thể do website của bạn có chứa đường dẫn bị đánh dấu là spam hoặc cũng có thể là do nhiều người phản hồi với Facebook rằng website của bạn chứa đường dẫn độc hại, không an toàn. Bạn hãy gởi report tới Facebook yêu cầu đưa website của bạn ra khỏi blacklist. Ngoài ra bạn hãy nhờ bạn bè mình phản ảnh tốt về web của bạn thì có lẽ Facebook sẽ đưa ra khỏi danh sách blacklist.

      Link contact Facebook: https://www.facebook.com/help/contact/?id=244560538958131

      Xem thêm: My Website URL blocked By Facebook | How To Unblock?

      Thân!

  9. Koi_Rubi says:

    Mình làm theo và coment đc bình thường, tuy nhiên mình k thấy nó thông báo khi có comment mới, mình đã điền đúng ID của mình rùi mà

  10. tieuanh says:

    Bạn cho mình hỏi có cách nào nhúng comment box của fb vào google sites không? Mình đang cần gấp bạn giúp mình nhé! Mình cảm ơn.

  11. tam says:

    chao moi nguoi.
    chi minh cach lay like box facebook dua vao websites : web bang html tren face, localhost chi minh cach chinh sua href voi.
    thank !

  12. An Quach says:

    Trước đây mình có đọc qua 1 bài viết trên mạng nước ngoài, họ nói khi nhúng Facebook Comment lên website thì sẽ không được tối ưu SEO vì facebook nó nhúng dạng iFrame. Nếu dùng comment của wordpress thì sẽ tốt hơn vì nội dung sẽ nằm hẳn trong trang web.