Thêm comment Facebook cho website NukeViet

Thứ sáu - 23/01/2015 08:30
Bài viết dưới đây giúp bạn chèn nhanh ô bình luận của Facebook lên NukeViet.
Thêm comment Facebook cho website NukeViet
Thêm comment Facebook cho website NukeViet

Mặc định, NukeViet các phiên bản đã được cấu hình sẵn chức năng bình luận cho từng khu vực cần thiết, mà thường dùng nhất là modules News. Tuy thế để hỗ trợ tốt hơn cho công tác SEO thì thêm vài công cụ bình luận có tính tương tác và lan toả cao như Facebook comment là điều nên làm.

1/ Chèn ô Facebook Comment vào giao diện :

Bạn cần truy cập URL sau :

https://developers.facebook.com/docs/plugins/comments?locale=vi_VN

Tại đây, Facebook cơ bản đã cung cấp đủ hết các đồ nghề cần thiết để bạn thêm comment box của họ lên một website.

Khi truy cập vào, bạn sẽ nhìn thấy giao diện như sau

Facebook Comment

Bạn điền tương ứng các giá trị cần thiết. Thực ra chỉ cần chú ý phần Number of Posts - Số lượng comment sẽ hiển thị trên trang và Color Scheme - tông màu sáng hay tối cho ô comment. Hai giá trị còn lại là URL và chiều rộng ( kích thước ) sẽ được điều chỉnh sao cho linh động và phù hợp website.

Sau khi chọn xong, bạn chọn Get Code và sẽ có kết quả như sau :

Facebook Comment


Vậy là ta có 2 đoạn code. Đoạn thứ nhất để gọi các nội dung SDK cần thiết từ Facebook và đoạn thứ hai đặt ở nơi mà bạn muốn hiển thị ô comment này.

Bạn mở file detail.tpl nằm trong khu vực themes/ themes bạn đang dùng/modules/news/ ( hoặc tuỳ modules mà bạn muốn chèn ).

Tìm phần và thêm vào bên dưới của

<!-- BEGIN: main -->

+ Đoạn code 1 :

<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/sdk.js#xfbml=1&version=v2.0";  fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>

Bước này bạn chỉ cần làm cho site NukeViet 3, do ở bản NukeViet 4 thì các SDK đã được tích hợp sẵn.
Tuy vậy bạn cần có FB App ID để kích hoạt SDK này cho NV 4.
=> Xem thêm : Hướng dẫn đăng ký Facebook App ID cho Website.

Sau đó, cũng trong detail.tpl, bạn tìm :

    <!-- BEGIN: comment -->

+ Đoạn code 2 : Lưu ý là mình đã có điều chỉnh một số nội dung trong code này và sẽ nói rõ hơn ở dưới.

<div class="fb-comments" data-href="{SELFURL}" data-width="100%" data-numposts="5" data-colorscheme="light"></div><style>.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {width: 100% !important;}.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe span[style] {width: 100% !important;}</style>

Điền bên dưới phần Begin Comment nhằm tận dụng chức năng cho phép/vô hiệu hoá cũng như phân quyền comment của người xem. Nếu muốn bỏ qua và luôn hiển thị ô Facebook Comment thì chỉ cần đặt code trên bên ngoài phần Begin Comment hoặc bất cứ nơi nào mà bạn thích và cho là phù hợp, thẩm mỹ.

Thêm một chút, ở đây ta có thể thấy, giá trị data-href  đã được thay đổi thành SELFURL. Đó là vì các comment được Facebook nhận diện theo URL. Nếu không làm dạng URL động như vậy, mọi comment dù bình luận ở đâu, về vấn đề gì cũng đều hiển thị một nội dung duy nhất. Để làm được điều đó, lát nữa ta sẽ phải xử lý trong PHP.

Về phần data-width có giá trị 100% và đoạn style bên dưới nhằm đảm bảo ô comment có thể hiển thị phù hợp với giao diện, không ảnh hưởng đến thẩm mỹ của trang, và cũng tiện hơn cho người quản trị mà lát nữa mình cũng sẽ trình bày bên dưới.

2/ Tạo URL động - SELFURL cho NukeViet

Ở phiên bản NV 4 thì vấn đề này đã được tối ưu sẵn, bạn nào còn đang dùng NV3 thì mới cần thực hiện các bước như sau.

Tuỳ theo theme mà bạn dùng, thường thì đặt tên theo mặc định là default hay modern, tìm và mở file /modules/news/theme.php hoặc /themes/modern/modules/news/theme.php nếu dùng theme modern.

Tìm :

global $global_config, $module_info, $lang_module, $module_name, $module_file, $module_config, $global_array_cat, $my_head, $lang_global, $user_info, $admin_info, $catid;


Thay lại thành :

global $global_config, $module_info, $lang_module, $module_name, $module_file, $module_config, $global_array_cat, $my_head, $lang_global, $user_info, $admin_info, $catid, $client_info;

Tìm :

$xtpl = new XTemplate( "detail.tpl", NV_ROOTDIR . "/themes/" . $module_info['template'] . "/modules/" . $module_file );

Thêm vào dưới nó :

$xtpl->assign( 'SELFURL', $client_info['selfurl'] );

Khi đó các giá trị trong detail.tpl dùng SELFURL sẽ tự sinh ra URL chính xác của bài viết mà người dùng đang đọc. Đó là mục đích của giá trị này mà ta dùng ở đoạn code thứ 2 bên trên.

Đến đây coi như là hoàn tất phần chèn comment box Facebook vào site NukeViet. Nếu bạn muốn quản lý các bình luận bằng Facebook trên site thì xem thêm phần dưới.

3/ Thêm FB Admin cho comment Facebook :

Do Facebook có tính lan toả cao, nếu không kiểm soát đôi khi lại khổ với những comment không mong muốn. Để quản lý, bạn cần đến Facebook API, nhưng phần này này dài quá nên mình sẽ nói sau. Còn trong bài này, ta sẽ dùng cách dễ hơn, thông qua meta properties của Facebook cấp.

+ Tìm Facebook ID:

Có nhiều cách để tìm Facebook ID, nhưng đơn giản nhất là truy cập vào trang " Find your Facebook ID", dán URL trang Facebook cá nhân của bạn (URL Facebook của ai đó bạn muốn cấp quyền quản lý các comment) vào, nó sẽ nhanh chóng trả về kết quả.

Hình minh quạ :v

+ Thêm meta Facebook ID:

Theo định dạng mà Facebook cung cấp, ta có thẻ meta sau :

<meta property="fb:admins" content="10000027821xxxx" />

Với NV3, hãy mở file header.tpl bên trong thư mục themes/ theme đang dùng/layout/

và thêm đoạn code bên trên vào dưới của dòng

{THEME_META_TAGS}

Lưu ý thay FB ID của bạn vào tương ứng của content nhé.

Do trong NV3 thì thẻ meta này chưa được xác minh, do đó ta không thêm thẻ này thông qua chức năng meta tag của Admin Panel, và cũng phải tắt tối ưu site. Nếu không thẻ này sẽ tự bị hệ thống xoá đi mất.

Với NV4, hãy vào Công cụ SEO => Cấu hình Meta-Tags, cấu hình như sau :

Facebook admin ID

Đến đây là xong phần kỹ thuật. Hãy thử đăng nhập Facebook mà bạn đã định danh là Admin và tìm đến một trang nào đó có chứa ô comment, bạn sẽ thấy :

Facebook admin moderate

Với các công cụ này, bạn có thể kiểm duyệt nhanh, xoá, ẩn, ban(cấm) các comment, các user quá khích trên trang của bạn.

Nếu có vấn đề gì hãy chia sẻ với mình nhé. Chúc bạn thành công.

Tác giả bài viết: Kenny Nguyễn

Nguồn tin: SEOERA - Mê NukeViet

Tổng số điểm của bài viết là: 10 trong 2 đánh giá

Xếp hạng: 5 - 2 phiếu bầu
Click để đánh giá bài viết

  Ý kiến bạn đọc

  • Việt Đức

    Ban hướng dẫn cách làm cho bản nukeviet mới nhất được không?

      Việt Đức   03/12/2016 23:45
    • @Việt Đức Chào bạn.
      Về cơ bản bài này tương thích với phiên bản NukeViet mới nhất.

        nguyentiendat713 Nguyen   16/01/2017 17:45
Mã bảo mật   
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây