Cách tạo khung tìm kiếm Google Custom Search mặc định cho Xenforo

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