乌徒帮技术范儿技术中心HTML代码 › 整合google自定义搜索到自己的网站

整合google自定义搜索到自己的网站

分类:HTML代码

整合google自定义搜索到自己的网站是指在自己的网站嵌入google的搜索功能,实现网站站内搜索强大功能,只要你的网站被google正常收录,都能使用这种方法。

什么是google自定义搜索

google自定义搜索是google提供的一种服务,可以在自己的网站嵌入一个google搜索框,利用google服务器,检索你的被google收录的网页。从效果上看,google自定义搜索就像你的网站本身的搜索功能一样,将为访客提供内容检索功能。google自定义搜索可以定义多个网站,这样你可以将自己的多个网站或自己朋友的网站一并放入搜索结果中,所以也不能说这是站内搜索。google自定义搜索可以绑定自己的google adsense账号赚钱,还可以绑定google analysis数据统计分析账号。

为什么要使用google自定义搜索功能

既然google自定义搜索和网站本身的搜索效果一样,为什么要使用它呢?其实不然,从上面的介绍中,你已经发现了google自定义搜索的新功能,如群站搜索,绑定广告和分析账户等。之所以使用google自定义搜索功能的最重要原因有两个:减轻服务器负担,让检索结果显示的更丰富。

使用google自定义搜索功能时,所做的检索操作全部是在google服务器进行检索,相当于在google首页检索你网站的内容,因此并不会用到网站本身的数据库操作,从而减轻服务器的负担。和谷歌检索结果一样,你的网站检索结果也会将检索关键字高亮显示,并只显示关键字前后附近的文字,和网站自身检索出来的结果条目是不是不一样呢。

快速获取google自定义搜索功能

google推出了Google Web Elements服务,提供现成的代码,为你的网站提供展示服务,其中有一项就是通用搜索功能。

点击这个网址进入http://www.google.com/webelements/#!/custom-search

用自己的google账户登录,会得到如下的选项

上图中,1是选择方式有三个选项,第一个是普通选项,第二个是绑定你的adsense账户的选项,第三是需要绑定你的搜索KEY的选项。2是填入的对应内容,如adsense账户。3是样式,可以在4中预览,5是代码拷贝区。

你只需要将上面的代码拷贝到博客或网站的特定位置即可,甚至一些可以加入js的第三方博客也可以使用。搜索结果将以ajxa的方式在搜索框下方显示出来,无需另外再加入代码或增加页面。而且得到最终搜索结果的效果也是很好的,可以增加网页的动态效果。例如,你可以将上面的代码直接拷贝到widget的文本中即可。

高级整合google自定义搜索功能到wordpress博客

为了让讲解更具体,这里以wordpress为例讲解如何整合可以自己进行控制的自定义搜索。你可以慢慢安装下面的步骤,一步一步完成:

1、申请google账户,登陆

2、进入Google 自定义搜索管理页面按照提示,先登记一个网站和相关信息,得到一个自定义搜索,刚开始可以先练手,如果自己觉得不舒服,后面可以将该自定义删除,所以不用担心填错,即使这个过程有不符合自己想法的,也可以在后面修改。

3、完成上面步骤之后,在下方有几项选择,随便一项,我们进入外观,你就会得到下面这个界面了。http://www.utubon.com

上图中可以看到自定义搜索功能管理界面的几乎所有功能。你可以逐项选择进行尝试。这里重点讲解外观设置。

在外观设置中,有上下两行模式,第一行是搜索框嵌入网站的方式,有六种方式,前三种效果和前面提到的快速嵌入的效果一样,都是在搜索框下方用ajxa的方法弹出结果,下面主要讲解2页的方式,因为这是我们使用该功能的主要的方式,其他两种方式你可以自己加入代码到网站看看效果。第二行的样式就不用多说,在下面的预览中可以看到效果。完成后点击保存获取代码。

4、2页的方式进入代码页面后如下图

上图中可以清晰的看到你需要填写的一些信息(adsense账户在左侧赚钱中填写http://www.utubon.com)然后根据自己的情况填写,“指定您要在自己网站上显示搜索结果的网址”内的地址将在后文中提到填写的内容。注意“指定嵌入到网址中的查询参数的名称”不要用s,因为wordpress本身s参数即搜索参数,如果你在后面的页面链接中没有处理好,将不会起作用。但是,如果你自己修改search.php模板页,那么可以实现用wordpress自己的搜索框搜传递值的结果,这时你就要用s作为传递参数了,乌徒帮就是这么做的,不知道会不会造成不良影响。analysisID根据你自己的填写。然后将第一个代码框内的代码拷贝到你想放置搜索框的地方,它将呈现搜索框。

5、创建搜索结果呈现页:你应该见过一些教程教你自己创建一个标签页。方法和那是一样的,我的方法是创建一个search.php(我的主题文件本没有该页面)然后作如下代码操作:

<?php /** Template Name: search */ ?>
<?php get_header(); ?>
这里放入你在上图中的第二个框内复制过来的代码即可
<?php get_footer(); ?>

将search.php上传到模板目录

6、创建搜索结果呈现页面:进入后台添加页面,这时,你将在右侧的模式中找到一个search的选项,选中后将使用search.php作为该页面的模板。将这个页面的别名(你使用了适当的固定链接的情况下)设置为search。发布后,你可以看下这个页面效果了,搜索试试看,是不是已经有效果了。不要急,这里只是页面内的搜索,你还没有将前第4步中的搜索框和这个页面联系起来。

7、完成整站的搜索功能,获取刚才你得到新页面的固定地址,填入“指定您要在自己网站上显示搜索结果的网址”中,这时上图中第一个代码框内的代码有了变化,再将代码拷贝到你想呈现代码框的地方。其实这一步应该在第5步之前完成,这里便于理解放置在后。

8、讲一下其他功能,绑定adsense时只需要邮箱地址即可,绑定成功后会提示绑定成功。修改外观之后应该重新安装代码。

通过上面这些步骤,google自定义高级搜索功能也就实现了,当然,本文实现的只是以乌徒帮实现的过程为例讲解了下,还有其他方式需要你自己进行测试。

PS:如果你的搜索结果投放了广告,该页面上是不能投放内容单元广告的,只能投放一个链接单元,今天突然想起这点,修改了搜索结果页面的广告。?

填写个人信息,赶快回复吧!