Sau một thời gian sử dụng Xenforo nhiều người nhận định là bộ search của Xenforo có vấn đề, tìm kiếm từ khóa nhiều lúc không ra hoặc ra không chính xác ( Mặc dù nội dung và tiêu đề topic hoàn toàn tồn tại) ngoài ra nó còn tốn tài nguyên của server.
 Trong thời gian chờ bộ search tốt hơn từ Xenforo chúng ta có một thay thế hoàn hảo là Google Custom Search, còn về chất lượng search từ Google Custom Search thì không cần phải chê, chủ yếu là website bạn index tốt là được.

Nhưng tích hợp Google Custom Search vào Xenforo như thế nào? Và cách làm nó trở thành trình duyệt mặc định cho diễn đàn ra sao? Bạn chỉ cần làm theo các bước đơn giản sau là nhanh nhất:

1 Đăng ký Google Custom Search

Bạn vào cse.google.com tạo 1 Search Engine của site, lấy code API từ đoạn code mà Google cung cấp, dạng như sau:

<script>
  (function() {
    var cx = 'xxxxxxxxxxxxxxxxxxxxxx:yyyyyyyyyyy';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

2 Đăng nhập admincp Xenforo, tạo template với tên googlesearch

Đặt đoạn code này vào :

<fieldset id="GoogleSearch">
<form action="pages/search" id="cse-search-box" class="formPopup">
 
    <input type="hidden" name="cx" value="xxxxxxxxxxxxxxxxxxxxxx:yyyyyyyyyyy" />
    <input type="hidden" name="ie" value="utf-8" />
<div class="primaryControls">
            <span class="textboxcontainer"><span><input type="search" name="q" id="googlesearchquery" class="textCtrl" /></span></span>
</div>
                </form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en"></script>
</fieldset>

3 Tạo một page mới đặt tên bất kì:

-  Admin CP -> Applications -> Creat New Page
- Tại ô Url Portion bạn đặt là "search"
- Tại tab HTML Template bạn thêm đoạn code sau:

<div id='cse' style='width: 100%;'>Loading....</div>
<script src='//www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
google.load('search', '1', {language: 'en', style: google.loader.themes.SHINY});
google.setOnLoadCallback(function() {
  var customSearchOptions = {};
  var orderByOptions = {};
  orderByOptions['keys'] = [{label: 'Relevance', key: ''} , {label: 'Date', key: 'date'}];
  customSearchOptions['enableOrderBy'] = true;
  customSearchOptions['orderByOptions'] = orderByOptions;
  var customSearchControl =  new google.search.CustomSearchControl('xxxxxxxxxxxxxxxxxxxxxx:yyyyyyyyyyy', customSearchOptions);
  customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
  var options = new google.search.DrawOptions();
  options.enableSearchResultsOnly();
  options.setAutoComplete(true);
  customSearchControl.draw('cse', options);
  function parseParamsFromUrl() {
    var params = {};
    var parts = window.location.search.substr(1).split('&');
    for (var i = 0; i < parts.length; i++) {
      var keyValuePair = parts[i].split('=');
      var key = decodeURIComponent(keyValuePair[0]);
      params[key] = keyValuePair[1] ?
          decodeURIComponent(keyValuePair[1].replace(/\+/g, ' ')) :
          keyValuePair[1];
    }
    return params;
  }
  var urlParams = parseParamsFromUrl();
  var queryParamName = 'q';
  if (urlParams[queryParamName]) {
    customSearchControl.execute(urlParams[queryParamName]);
  }
}, true);
</script>

4 Chèn form search Google vào vị trí bạn muốn hiển thị:

Mở template search_bar  tìm "</xen:hook>" thêm vào bên dưới nó đoạn code sau:

 <xen:include template="googlesearch" />

 5 Thêm đoạn css này vào template Extra.css :

#GoogleSearch{display: block;
 
        position: absolute;
        right: 300px;
        top: -18px;
 
        margin: 0;
 
        background-color: @content.background-color;
        border-radius: 5px;
        padding-top: 5px;
        _padding-top: 3px;
        z-index: 7500;
}

Sau khi lưu lại bạn ra trang chủ và search xem kết quả nhé.

Lưu ý: Bạn nhớ thay thế xxxxxxxxxxxxxxxxxxxxxx:yyyyyyyyyyy thành API bạn có được khi đăng ký Google Custom Search nhé


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


Xem thêm:
- Hướng dẫn tạo biến dùng chung toàn bộ template Xenforo ( Global Template Variable )
- XenTag 2.1 plugin hữu ích cho thành viên & SEO diễn đàn Xenforo
- [8wayRun.Com] XenPorta 1.6.0 - Plugin CMS miễn phí mạnh mẽ cho Xenforo
- Tạo khung đăng ký thành viên dạng popup trong diễn đàn Xenforo
- Hướng dẫn đặt quảng cáo theo từng forum hoặc category trong xenforo
- Video hướng dẫn chi tiết cách viết Addon cho diễn đàn XenForo
- Hướng dẫn tạo quảng cáo sau bài viết đầu tiên cho diễn đàn Xenforo
- Cách ẩn số lượng sản phẩm trong danh mục OpenCart

Bài viết này sẻ hướng dẫn các bạn gắn một form tìm kiếm của Google lên website hoặc blog. Tiện ích tìm kiếm của Google thì ai cũng biết là search khá nhanh, nhẹ và kết quả chính xác, nhưng website của bạn phải index tốt.

Bước 1: Các bạn vào link https://www.google.com/cse/ chọn vào Tạo công cụ tìm kiếm tùy chỉnh sẻ chuyển đến trang tạo Công cụ tìm kiếm mới => Các bạn điền chính xác các thông tin như sau:

Bước 2: Sau khi nhấn tạo bạn sẻ chuyển sang trang báo thêm mới thành công, bạn nhấn vào nút Nhận mã để chuyển đến trang nhận code để add vào website hoặc blog của bạn:

Bước 3: Bạn copy đoạn code xuất hiện bên dưới paste vào vị trí trên website bạn muốn form search xuất hiện:

Vậy là xong, ngoài ra nếu bạn muốn custom lại khung search bạn chọn vào menu trái của giao diện trang nhận code search, chọn mục Giao diện.
Bạn có thể thiết lập thêm tính năng tìm kiếm, kiểm tiền từ form search này của Google nhưng phải có tìa khoản Google Adsence.

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


Xem thêm:
- Cách tạo khung tìm kiếm Google Custom Search mặc định cho Xenforo
- XenTag 2.1 plugin hữu ích cho thành viên & SEO diễn đàn Xenforo
- [8wayRun.Com] XenPorta 1.6.0 - Plugin CMS miễn phí mạnh mẽ cho Xenforo
- Tạo khung đăng ký thành viên dạng popup trong diễn đàn Xenforo
- Hướng dẫn đặt quảng cáo theo từng forum hoặc category trong xenforo
- Video hướng dẫn chi tiết cách viết Addon cho diễn đàn XenForo