Tìm kiếm nhanh

Bình luâFacebook cho website NukeViet

Thảo luận trong 'Coding' đăng bởi nhimthulinh, 22/06/2016 08:22.

  • nhimthulinh

    nhimthulinh

    Điều hành viên Quản trị diễn đàn

    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 :
    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
    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 :
    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ả.
    + 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 :
    Đế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 :
    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

     
    Lần sửa cuối bởi một điều hành viên: 09/07/2016 03:33
    dangdinhtu saigonvn thích điều này.
  • saigonvn

    saigonvn Lê Kim Sơn

    Cái này có áp dụng được cho module shop không? Mình có làm theo hướng dẫn nhưng file detail.tlp của module shop không có đoạn BEGIN COMMENT nên mình không biết thêm như thế nào.

     
    Lần sửa cuối bởi một điều hành viên: 09/07/2016 03:33
  • huongpro_love

    huongpro_love Nguyễn Văn Hưởng

    Ap dụng được hết bạn ạ. Quan trọng bạn muốn thêm vào đâu. Thêm vào tabs commends, bạn mở file detail.tpl tìm <!-- END: comment -->  thêm lên trên đó Thêm bên dưới các tabs thì bạn tìm   <!-- END: keywords -->   thêm bên dưới. 

     
    Lần sửa cuối bởi một điều hành viên: 09/07/2016 03:33
    saigonvn thích điều này.
  • saigonvn

    saigonvn Lê Kim Sơn

    Thanks. Nut like đã có. smiley

     
    Lần sửa cuối bởi một điều hành viên: 09/07/2016 03:33
  • huongpro_love

    huongpro_love Nguyễn Văn Hưởng

    bạn chú ý mình vừa sửa lại câu trả lời nhé.

     
    Lần sửa cuối bởi một điều hành viên: 09/07/2016 03:34
    saigonvn thích điều này.
  • vudinhquang

    vudinhquang Vũ Đình Quang

    Thêm vào mỗi sản phẩm thì làm thế nào a?

     
  • anhyeuviolet

    anhyeuviolet Kenny Nguyen

     

    Bạn sửa vào detail.tpl của theme cho module tương ứng thì nó sẽ hiện ở mọi SP thôi !

     

Chia sẻ trang này

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