Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Hướng dẫn tích hợp tìm kiếm bằng Google cho Xenforo

Chủ đề thuộc danh mục 'Hướng dẫn - Thủ thuật Xenforo' được đăng bởi Phạm Hữu Dư, 13/11/13.

Lượt xem: 6,388

  1. Phạm Hữu Dư phamhuudu.com

    Intergrate Google Custom Search into Xenforo's Search Core - Tích hợp công cụ tìm kiếm Google vào Xenforo

    Qua quá trình sử dụng Xenforo, mình thấy rằng công cụ tìm kiếm của nó chưa thực sự chính xác, chính vì thế mà việc tích hợp thêm Google Search bổ sung thêm là 1 việc rất cần thiết, sau đây mình xin hướng dẫn các bạn thực hiện việc này.

    Đầu tiên các bạn có thể xem demo online tại đây: http://forum.vietdesigner.net/search/471062/?q=blend màu nắng&o=date

    Demo ảnh:

    [​IMG]
    Đây là giao diện tìm kiếm mặc định của Xenforo


    [​IMG]
    Còn đây là giao diện Google search được tích hợp song song

    Điều đó có nghĩa là bạn có thể sử dụng cùng 1 lúc 2 cái này bằng việc click qua lại giữa 2 tab.

    OK ta bắt đầu bài hướng dẫn :)

    Đầu tiên các bạn vào trang: http://www.google.com.vn/cse/

    Và sau đó tạo cho mình 1 tài khoản, và tùy chỉnh đơn giản như sau:

    [​IMG]

    Sau khi add mới rồi bạn sẽ được cung cấp 1 đoạn code tương tự như sau:

    [​IMG]

    Khi đã có được đoạn code rồi thì bây giờ ta bắt đầu tích hợp nó vào forum Xenforo thôi, trước tiên bạn nên vào template search_results và thay thế toàn bộ code trong template này bằng code sau đây:
    Code:
    <xen:if is="{$search.searchConstraints.title_only}">
    <xen:if is="{$search.search_query}">
    <xen:title>{xen:phrase search_results_for_query}: {$search.search_query}</xen:title>
    <xen:h1>{xen:phrase search_results_for_query}: <a href="{xen:link search, $search, 'searchform=1'}"><em>{$search.search_query}</em></a></xen:h1>
    <xen:else />
    <xen:title>{xen:phrase search_results}</xen:title>
    </xen:if>
    
    <xen:navigation>
    <xen:breadcrumb href="{xen:link full:search}">{xen:phrase search}</xen:breadcrumb>
    </xen:navigation>
    
    <xen:container var="$head.robots">
    <meta name="robots" content="noindex" /></xen:container>
    
    <xen:require css="search_results.css" />
    
    <xen:if is="{$search.searchWarnings}">
    <ol class="searchWarnings">
    <xen:foreach loop="$search.searchWarnings" value="$warning">
    <li>{$warning}</li>
    </xen:foreach>
    </ol>
    </xen:if>
    
    <xen:if is="{$search.users}">
    <xen:sidebar>
    <div class="section userResults avatarList">
    <div class="secondaryContent">
    <h3>{xen:phrase matched_users}</h3>
    <ul>
    <xen:foreach loop="$search.users" value="$user">
    <li class="userResult">
    <xen:avatar user="$user" size="s" img="true" />
    <xen:username user="$user" rich="true" />
    <div class="userTitle">{xen:helper userTitle, $user}</div>
    </li>
    </xen:foreach>
    </ul>
    </div>
    </div>
    </xen:sidebar>
    </xen:if>
    
    <div class="pageNavLinkGroup">
    <div class="linkGroup">
    <a href="{xen:link search, $search, 'searchform=1'}">{xen:phrase search_again}</a>
    </div>
    
    <xen:pagenav link="search" linkdata="{$search}" page="{$page}" perpage="{$perPage}" total="{$totalResults}" />
    </div>
    
    <div class="section sectionMain searchResults">
    <form action="" method="post">
    
    <ol class="searchResultsList">
    <xen:foreach loop="$results" value="$result" i="$i">
    {xen:raw $result}
    </xen:foreach>
    </ol>
    
    <xen:if is="{$userSearchMaxDate}">
    <div class="secondaryContent olderMessages">
    <a href="{xen:link search/member, '', 'user_id={$search.searchConstraints.user_id}', 'before={$userSearchMaxDate}'}">{xen:phrase find_older_messages}</a>
    </div>
    </xen:if>
    
    <div class="sectionFooter searchResultSummary">
    <span class="resultCount">{xen:phrase showing_results_x_to_y_of_z, 'start={xen:number $resultStartOffset}', 'end={xen:number $resultEndOffset}', 'total={xen:number $totalResults}'}</span>
    <xen:if is="{$nextPage}"><a href="{xen:link search, $search, 'page={$nextPage}'}" class="nextLink">{xen:phrase next} &gt;</a></xen:if>
    </div>
    
    </form>
    </div>
    
    <div class="pageNavLinkGroup">
    <div class="linkGroup">
    <xen:if is="{$ignoredNames}">
    <a href="javascript:" class="muted jsOnly DisplayIgnoredContent Tooltip" title="{xen:phrase show_hidden_content_by_x, "names={xen:helper implode, $ignoredNames, ', '}"}">{xen:phrase show_ignored_content}</a>
    </xen:if>
    <a href="{xen:link search, $search, 'searchform=1'}">{xen:phrase search_again}</a>
    </div>
    
    <xen:pagenav link="search" linkdata="{$search}" page="{$page}" perpage="{$perPage}" total="{$totalResults}" />
    </div>
    <xen:else />
    <xen:if is="{$page} > 1">
    <xen:if is="{$search.search_query}">
    <xen:title>{xen:phrase search_results_for_query}: {$search.search_query}</xen:title>
    <xen:h1>{xen:phrase search_results_for_query}: <a href="{xen:link search, $search, 'searchform=1'}"><em>{$search.search_query}</em></a></xen:h1>
    <xen:else />
    <xen:title>{xen:phrase search_results}</xen:title>
    </xen:if>
    
    <xen:navigation>
    <xen:breadcrumb href="{xen:link full:search}">{xen:phrase search}</xen:breadcrumb>
    </xen:navigation>
    
    <xen:container var="$head.robots">
    <meta name="robots" content="noindex" /></xen:container>
    
    <xen:require css="search_results.css" />
    
    <xen:if is="{$search.searchWarnings}">
    <ol class="searchWarnings">
    <xen:foreach loop="$search.searchWarnings" value="$warning">
    <li>{$warning}</li>
    </xen:foreach>
    </ol>
    </xen:if>
    
    <xen:if is="{$search.users}">
    <xen:sidebar>
    <div class="section userResults avatarList">
    <div class="secondaryContent">
    <h3>{xen:phrase matched_users}</h3>
    <ul>
    <xen:foreach loop="$search.users" value="$user">
    <li class="userResult">
    <xen:avatar user="$user" size="s" img="true" />
    <xen:username user="$user" rich="true" />
    <div class="userTitle">{xen:helper userTitle, $user}</div>
    </li>
    </xen:foreach>
    </ul>
    </div>
    </div>
    </xen:sidebar>
    </xen:if>
    
    <div class="pageNavLinkGroup">
    <div class="linkGroup">
    <a href="{xen:link search, $search, 'searchform=1'}">{xen:phrase search_again}</a>
    </div>
    
    <xen:pagenav link="search" linkdata="{$search}" page="{$page}" perpage="{$perPage}" total="{$totalResults}" />
    </div>
    
    <div class="section sectionMain searchResults">
    <form action="" method="post">
    
    <ol class="searchResultsList">
    <xen:foreach loop="$results" value="$result" i="$i">
    {xen:raw $result}
    </xen:foreach>
    </ol>
    
    <xen:if is="{$userSearchMaxDate}">
    <div class="secondaryContent olderMessages">
    <a href="{xen:link search/member, '', 'user_id={$search.searchConstraints.user_id}', 'before={$userSearchMaxDate}'}">{xen:phrase find_older_messages}</a>
    </div>
    </xen:if>
    
    <div class="sectionFooter searchResultSummary">
    <span class="resultCount">{xen:phrase showing_results_x_to_y_of_z, 'start={xen:number $resultStartOffset}', 'end={xen:number $resultEndOffset}', 'total={xen:number $totalResults}'}</span>
    <xen:if is="{$nextPage}"><a href="{xen:link search, $search, 'page={$nextPage}'}" class="nextLink">{xen:phrase next} &gt;</a></xen:if>
    </div>
    
    </form>
    </div>
    
    <div class="pageNavLinkGroup">
    <div class="linkGroup">
    <xen:if is="{$ignoredNames}">
    <a href="javascript:" class="muted jsOnly DisplayIgnoredContent Tooltip" title="{xen:phrase show_hidden_content_by_x, "names={xen:helper implode, $ignoredNames, ', '}"}">{xen:phrase show_ignored_content}</a>
    </xen:if>
    <a href="{xen:link search, $search, 'searchform=1'}">{xen:phrase search_again}</a>
    </div>
    
    <xen:pagenav link="search" linkdata="{$search}" page="{$page}" perpage="{$perPage}" total="{$totalResults}" />
    </div>
    <xen:else />
    <xen:if is="{$search.search_query}">
    <xen:title>{xen:phrase search_results_for_query}: {$search.search_query}</xen:title>
    <xen:h1>{xen:phrase search_results_for_query}: <a href="{xen:link search, $search, 'searchform=1'}"><em>{$search.search_query}</em></a></xen:h1>
    <xen:else />
    <xen:title>{xen:phrase search_results}</xen:title>
    </xen:if>
    
    <ul class="tabs Tabs" data-panes="#damme_GoogleCustomSearch_Panes > li">
    <li><a href="{xen:link search, $search}#gcs">Kết quả 
    	
    tìm kiếm từ 
    	
    Google</a></li>
    <li><a href="{xen:link search, $search}#xf">Kết quả 
    	
    tìm kiếm từ địa phương</a></li>
    </ul>
    
    <br/>
    <ul id="damme_GoogleCustomSearch_Panes">
    <li id="gcs">
    <div id="cse" style="padding: 10px; margin: 10px auto; border: 1px solid #a5cae4; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -khtml-border-radius: 10px;">Đang tải kết quả 
    	
    tìm kiếm từ 
    	
    Google ...</div>
    <script src="http://www.
    	
    google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
                
    	
    google.load('search', '1', {language : ''});
                
    	
    google.setOnLoadCallback(function() {
                    var customSearchOptions = {};
            
                    var customSearchControl = new 
    	
    google.search.CustomSearchControl(
                        '012314267219359930536:beq9a2pis0o',
                        customSearchOptions
                    );
                    customSearchControl.setResultSetSize(
    	
    google.search.Search.FILTERED_CSE_RESULTSET);
            
                    var options = new 
    	
    google.search.DrawOptions();
                    options.enableSearchResultsOnly();
            
                    customSearchControl.draw('cse', options);
                    customSearchControl.execute('{$search.search_query}');
                }, true);
            </script>
    </li>
    <li id="xf">
    <xen:navigation>
    <xen:breadcrumb href="{xen:link full:search}">{xen:phrase search}</xen:breadcrumb>
    </xen:navigation>
    
    <xen:container var="$head.robots">
    <meta name="robots" content="noindex" /></xen:container>
    
    <xen:require css="search_results.css" />
    
    <xen:if is="{$search.searchWarnings}">
    <ol class="searchWarnings">
    <xen:foreach loop="$search.searchWarnings" value="$warning">
    <li>{$warning}</li>
    </xen:foreach>
    </ol>
    </xen:if>
    
    <xen:if is="{$search.users}">
    <xen:sidebar>
    <div class="section userResults avatarList">
    <div class="secondaryContent">
    <h3>{xen:phrase matched_users}</h3>
    <ul>
    <xen:foreach loop="$search.users" value="$user">
    <li class="userResult">
    <xen:avatar user="$user" size="s" img="true" />
    <xen:username user="$user" rich="true" />
    <div class="userTitle">{xen:helper userTitle, $user}</div>
    </li>
    </xen:foreach>
    </ul>
    </div>
    </div>
    </xen:sidebar>
    </xen:if>
    
    <div class="pageNavLinkGroup">
    <div class="linkGroup">
    <a href="{xen:link search, $search, 'searchform=1'}">{xen:phrase search_again}</a>
    </div>
    
    <xen:pagenav link="search" linkdata="{$search}" page="{$page}" perpage="{$perPage}" total="{$totalResults}" />
    </div>
    
    <div class="section sectionMain searchResults">
    <form action="" method="post">
    
    <ol class="searchResultsList">
    <xen:foreach loop="$results" value="$result" i="$i">
    {xen:raw $result}
    </xen:foreach>
    </ol>
    
    <xen:if is="{$userSearchMaxDate}">
    <div class="secondaryContent olderMessages">
    <a href="{xen:link search/member, '', 'user_id={$search.searchConstraints.user_id}', 'before={$userSearchMaxDate}'}">{xen:phrase find_older_messages}</a>
    </div>
    </xen:if>
    
    <div class="sectionFooter searchResultSummary">
    <span class="resultCount">{xen:phrase showing_results_x_to_y_of_z, 'start={xen:number $resultStartOffset}', 'end={xen:number $resultEndOffset}', 'total={xen:number $totalResults}'}</span>
    <xen:if is="{$nextPage}"><a href="{xen:link search, $search, 'page={$nextPage}'}" class="nextLink">{xen:phrase next} &gt;</a></xen:if>
    </div>
    
    </form>
    </div>
    
    <div class="pageNavLinkGroup">
    <div class="linkGroup">
    <xen:if is="{$ignoredNames}">
    <a href="javascript:" class="muted jsOnly DisplayIgnoredContent Tooltip" title="{xen:phrase show_hidden_content_by_x, "names={xen:helper implode, $ignoredNames, ', '}"}">{xen:phrase show_ignored_content}</a>
    </xen:if>
    <a href="{xen:link search, $search, 'searchform=1'}">{xen:phrase search_again}</a>
    </div>
    
    <xen:pagenav link="search" linkdata="{$search}" page="{$page}" perpage="{$perPage}" total="{$totalResults}" />
    </div>
    </li>
    </ul>
    </xen:if>
    </xen:if>

    Các bạn chú ý đoạn này nha:
    Code:
    var customSearchControl = new 
    	
    google.search.CustomSearchControl(
                        '012314267219359930536:beq9a2pis0o',
                        customSearchOptions
                    );
    Thay cái ID 012314267219359930536:beq9a2pis0o bằng ID của bạn do Google cung cấp! Thế là xong rồi đó :D

    Mà cái này có 1 điều tuyệt vời nữa là giúp bạn có thể kiếm thêm tiền từ Google Adsense, vì nó có tích hợp quảng cáo trong cái khung Search này nữa :D

    [​IMG]

    Chúc các bạn thành công! Bài viết có tham khảo từ tác giả phanvanhai

    ...

Ủng hộ diễn đàn