Custom Search Element 使用Ajax效果!

Google搜寻一直在进化,除了提供广大的网际网路搜寻外,也推出个人网站的站内搜寻,当然还提供API让使用者可以开发酷炫的Ajax效果搜寻功能,让大家有多项选择。这回,Google推出了更棒的Ajax效果搜寻引擎,让你免API、免外挂,透过「Custom Search Element」点个几下就可以拥有个人网站搜寻引擎啰!

在WordPress中,若是想要使用Google搜寻引擎当成站内搜寻基本上有两种模式,一种是採用外挂,另一种是採用Google CSE自订搜寻,当然这两种各有优缺点。採用外挂的缺点是载入时会有点卡;若是使用自订搜寻,则须要找个页面来给搜寻引擎用,这样才能看起来好看些,但是搜寻结果显示速度不如外挂版的Google搜寻。

不久之前看到Google的自订搜寻似乎与Api版的结合变成「Custom Search Element」,不仅读取速度快,完全使用Google 资源,设计採延迟载入,不影响网站整体载入速度,还可以让使用者加入多个网站,当然还可以结合Google AdSense来赚取收益喔!不过前提是你网站要开放给Google搜寻引擎进入,否则装了该搜寻引擎,Google也抓不到你网站资料唷!

Custom Search Element 使用Ajax效果

网站名称: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】 ,接着请将程式码摆到自己部落格想显示的地方,一般来说都会摆在侧边栏模组中,放上后到网站首页看一下,搜寻效果就出来啰!

这组的搜寻引擎语法完全不需调整,因为他会根据你所放置的网站去搜寻该网站的东西,因此您完全不须设定网址或是任何其它设定,系统就会帮你对应好。唯一需要调整的应该是整个搜寻的大小,您可以修改程式码中的以下这串语法:

语法中的「width:100%」就是指整个搜寻的宽度是100%显示,也就是你那区块有多宽他就会显示多大,您可以自行修正百分比,调整到最适合自己网站的搜寻效果。

Custom Search Element 使用Ajax效果

二、搜单一网站并搭配Google AdSense

若您在Custom Search Element中的「Configure」部分选择【Search my site and use AdSense for Search 】 ,那您就可以在「AdSense Publisher ID」部分填上您的Google AdsSense发布商ID,他将会把广告设定成您帐户的广告,若访客有点击广告,其收益将属于您的。

这个代码一样很简单处理,把他放到您的网站上就可以了,如果有访客使用该搜寻引擎,他就会将搜寻结果自动锁定在您的网站上,但如同前面所说,你的网站一定开放给Google搜寻引擎抓,否则这个搜寻就没用处了。

一样,您如果觉得整个搜寻太宽了,可以自行修改语法中以下这串,100%的数值您可以自由变更符合您网站显示的需求。

Custom Search Element 使用Ajax效果

如果你不知道怎幺找发布商ID,这时请先登入到您的Google AdSense帐户中,仔细注意一下右上角,是不是有一串发布商ID?该ID的样式长的像这样:「pub-16个数字」。这串就是您的发布商ID,赶快填入刚刚的「AdSense Publisher ID」栏位吧!

Custom Search Element 使用Ajax效果

三、结合Google自订搜寻

我想这种方式应该最符合大家的需求,因为我自己也是使用这种模式。它可以帮您整合原本的自订搜寻,换句话说,您使用Custom Search Element这种模式的搜寻一样可以看到Google自订搜寻帮您统记的资料,是不是很方便呢?

来到Custom Search Element中,在「Configure」部分请选择【Use an existing custom search engine】,接着在「Custom Search ID」部分输入您的自订搜寻那串代码,最后将程式码複製到网站上贴在想显示的地方就可以啰!

Custom Search Element 使用Ajax效果

如果你不知道Google自订搜寻的那串代码,那请登入您的Google自订搜寻,进入后请找到您的搜寻引擎并点击「控制台」,进入设定画面后,点击左方的「取得程式码」,在程式码中有一串类别名称为「cx」,其后方应该有串「数字:英文数字」的代码,没错就是那串,请将该串代码填到刚刚的「Custom Search ID」吧!

Custom Search Element 使用Ajax效果

张贴搜寻程式码到部落格

以WordPress为例,你可以到后台的模组部分,新增一个文字模组,然后将模组拖曳到你想显示的位置,然后展开该模组贴上搜寻引擎语法,然后点击﹝储存﹞,这样就会显示在首页上啰!

Custom Search Element 使用Ajax效果

贴到首页后可以赶快来测试效果,看看是否真的能运作且正常呢?如果可以正常使用就会直接秀出搜寻结果在搜寻框下方,完全不需另开新页面,搜寻速度超快的唷!

Custom Search Element 使用Ajax效果

上一篇: 下一篇: