Custom Search Element 使用Ajax效果,節省版面的Google自訂搜尋!

Google搜尋一直在進化,除了提供廣大的網際網路搜尋外,也推出個人網站的站內搜尋,當然還提供API讓使用者可以開發酷炫的Ajax效果搜尋功能,讓大家有多項選擇。這回,Google推出了更棒的Ajax效果搜尋引擎,讓你免API、免外掛,透過「Custom Search Element」點個幾下就可以擁有個人網站搜尋引擎囉!


在WordPress中,若是想要使用Google搜尋引擎當成站內搜尋基本上有兩種模式,一種是採用外掛,另一種是採用Google CSE自訂搜尋,當然這兩種各有優缺點。採用外掛的缺點是載入時會有點卡;若是使用自訂搜尋,則須要找個頁面來給搜尋引擎用,這樣才能看起來好看些,但是搜尋結果顯示速度不如外掛版的Google搜尋。

不久之前看到Google的自訂搜尋似乎與Api版的結合變成「Custom Search Element」,不僅讀取速度快,完全使用Google 資源,設計採延遲載入,不影響網站整體載入速度,還可以讓使用者加入多個網站,當然還可以結合Google AdSense來賺取收益喔!不過前提是你網站要開放給Google搜尋引擎進入,否則裝了該搜尋引擎,Google也抓不到你網站資料唷!

Google Custom Search Element 自訂搜尋

網站名稱:Google Web Elements-Custom Search Element
網站網址https://cse.google.com/cse/

由於Custom Search Element提供多種模式的搜尋,為了讓大家好了解,我們就來一一簡單介紹一下各個的不同與簡易的使用方法,大家可以挑選最適合自己網站的搜尋引擎。主要分成三種,分別是「搜尋自己單一網站」、「搜尋單一網站並搭配自己的Google AdSense廣告」、「結合Google自訂搜尋」。

一、搜尋單一網站

在Custom Search Element中的「Configure」部分選擇【Automatically search my site】 ,接著請將程式碼擺到自己部落格想顯示的地方,一般來說都會擺在側邊欄模組中,放上後到網站首頁看一下,搜尋效果就出來囉!

這組的搜尋引擎語法完全不需調整,因為他會根據你所放置的網站去搜尋該網站的東西,因此您完全不須設定網址或是任何其它設定,系統就會幫你對應好。唯一需要調整的應該是整個搜尋的大小,您可以修改程式碼中的以下這串語法:

<div id="cse" style="width:100%;">

語法中的「width:100%」就是指整個搜尋的寬度是100%顯示,也就是你那區塊有多寬他就會顯示多大,您可以自行修正百分比,調整到最適合自己網站的搜尋效果。

Google Custom Search Element 自訂搜尋

二、搜單一網站並搭配Google AdSense

若您在Custom Search Element中的「Configure」部分選擇【Search my site and use AdSense for Search 】 ,那您就可以在「AdSense Publisher ID」部分填上您的Google AdsSense發佈商ID,他將會把廣告設定成您帳戶的廣告,若訪客有點擊廣告,其收益將屬於您的。

這個代碼一樣很簡單處理,把他放到您的網站上就可以了,如果有訪客使用該搜尋引擎,他就會將搜尋結果自動鎖定在您的網站上,但如同前面所說,你的網站一定開放給Google搜尋引擎抓,否則這個搜尋就沒用處了。

一樣,您如果覺得整個搜尋太寬了,可以自行修改語法中以下這串,100%的數值您可以自由變更符合您網站顯示的需求。

<div id="cse" style="width:100%;">

Google Custom Search Element 自訂搜尋

如果你不知道怎麼找發佈商ID,這時請先登入到您的Google AdSense帳戶中,仔細注意一下右上角,是不是有一串發佈商ID?該ID的樣式長的像這樣:「pub-16個數字」。這串就是您的發佈商ID,趕快填入剛剛的「AdSense Publisher ID」欄位吧!

Google Custom Search Element 自訂搜尋

三、結合Google自訂搜尋

我想這種方式應該最符合大家的需求,因為我自己也是使用這種模式。它可以幫您整合原本的自訂搜尋,換句話說,您使用Custom Search Element這種模式的搜尋一樣可以看到Google自訂搜尋幫您統記的資料,是不是很方便呢?

來到Custom Search Element中,在「Configure」部分請選擇【Use an existing custom search engine】,接著在「Custom Search ID」部分輸入您的自訂搜尋那串代碼,最後將程式碼複製到網站上貼在想顯示的地方就可以囉!

Google Custom Search Element 自訂搜尋

如果你不知道Google自訂搜尋的那串代碼,那請登入您的Google自訂搜尋,進入後請找到您的搜尋引擎並點擊「控制台」,進入設定畫面後,點擊左方的「取得程式碼」,在程式碼中有一串類別名稱為「cx」,其後方應該有串「數字:英文數字」的代碼,沒錯就是那串,請將該串代碼填到剛剛的「Custom Search ID」吧!

Google Custom Search Element 自訂搜尋

張貼搜尋程式碼到部落格

以WordPress為例,你可以到後台的模組部分,新增一個文字模組,然後將模組拖曳到你想顯示的位置,然後展開該模組貼上搜尋引擎語法,然後點擊﹝儲存﹞,這樣就會顯示在首頁上囉!

Google Custom Search Element 自訂搜尋

貼到首頁後可以趕快來測試效果,看看是否真的能運作且正常呢?如果可以正常使用就會直接秀出搜尋結果在搜尋框下方,完全不需另開新頁面,搜尋速度超快的唷!

Google Custom Search Element 自訂搜尋