为用于 Internet Explorer 的 Google 工具栏 4 自定义按钮制作指南

目录

简介

什么是自定义按钮？

自定义按钮是您可以添加到 Google 工具栏并具有自定义导航、搜索、发送和更新等功能的按钮。值得一提的是，自定义搜索按钮可使用大多数网站的搜索引擎，而不仅限于 Google 搜索引擎。

单击后，搜索按钮可执行下列任务：

• 将浏览器导航到某个网站，就像书签一样
• 将浏览器导航到某个网站并运行该网站的搜索引擎，搜索用户键入到工具栏搜索框中的文字。例如，维基百科按钮会让浏览器转到 wikipedia.org 并搜索您输入的字词。（根据工具栏的区域，还可以转到许多特定区域网站。）
• 将目前选定的浏览器文字发送到某一服务，如撰写新的电子邮件、博客条目或文字讯息。
• 更新按钮的图标、工具提示和图标下拉列表以及 RSS 联合供稿的字符串。

自定义按钮可具有下列用户界面特性：

• 图标，代表它所访问的网站或它所执行的动作 (<icon>)。此图标可以通过 RSS 联合供稿更新 (<feed>)
• 图标下拉列表和字符串（通过向下箭头按钮访问），可通过 RSS 联合供稿更新，如新闻联合供稿的标题 (<feed>)
• 工具提示解释，指针悬停在按钮上即会显示 (<description>)
• 标题，可选是否在按钮旁边显示 (<title>)

除上述用户界面属性，自定义按钮还兼具下列属性（保存在 XML 文件中），可执行上述任务：

• 网址，单击时如果搜索框中无内容，可让浏览器转到网址 (<site>)
• 搜索网址，单击时如果搜索框中有搜索字词，则指向浏览器将浏览和搜索的网站 (<search>)
• 发送网址，指向浏览器将要浏览的网站，并将目前选定的文字发送到该网站 (<send>)
• 更新网址，可访问按钮更新 (<update>)

下列工具栏显示 Slashdot、维基百科和 BBC（突出显示）的自定义按钮示例。BBC 按钮是一个带标题下拉列表（由向下箭头标示）的新闻联合供稿。

添加自定义按钮

要将自定义按钮添加到 Google 工具栏或在工具栏中管理自定义按钮，请执行下列操作：

• 用户添加（安装）自定义按钮的最简单、也最常用的方法为直接单击发布商网站中的按钮并确认您要添加该按钮。这类按钮的列表可在 Google 工具栏按钮库中找到。发布商使用特殊的命令网址提示用户提供许可。如果用户尚未安装 Google 工具栏，则命令网址转到工具栏下载页面。
• 第二种方法为自动创建并添加自定义搜索按钮，用户可在其中右击搜索文字输入框。
• 第三种方式为通过“设置”>“选项”>“自定义按钮（标签）”>“修改”>“使用高级编辑器”，使用 Google 工具栏的高级编辑器修改自定义按钮。
• 第四种方式为手动创建并安装自定义按钮。
• 第五种方式适用于 IT 管理员在 Windows 机器上发布自定义按钮，具体操作为在网址中使用带 XML 文件的群组策略字符串，或将安装程序打包为文件，写入到 Windows 文件系统“All Users”的应用程序数据部分。

如何制作自定义按钮

自动创建并添加自定义搜索按钮

1. 打开 Internet Explorer 并转到您想要创建搜索按钮的网页。
   示例：www.wikipedia.org

2. 在您想要使用的页面上右击搜索框，选择“建立自定义搜索...”，然后单击“添加”。

结果：安装自定义按钮并可立即使用。

在幕后，此步骤会使用图标创建自定义按钮的 XML 文件，并采用随意的名称将其保存在：

C:\Documents and Settings\larry\Local Settings\Application Data\Google\Custom Buttons\

与手动建构自定义搜索按钮相比，此方法的优势在于，对于使用复杂 POST 请求或在其网站上使用重定向而致使难以确定 url-template 的网址非常实用。

自定义按钮的 XML 文件

自定义按钮的属性和行为在 XML 文件中使用<custombuttons> 元素定义，该元素的名称空间设定为含嵌套 <button> 元素的 http://toolbar.google.com/custombuttons/。最简单的自定义按钮使用 <site>，定义指向网站的链接。下列 XML 产生的按钮可在单击后于当前浏览器窗口中打开 http://www.wikipedia.org：

<?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">

  <button>
    <site>http://www.wikipedia.org</site>
  </button>
</custombuttons>

注意 – 可以在 XML 文件中网址字符串的任何位置添加新行和空格，转译文件时，工具栏会提取其核心内容。这表示您需要确保网址是否需要空格（您不想提取），以便可以使用“%20”替换（如果浏览器尚未替您执行此操作）。下面的很多示例显示分两行键入网址，中间插入了新行，而没有出现任何问题。

注意 - 在本指南的所有示例中，只有 <button> 元素中的部分 XML 代码有所更改。

手动创建并安装自定义按钮

要在 Google 工具栏上安装自定义按钮，请执行下列操作：

1. 如前述部分所示，创建按钮的 XML 文件。
2. 将按钮的 XML 文件保存在：

   C:\Documents and Settings\username\Local Settings\Application Data\Google\Custom Buttons\filename.xml

   其中 username 为您的 Windows 登录名，filename 为指定给 XML 文件的文件名。

   在我们的 Wikipedia 示例中，登录名为“larry”，按钮的 XML 文件保存在：

   C:\Documents and Settings\larry\Local Settings\Application Data\Google\Custom Buttons\wikipedia.xml

3. 然后打开新已安装 Google 工具栏 4.0 的 Internet Explorer 窗口。将显示含问号图片的新按钮，如下列截图所示；单击问号图标可转到 Wikipedia。

   

添加按钮标题和工具提示

如下所示，使用 <title> 添加按钮标题。标题可以显示在按钮的右侧（“设置”>“选项”>“更多”>“按钮文字标签”>“所有文字”），并在自定义按钮列表中标示按钮（“设置”>“选项”>“自定义按钮”）。如果按钮要执行搜索，标题应当在所有搜索自定义按钮标题中具有唯一性，并且其功能应对应于 Google 工具栏搜索框中该按钮的名称。（例如，用户可以使用 Alt-G 转到搜索框，按下向下箭头可展开搜索引擎菜单，然后在文字框中键入“W”选择维基百科搜索引擎。）

使用 <description> 添加工具提示。

<?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
  <button>
    <site>http://www.wikipedia.org</site>

    <title>Wikipedia</title>
    <description>The Free Encyclopedia</description>
  </button>
</custombuttons>

自定义搜索按钮

使用 Google 工具栏还可创建使用大多数网站搜索引擎的按钮，在该网站上搜索用户键入工具栏搜索框中的字词。以下两个示例显示使用维基百科搜索引擎搜索 wikipedia.org 的按钮，以及另一个使用 Google 搜索引擎搜索互联网的按钮。

为此，请采用 <search> url-template </search> 格式将搜索元素添加到按钮的 XML 文件中。包含使用 {query} 变量的搜索查询网址，如下例所示。GET 和 POST 查询都可使用（通过 method 属性指定），默认情况下将使用 GET。网址必须为 http: 或 https:，不允许使用 javascript:。网址模板中的三个字符必须是已换码字符：小于号 (<)、大于号 (>) 和“与”符号 (&)。

注意 - <search> 元素必须包含 {query} 变量，否则按钮将无法显示。

执行维基百科搜索的自定义按钮

例如，要创建使用维基百科搜索引擎搜索 wikipedia.com 的自定义按钮，对任何字词，从最简单的维基百科查询开始，如“dog”（狗）：http://en.wikipedia.org/wiki/Special:Search?search=dog&fulltext=Search。 要搜索用户键入工具栏搜索框中的字词，请使用“{query}”和已换码的“与”符号 (&) 替换“dog”（狗），如下所示：

<search>http://en.wikipedia.org/wiki/Special:Search?search={query}&amp;fulltext=Search</search>

将此搜索元素添加到上一个按钮，我们会得到：

<?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
  <button>
    <site>http://www.wikipedia.org</site>

    <title>Wikipedia</title>
    <description>The Free Encyclopedia</description>
    <search>http://en.wikipedia.org/wiki/Special:Search?search={query}&amp;fulltext=Search</search>

  </button>
</custombuttons>

请注意网址中的“与”符号 (&) 已换码为“&”。在 XML 文件中，需要将字符串中的“与”(&)、“小于”(<) 和“大于” (>) 符号换码。

执行 Google 搜索的自定义按钮

要创建使用 Google 搜索引擎搜索互联网的自定义按钮，对任何字词，从最简单的 Google 查询开始，如“dog”（狗）：http://www.google.com/search?q=dog。 然后使用“{query}”替换“dog”（狗），如下所示：

<search>http://www.google.com/search?q={query}</search>

下面是一个示例：

Slashdot 搜索

<search>http://slashdot.org/search.pl?query={query}</search>

将搜索动作作为 POST 发送

要将搜索动作作为 POST 而不是 GET 发送，请在搜索元素中包含 method="post" 属性。最后一个问号 (?) 之后的所有内容将以 www 网址编码的贴子数据格式发送。网站也可以使用表单编码的数据而不是网址编码的数据，因为我们目前不支持网址编码的数据。另外，也可以同时发送 CGI 参数和贴子数据；为此，请使用两个问号 (?)。

Onion 搜索

此示例使用张贴方法发送贴子数据（突出显示）：

<search method="post">http://www.theonion.com/content/search/node
        ?edit%5Bkeys%5D={query}</search>

更新自定义按钮

用来托管按钮 XML 文件所使用的下载网址是更新按钮的唯一 ID。如果尝试第二次从同一网址下载按钮，工具栏仅会提供旧按钮的替换产品，而不会添加新按钮。

在添加按钮的五种方式中，第一种和最后一种可自动获知按钮更新的来源，并且忽略所有写入 XML 文件的 <update> 值。对于中间的三种，您可以在 XML 文件中指定 <update> 元素来指定按钮的更新来源。

<update>http://buttons.com/updated_button.xml</update>

按钮选项

借助用户可轻松在工具栏设置对话框中更改的 <option> 标记，按钮可指定本地定义的选项字符串。这非常实用，例如，在使用天气按钮来指定邮政编码，或用股票按钮来指定股票代码的情况下。例如：

<?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
  <button>
    <title>Weather</title>
    <option>

      <title>Zip code</title>
      <description>Enter a US zip code.  For example, 94043 is Mountain View, CA</description>
      <default>94043</default>
    </option>

    <site>http://www.google.com/search?q=weather+{option1}</site>
  </button>
</custombuttons>

需要提供选项标题。不需要提供默认值和说明。使用任何网址模板规范内的变量 {option1} 插入用户文字。

这一次没有输入确认或空白区域裁剪，并且 {option1} 变量将会对用户使用 utf-8 编码键入的所有内容换码和 cgi 参数换码，就好像提交表单时文字修改框所作的那样。

包含当前网址

除了发送搜索查询，您还可以指定浏览器以三种不同的方式显示当前网址：带编码的 {url}、不带编码的 {url.noescape} 或仅含网站的{url.host}。

此示例使用 {url.noescape} 将当前网址发送到 archive.org 以便查找当前页面的较旧版本 - archive.org 要求使用未换码的网址：

<site>http://web.archive.org/web/*/{url.noescape}*</site>

下列示例执行的工作与 archive.org 搜索相同，但使用 {url}：

<site method="post">http://www.archive.org/searchresults.php?search={url}&amp;mediatype=mediatype&amp;Submit=Submit</site>

如果您希望在当前网站内使用 Google 搜索引擎，请使用 {url.host} - 这是一个功能强大的快捷键，不可能从 Google 网站获取。

<search>http://www.google.com/search?q=site:{url.host}+{query}</search>

包含 Google 域后缀

Google 工具栏具有获取域的 {domain} 变量，如 com 或 co.uk。 搜索域可以在 Google 工具栏的“设置”>“选项”>“搜索标签”>“使用 Google 站点”中找到，为后跟“google.”字词的字符串。

应当使用变量 {domain} 而不是硬编码的域字符串。因此，Google 搜索应当实际写入为：

<search>http://www.google.{domain}/search?q={query}</search>

发送用户选中的文字

您也可以允许自定义按钮将用户在网页上选中的一小段纯文本发送出去。这对翻译服务很实用，或许对发送博客或消息传递也有用。选中文字后，自定义按钮图标上将出现小文字图标。

此操作需要 <send> 元素。<send> 操作的网址目标可与 <search> 的目标不同。<send> 标记应当包含变量 {selection}，用来解析浏览器中当前选中的纯文本：

<send>http://www.google.com/search?hl=en&amp;lr=&amp;q=define%3A+{selection}</send>

选中文字后，在浏览器中右击鼠标按钮，显示的上下文菜单中也将包含执行发送操作的自定义按钮。

测试变量是否存在

随着工具栏的升级，可能执行更多的网址变量。为了对这些新变量提供向上和向下兼容性，所有自定义按钮的意识解析工具均可使用 {a?b:c} 语法，其意义如下：

{param_to_be_tested?use this text if the param is implemented:use this text if not}

简言之，它允许高级自定义按钮的创建者安全地使用新功能，并允许对不知道新功能的旧解析工具实现向下兼容。例如，假设 {locale} 变量是新引入的变量。可以使用与此类似的网址模板来确保其不致对旧版工具栏产生影响：

<site>http://google.com/{locale??hl={locale}}</site>

如果工具栏支持 {locale} 变量，则应当扩展为：

<site>http://google.com/?hl=en</site>

如果不支持，则为：

<site>http://google.com/</site>

只要嵌套发生在问号 (?) 之后，则最深的 {a?b:c} 嵌套表达式可达 10 层。完全没问题：

<site>http://google.com/{locale??hl={domain?{domain}:{query}}}</site>

还应注意的是，如果解析工具无法识别换码，将使用空字符串替换。因此“Hell{blah}o World”将解析为“Hello World”。并且，如果出现大括号“{”或“}”数目不匹配，或任何其他解析问题，整个网址将会重设为空字符串。

如何制作外形美观的图标

大多数可用作 Favicons 的图标也可以用作自定义按钮的图标，包括 16x16 的 BMP、ICO、GIF 和 JPEG 图片。只需将其编码为使用 base64 编码的 ASCII 文本。互联网上有数个网站可为您执行此操作，如这一个。在该网站上，使用“Browse...”（浏览）按钮选择您要编码的文件，然后单击“Convert the source data”（转换源数据）按钮开始编码。Javascript 和 PHP 也有一个命令行可执行 base64 编码。

以下为 base64 编码的 Gmail 图标，使用了 <icon> 元素：

    <icon mode="base64" type="image/x-icon">
AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAQAQAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4ONr/ODja/6en+f+np/n/p6f5/6en+f+np/n/p6f5
/6en+f+np/n/p6f5/6en+f+np/n/p6f5/zg42v84ONr/ODja/zg42v/i4v//////////////////
/////////////////////////////////////+Li//84ONr/ODja/zg42v84ONr/p6f5/+Li////
/////////////////////////////////////////+Li//+np/n/ODja/zg42v84ONr/ODja/+Li
//+np/n/4uL/////////////gYHy/4GB8v///////////+Li//+np/n/4uL//zg42v84ONr/ODja
/zg42v//////4uL//6en+f+2tv//gYHy/1pa6f9aWun/gYHy/7a2//+np/n/4uL///////84ONr/
ODja/zg42v84ONr///////////+2tv//gYHy/1pa6f84ONr/ODja/1pa6f+BgfL/trb/////////
////ODja/zg42v84ONr/ODja////////////gYHy/1pa6f84ONr/trb//7a2//84ONr/Wlrp/4GB
8v///////////zg42v84ONr/ODja/zg42v//////gYHy/1pa6f84ONr/trb/////////////trb/
/zg42v9aWun/gYHy//////84ONr/ODja/zg42v84ONr/gYHy/1pa6f84ONr/trb/////////////
//////////+2tv//ODja/1pa6f+BgfL/ODja/zg42v84ONr/ODja/zg42v84ONr/trb/////////
/////////////////////////7a2//84ONr/ODja/zg42v84ONr/ODja/zg42v84ONr/gYHy/6en
+f+np/n/p6f5/6en+f+np/n/p6f5/6en+f+np/n/gYHy/zg42v84ONr/ODja/wAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAA//8AAP//AAD//wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAD//wAA//8AAA==
    </icon>

自定义按钮图标可以大于 16x16，但工具栏会将它们缩小为 16x16，因此，除不必过大之外，图标看起来就像是使用高质量的图片编辑器缩放过一样。

外观最佳的图标是使用 24 位颜色 (RGB) 和 8 位 Alpha、并保存为 XP 样式的 RGBA 图标的图片。您可以将图标保存为具有 Alpha 透明度的 16x16 PNG，然后将其转换为 XP 样式的 16x16 图标（使用 IconWorkshop 之类的程序），然后再转换为 base64 编码的格式。由于 Windows 本身并不支持 PNG 文件（需要链接大量的其他东西），因此并不直接支持 PNG 文件。

需要使用 Alpha 通道的原因是并不是所有人的工具栏背景颜色都使用相同的灰色、银色或您设置的颜色。Windows XP 允许用户自定义颜色方案，包括工具栏背景色。您可以使用无任何透明部分的正方形图标来避免此问题，但是这种图标看起来不那么有趣。单色 Alpha 通道，如 GIF 图片，与正常 Alpha 混色的图标相比（如 Google 工具栏或 Internet Explorer 本身），图片外沿可能出现颗粒。

自动更新图标和工具提示

关于自定义按钮最有趣的事情之一就是可以在指定的时间间隔从远程服务器上更新按钮图片和工具栏提示。它使用 RSS 联合供稿执行更新。这可以将按钮用作通知工具，或用作状态图标（例如，天气或您能想到的任何内容）。按钮也可以有下拉菜单，其中包含带文字或图标的单个项目。每个菜单项可以有自己的单击后启动的动态网址。有关此功能的示例将在下一节提供。

添加 RSS 联合供稿

RSS 联合供稿使用 <feed> 元素。以下是 CNN 新闻联合供稿的示例：

<feed refresh-interval="1800">http://rss.cnn.com/rss/cnn_topstories.rss</feed>

获取这些更新联合供稿的协议为 Atom 1.0、Atom 0.3、RSS 2.0 或 RSS 1.0。标准联合供稿通常都会正常运行。

使用联合供稿更新按钮图标/工具提示

要通过联合供稿更新工具栏上的图标或工具提示说明，您需要将特定工具栏扩展件添加到使用名称空间的 RSS 或 ATOM。下面是从联合供稿中提取的心情圈圈按钮的示例：

<?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
  <button>
    <title>Mood ring</title>
    <description>Your virtual mood ring</description>

    <site>http://www.google.com/search?q=mood+ring</site>
    <feed menu="false" refresh-interval="900">
          http://www.example.com/custombuttons/samples/feeds/mood</feed>
  </button>
</custombuttons>

注意，它指定 menu="false" 表示此联合供稿仅用于更新图标和工具提示，而不能填充子项目的下拉菜单。

如果在实际的服务器上安装了它，联合供稿输出则如下所示：

<?xml version='1.0'?>
<feed xmlns='http://www.w3.org/2005/Atom' 
    xmlns:gtb='http://toolbar.google.com/custombuttons/'>
<id>http://www.example.com/custombuttons/samples/feeds/mood</id>

<title>Mood</title>
<link href='http://www.google.com/search?q=+ring' />
<link rel='self' 
    href='http://www.example.com/custombuttons/samples/feeds/mood' />
<gtb:description>Bluegreen:
Inner emotions charged, somewhat relaxed</gtb:description>
<gtb:icon mode="base64" type="image/x-icon">
AAAAAAMAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAwAAAAMAA
AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAQAQAAAAAAAAAAAAAAAAA
AAAAAAAAAAAGAAAAHAAAAEAAAABhAAAAcwAAAHQAAABpAAAAVQAAAD4AAAApAAAAGAAAAAoAAAAD
AAAAAQAAAAAAAAAAAAAAESZIXl4zdJvAXbHS8m3C3f9LnrrLFUtsmwILEX4AAABzAAAAYQAAAEcA
AAAqAAAAEwAAAAcAAAACAAAAACs9RTNOjrDtW6nS/53u/f+n/P//hej//2bP/P9Fq93wHGaNrxEv
O4kAAAB6AAAAXwAAADwAAAAfAAAADAAAAANihaWST6XK/0h/kcAdKCyWKTtAgVJ/kIhytNKse873
9E+w6v9RuN39SXuJpgQHCIoAAAB2AAAAUQAAACsAAAAPb6nU7mK65v9jqs76KkNPqAUICJoAAACE
AAAAaxUgJWBkrMiwsvv+//D+/v+y1NniIj1FnAAAAIgAAABcAAAALHS74PV1zPn/c835/1Oezv9N
iq7vNVRjrxUiJ5kBAgORAQICh3uLjZz3+vr1+f///4PL5/wvVmusAAAAigAAAFNyu+TPdtL8/0Cp
7v8ng8X/CFOH/ytpjv86gJ//R46z+Th6jsovVmCsd56pxNf2/f9TuPH/W7fs/ypGV6UAAAByf77Y
r02y7P9Zwfb/puH3/y+AtP8jZ5f/KWKH/0p7hP+ZrVr/zcUt/9vMKf/bzSz/tsBP/3OzrP9kl7Pp
AAAAgHGdpThatuT/0fn+//b///+V0uv/NICu/4mvfP/czjL/3M0v/9rMKP/dzzT/3c83/9vNLf/b
zS//nrWA/gAAAIMAMzMFbrrd2d/+///5////t+n6/4q6nf/czzX/3tA+/97QPf/czjP/3dA7/97R
Qv/czjD/3M4z/9DHLPoAAAB/AAAAAWShtUix5+//5v7+/5Hf7//Bvjn/3M0v/9/SSP/g1FL/39RR
/+DVWv/e0kf/3tFA/9zNL//bzCj/AAAAbwAAAAAAAAADcq7Fmpzo8f9rsL3/2ssl/93POf/f0kj/
49pu/+ffhP/q45b/49pp/97SSv/czS//yb0q4wAAAE8AAAAAAAAAAF54hhNrq77BXpCj/7+7Of/c
zjH/3tFH/+bdeP/w7cv/9PLa/+zlnf/g1VP/1so5/mBfJHsAAAArAAAAAAAAAAAAAAABa5GgIHWs
t/dymG3/3tE//9/UUv/o4Ij/9PHT//v67P/v6a3/08xY/3uMX6UAAAAuAAAAEAAAAAAAAAAAAAAA
AAAAAAKSvb9YSoWa+WyagP+wv2X/4NRO/+ngfv/m4Zf/rLeB+lpubIkAAAAlAAAADgAAAAMAAAAA
AAAAAAAAAAAAAAAAAAAAAoqvuDxkkp2gYo+c51mHkv9lk5v/Y4eNtlBfaEgAAAAWAAAACQAAAAIA
AAAAAAMAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAwAAAAMAA
AADgAAAA8AEAAA==
</gtb:icon>

</feed>

以上示例是 Atom 1.0 联合供稿，包含的 Google 自定义按钮名称空间指定为：

xmlns:gtb='http://toolbar.google.com/custombuttons/'

要覆盖随按钮出现的工具提示，请指定：

<gtb:description> new-description </gtb:description>

要覆盖随按钮出现的图标，请指定：

<gtb:icon> icon-base64-code </gtb:icon>

控制这种复杂的“心情”分析系统的 PHP 脚本如下所示：

<?php

header('Content-type: text/xml');

switch(rand(1, 7)) {
  case 1:
    $icon = "amber.ico";
    $desc = "Amber:\nNervous, on edge, uncertain";
    break;

  case 2:
    $icon = "black.ico";
    $desc = "Black:\nTense, stressed, working too hard";
    break;

  case 3:
    $icon = "blue.ico";
    $desc = "Blue:\nComfortable, breeze, at rest, loveable";
    break;

  case 4:
    $icon = "bluegreen.ico";
    $desc = "Bluegreen:\nHeightened inner emotional state, moderately relaxed";
    break;

  case 5:
    $icon = "gray.ico";
    $desc = "Gray:\nAnxious, ill at ease, strained";
    break;

  case 6:
    $icon = "green.ico";
    $desc = "Green:\nSteady, stable, no emotional turmoil";
    brea;

  case 7:
    $icon = "purple.ico";
    $desc = "Dark Blue:\nImpassioned, delighted, whiff of romance";
    break;
}

$icon = base64_encode(file_get_contents($icon));

echo "<?xml version='1.0'?>";
echo "\n<feed xmlns='http://www.w3.org/2005/Atom' xmlns:gtb='http://toolbar.google.com/custombuttons/'>";
echo "\n<id>http://www.example.com/custombuttons/samples/feeds/mood</id>";
echo "\n<title>Mood</title>";
echo "\n<link href='http://www.google.com/search?q=$mood+ring' />";
echo "\n<link rel='self' href='http://www.example.com/custombuttons/samples/feeds/mood' />";
echo "\n<gtb:description>$desc</gtb:description>";
echo "\n<gtb:icon mode='base64' type='image/x-icon'>$icon</gtb:icon>";
echo "\n</feed>";

?>

图标应该和脚本位于同一文件夹中。

使用联合供稿更新按钮和下拉菜单图标

您还可以将自定义服务器图标添加到联合供稿下拉菜单上的单个项目上。下面是天气按钮示例，它具有包含下拉菜单（默认值）的联合供稿，但是还可以指定 refresh-menuitem="false" 隐藏随时连接到服务器的刷新菜单项目。这样可以提供更加简洁的外观。

<?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
  <button>
    <title>Weather 94043</title>
    <description>Weather updates for Mountain View, CA</description>

    <site>http://www.google.com/search?q=weather+94043&num=1</site>
    <feed refresh-interval="3600" refresh-menuitem="false">
        http://www.example.com/custombuttons/samples/feeds/weather?zip=94043</feed>
  </button>

</custombuttons>

下面是天气联合供稿外观的示例，在下拉菜单中各个菜单项目旁边都有自定义图标（为简洁起见，大多数图标已经删除 base64 编码的资料）。基于以上示例，它可见于：http://www.example.com/custombuttons/samples/feeds/weather/?zip=94043

<?xml version='1.0'?>
<feed xmlns='http://www.w3.org/2005/Atom' 
    xmlns:gtb='http://toolbar.google.com/custombuttons/'>
<id>http://www.example.com/custombuttons/samples/feeds/weather</id>

<title>Weather Mountain View, CA</title>
<link href='http://www.google.com/search?q=weather+94043/' />
<link rel='self'
    href='http://www.example.com/custombuttons/samples/feeds/weather' />
<gtb:description>Mountain View, CA
63F Mostly Cloudy
Humidity: 48%
Wind: NW at 8 mph</gtb:description>
<gtb:icon mode='base64' type='image/x-icon'>
R0lGODlhKAAoANUAAEuc/Pz8/Fik/Ii00k9daZGPivLy8tbW1k2R0uvr6wZj3HSq0f/QMMfHx7a2
tj2F0fu0EePj4yx81neUp4J/eKanphJq3IJtOGB3iI3C5BFt5B5XnWis7H2346jO5/6+IWKo8923
... and so on...
</gtb:icon>

<entry>
<title>Today: Mostly Cloudy 65 | 50</title>

<link href='http://www.google.com/search?q=weather+94043/' />
<id>http://www.example.com/custombuttons/samples/feeds/weather/0</id>
<gtb:icon mode='base64' type='image/x-icon'>
R0lGODlhKAAoANUAAEuc/Pz8/Fik/Ii00k9daZGPivLy8tbW1k2R0uvr6wZj3HSq0f/QMMfHx7a2
tj2F0fu0EePj4yx81neUp4J/eKanphJq3IJtOGB3iI3C5BFt5B5XnWis7H2346jO5/6+IWKo8923
... and so on...
</entry>

<entry>
<title>Thu:  66 | 51</title>
<link href='http://www.google.com/search?q=weather+94043/' />
<id>http://www.example.com/custombuttons/samples/feeds/weather/1</id>
<gtb:icon mode='base64' type='image/x-icon'>
R0lGODlhKAAoAPcAAAAAAP///4WOwPT1+tDT3unr8sHG1ff5/6Wy0mZ8rGqAr3mJrJakxa+zvHSK
tcDBw1R2slBql110njBXjztmqS9OfjtekTZWhGeJuoqctklLTgJYyQJQtQ9hzhRr3BZlzBVRoS1S
... and so on...
</gtb:icon>

</entry>

<entry>
<title>Fri:  67 | 51</title>
<link href='http://www.google.com/search?q=weather+94043/' />
<id>http://www.example.com/custombuttons/samples/feeds/weather/2</id>
<gtb:icon mode='base64' type='image/x-icon'>

R0lGODlhKAAoANUAAObm52ms7k2Q0Uuc/Fmk+v2zDoS01HOp0avP5tvb26CPXQZj3DqG14yLh05Y
Yf/IKv/VN3mCiMPDw6SkpCt82GhxePz8/JG+2pd5NRZu3hBq3fb29rCAFrm5uSN549OWE4WltqHI
... and so on...
</gtb:icon>
</entry>
<entry>
<title>Sat:  67 | 50</title>
<link href='http://www.google.com/search?q=weather+94043/' />

<id>http://www.example.com/custombuttons/samples/feeds/weather/3</id>

<gtb:icon mode='base64' type='image/x-icon'>
R0lGODlhKAAoANUAAObm52ms7k2Q0Uuc/Fmk+v2zDoS01HOp0avP5tvb26CPXQZj3DqG14yLh05Y
Yf/IKv/VN3mCiMPDw6SkpCt82GhxePz8/JG+2pd5NRZu3hBq3fb29rCAFrm5uSN549OWE4WltqHI
... and so on...
</gtb:icon>
</entry>
</feed>

为此，PHP 代码使用天气预报回复格式。

<?php

// Script to convert Google xml weather interface to custom buttons AtomFeed 1.0
// Sample input at http://www.google.com/ig/api?weather=94043
// To see sample output, run this script with ?zip=94043

$zip = $_GET['zip'];

header('Content-type: text/xml');

// http://www.google.com/ig/api?weather=94043
$dom= domxml_open_file("http://www.google.com/ig/api?weather=$zip");

$xpath = xpath_new_context($dom);
// $params = $dom->documentElement->firstChild->getElementsByTagName('param');

$temp = $xpath->xpath_eval('//city/@data');
$city = $temp->nodeset[0]->value;

$icons = $xpath->xpath_eval('//current_conditions/icon/@data');
$icon_url = $icons->nodeset[0]->value;
$icon = base64_encode(file_get_contents("http://www.google.com$icon_url"));

$conditions = $xpath->xpath_eval('//current_conditions/condition/@data');
$condition = $conditions->nodeset[0]->value;

$temp = $xpath->xpath_eval('//current_conditions/temp_f/@data');
$tempf = $temp->nodeset[0]->value;

$temp = $xpath->xpath_eval('//current_conditions/humidity/@data');
$humidity = $temp->nodeset[0]->value;

$temp = $xpath->xpath_eval('//current_conditions/wind_condition/@data');
$wind = $temp->nodeset[0]->value;

echo "<?xml version='1.0'?>";
echo "\n<feed xmlns='http://www.w3.org/2005/Atom' ";
echo     "xmlns:gtb='http://toolbar.google.com/custombuttons/'>";
echo "\n<id>http://www.example.com/custombuttons/samples/feeds/weather</id>";
echo "\n<title>Weather $city</title>";
echo "\n<link href='http://www.google.com/search?q=weather+$zip/' />";
echo "\n<link rel='self' href='http://www.example.com/custombuttons/";
echo     "samples/feeds/weather' />";
echo "\n<gtb:description>$city\n$tempfF $condition\n$humidity\n$wind";
echo   "</gtb:description>";
echo "\n<gtb:icon mode='base64' type='image/x-icon'>$icon</gtb:icon>";

$days = $xpath->xpath_eval('//forecast_conditions/day_of_week/@data');
$conditions = $xpath->xpath_eval('//forecast_conditions/condition/@data');
$icons = $xpath->xpath_eval('//forecast_conditions/icon/@data');
$highs = $xpath->xpath_eval('//forecast_conditions/high/@data');
$lows = $xpath->xpath_eval('//forecast_conditions/low/@data');

for ($i = 0; $i < count($conditions->nodeset); $i++) {
  $day_of_week = $days->nodeset[$i]->value;
  $condition = $conditions->nodeset[$i]->value;
  $high = $highs->nodeset[$i]->value;
  $low = $lows->nodeset[$i]->value;
  echo "\n<entry>";
  echo "\n<title>$day_of_week: $condition $high | $low</title>";
  echo "\n<link href='http://www.google.com/search?q=weather+$zip/' />";
  echo "\n<id>http://www.example.com/custombuttons/samples/feeds/weather/$i</id>";
  $icon_url = $icons->nodeset[$i]->value;
  $icon = base64_encode(file_get_contents("http://www.google.com$icon_url"));
  echo "\n<gtb:icon mode='base64' type='image/x-icon'>$icon</gtb:icon>";
  echo "\n</entry>";
}

echo "\n</feed>";

?>

您还可以使用相同的 http://toolbar.google.com/custombuttons/ 名称空间和说明或者 RSS 1.0、RSS 2.0、Atom 1.0 及 Atom 0.3 联合供稿中的图标标记用于工具栏联合供稿。

多语言

自定义按钮可以处理替代网址、图标和针对特定工具栏本地版的文字。下面是完成此项内容的两种方法，我们建议您使用第一种方法。

使用本地版属性

建议的方法是创建 XML 标记列表，每个标记均使用带有 iso-name 编码的 locale="iso-name" 属性便于本地版使用。下面是包含替代的法语和西班牙语网址和说明的按钮示例：

<?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">
  <button>
    <title>Wikipedia</title>
    <site>http://www.wikipedia.org</site>

    <site locale="fr">http://fr.wikipedia.org</site>
    <site locale="es">http://es.wikipedia.org</site>
    <description>The Free Encyclopedia</description>

    <description locale="fr">L'encyclopdie libre</description>
    <description locale="es">La enciclopedia libre</description>
  </button>
</custombuttons>

如果在当前的工具栏语言的本地版中直接找不到 XML 标记，以上列表中的第一个标记会作为默认值使用。

使用 {locale} 变量

替代方法是使用嵌入在网址中的 {locale} 变量，例如 http://{locale}/wikipedia.org。如果一组本地版正好与不同的可用网站（与 Google.com 相关的网站）对应，这就是一个好方法。不过，对于大多数用户而言，情况并非如此。网站可能存在 Google 工具栏尚不能支持的特定的当地语言版。例如，本文中的维基百科有波兰语版本 (http://pl.wikipedia.org)，但是波兰语版不是当地的工具栏本地版，所以波兰用户将无法访问该网站。相反，工具栏有巴西葡萄牙语本地版，但是维基百科没有此特定语言版本的网站。另外，如果适用的话，您可以混合使用带有 locale 属性的陈述句和带有{locale} 变量的陈述句，在此情况下，先出现的属性仍将是默认值。

ISO 本地版表格

目前已支持的工具栏本地版有：

ISO 本地语言	语言
en	英语
da	丹麦语
de	德语
es	西班牙语
fi	芬兰语
fr	法语
it	意大利语
ja	日语
ko	韩语
nl	荷兰语
no	挪威语
pt-BR	巴西葡萄牙语
ru	俄语
sv	瑞典语
zh-CN	中文简体
zh-TW	中文繁体

托管自定义按钮

在何处托管按钮

您使用哪个下载网址来托管按钮的 XML 文件相当重要，因为该网址将成为更新按钮时使用的唯一 ID。如果再次尝试从相同的网址下载按钮，工具栏将仅更换原来的按钮而不添加新按钮。有关更多信息，请参阅更新自定义按钮。

将您的按钮添加到 Google 的按钮库中

将您的按钮添加到 Google 的按钮库是让整个世界了解您的新按钮的好方法。您的 XML 文件应该已在某处托管（按钮库将直接链接到该文件），并且按钮应符合我们的编辑指南。

如果为自己拥有的网站创建按钮，您应该在和您网站相同的域上托管 XML 文件。如果在与访问按钮相同的域上托管按钮，Google 按钮库中的按钮会标记为“正式”。这样用户可以轻松地找到针对您网站的正式按钮。

一旦您完成所有操作，填写按钮库提交表单，就可以让 Google 了解您的按钮。

从网站链接到按钮

您可以通过创建安装链接使您的按钮可以在自己的网站上使用。当 Google Toolbar 4 用户点击此链接时，系统就会提示他们安装您的按钮。如果用户没有工具栏的兼容版本，此链接则会指向 Google 工具栏下载页。

开发人员可通过使用以下网址语法创建安装链接：

http://toolbar.google.com/buttons/add?url=url

网址指向自定义按钮 XML 文件的位置。例如，这里是安装 Slashdot.com 按钮的链接：

<a href="http://toolbar.google.com/buttons/add?url=http://www.slashdot.org/slashdot_button.xml">Add</a>

此链接的标签是“添加”。当用户点击此链接时，Slashdot.com 按钮将安装在其 Google 工具栏中。

上面的 Google 网址通常是一个触发网址，用于工具栏安装任何自定义按钮。如果用户没有工具栏的兼容版本，系统就不会提示他们安装。一旦工具栏已安装，自定义按钮将自动添加。

管理您的联合供稿点击量

有联合供稿的网站点击量是人们关心的问题。如果您有理由相信按钮会流行并且有很大的点击量，请不要将按钮的联合供稿指向低速带宽服务器。服务器可能由于刷新请求而超载。

自定义按钮有自己针对联合供稿的刷新间隔属性。工具栏承认服务器在 HTTP 头中提供的“超时”时间。此设置可以覆盖按钮的刷新间隔。如果您的服务器已超载，就可以延长“超时”时间来减少加载量。例如，如果按钮已设置为每小时刷新一次，“超时”时间可设置为每天刷新，这样可以大大减少点击量（尽管可能限制按钮的刷新）。

以下是将 Expires 时间从一周设置为将来的示例 PHP 脚本：

<?php
$expires = gmdate("D, d M Y H:i:s", time() + 3600 * 24 * 7) . " GMT";
Header("Expires: " . $expires);
?>

来自服务器的 HTTP 响应示例：

HTTP/1.1 200 OK
Date: Thu, 05 Jan 2006 23:39:54 GMT
Server: Apache/2.0.47 (Red Hat Linux)
Accept-Ranges: bytes
X-Powered-By: PHP/4.3.2
Expires: Thu, 12 Jan 2006 23:39:54 GMT
Transfer-Encoding: chunked
Content-Type: text/html

参考

XML 参考

自定义按钮 XML 文件具有以下结构：

<?xml version="1.0" encoding="utf-8"?>
<custombuttons xmlns="http://toolbar.google.com/custombuttons/">

  <button>
    <!-- XML elements -->
  </button>
</custombuttons>

下面的 XML 元素可以在 <button> 元素内显示。只要各个元素已指定为不同的本地版，任何元素（除了 <update>）均可多次显示。

<title> 文字 </title>

用户可以在自定义按钮（“设置”>“选项”>“自定义按钮”）列表中或者在可选的按钮旁边看到的自定义搜索按钮的标题。由于它显示搜索类型时，还可以作为默认关键字使用，所以此值应该是唯一的。

此元素支持如下面的 <search> 所示的相同的 locale 属性。

请参阅 <title> 示例。

<description> 工具提示 </description>

自定义搜索的工具提示文字可以在用户将鼠标悬停于其上时看到。这也是用户从网站下载按钮后看到的说明。

此元素支持如下面 <search> 所示的相同的 locale 属性。

请参阅 <description> 示例。

<site> 网址 </site>

搜索框中没有新文字时导航到的可选网址。为安全起见，协议已限制为 http: 和 https:。此网址中的以下变量将扩展为：{domain}、{url}、{url.noescape}、{url.host} 和 {locale}。

<site> 元素支持如下面 <search> 所示的相同的 method 属性和 locale 属性。

请参阅 <site> 示例。

<search> 网址模板 </search>

当在搜索框中有“新”搜索字词时单击按钮，浏览器将导航并搜索的网址。（“新”代表搜索框已注意到。）网址必须为 http: 或 https:，不允许使用 javascript:。搜索模板中要求使用变量 {query}（不允许在其他网址模板中使用）。此元素为可选项，如果此按钮不应该在搜索按钮列表中，可以省略此元素。

搜索元素可以指定以下属性：

method="post"|"get"

默认为“get”。设置为“post”使用帖子，而不是在发送网址编码表单数据时获取。编码方法应该是 application/x-www-form-urlencoded。在执行搜索时，最后的问号“？”后面的所有文字将作为帖子数据发送。

locale="en"|"da"|"de"|"es"|"fi"|"fr"|"it"|"ja"|"ko"|"nl"|"no"|"pt-BR"|"ru"|"sv"|"zh-CN"|"zh-TW"

针对可以提供替代网址的元素指定本地版本包括 ISO 本地语言名称，例如 locale="fr"。通常您可以指定多个元素，每个都带有自己的本地语言属性和替代网址。（当属性用于其他 XML 元素时，可以指定不同的图标或文字。）请参阅本地示例和 ISO 本地语言表格。

请参阅 <search> 示例。

<send> 网址模板 </send>

搜索框中没有文字并且用户已在浏览器窗口中选择了文字时，浏览器导航到的可选网址文字。发送模板中要求使用变量 {selection}（不能在其他网址中使用）。

<send> 元素支持如上面 <search> 所示的相同的 method、charset 和 locale 属性。

请参阅 <send> 示例。

<icon> base64 编码 </icon>

Windows 格式 .ico 文件的实际位数、更适合 XP 样式 16x16 32 位 RGBA 图片，许多网站使用作为其 favicon.ico 文件。由于这是二进制值，所以应为 base64 编码。如果图标不存在，系统将选择默认值。16x16 XP 样式 alpha 混色 .ico 图片是首选格式，但是也支持将任意大小调整到 16x16 的 ICO、JPG、BMP 和 GIF 格式。XP RGBA 图标将在 Google 工具栏可工作的所有操作系统下工作，这样无需创建 256 真色彩或 16 色替代。不支持 PNG。

不需要 mode 和 type 属性，但会让在可解译它们的 XML 编辑器中进行编辑变得更轻松：

mode="base64"

图标编码。

type="image/x-icon"

图片类型。

此元素支持如上面 <search> 所示的相同的 locale 属性。

请参阅 <icon> 示例。

<feed> 网址 </feed>

指定网址为 RSS 2.0 或 Atom 联合供稿 0.3 /1.0 XML 文件。此元素新增此功能，可打开带有 RSS 联合供稿标题的下拉菜单、说明和链接、与 Firefox RSS 的书签功能类似，该功能可以自动更新（非用户初始化）。此元素为可选项，无法在大多数自定义搜索时使用。{domain} 和 {locale} 变量还可以在联合供稿中使用。

此元素具有以下属性：

menu="true"|"false"

将此项设置为假，隐藏联合供稿项目的下拉菜单。默认值为真。

refresh-interval="secs"

等待几秒钟后再重新载入联合供稿。默认值是 3600 秒（1 小时）。即使此值小于 60 秒，工具栏也将每分钟更新至少一次。

refresh-onclick="true"|"false"

将此值设置为真，可以在用户每次单击按钮时重新加载。默认值为假。

google-service="true"|"false"

如果是 Google 帐户服务，可以设置为真，这表示它仅在用户登录到 Google 时可用。在检测到登录时出现刷新并且登出清除菜单项目。

此元素支持如上面 <search> 所示的相同的 locale 属性。

请参阅 <feed> 示例。

<feed-icon> base64 编码 </feed-icon>

替代图标在联合供稿有新项目时显示（格式和 <icon> 相同）。当用户单击按钮时，图标将还原为正常图标直至下次联合供稿出现。联合供稿服务器可以在 Atom 联合供稿或 RSS 2.0 响应中直接指定图标，在这样的情况下 <feed-icon> 或 <icon> 将获得次级优先权。

此元素支持如上面 <search> 所示的相同的 locale 属性。

（不包含 <feed-icon> 示例，但是它和 <icon> 示例类似。）

<feed-description> 工具提示 </feed-description>

当联合供稿有新项目时工具提示中将显示替代的描述。当用户单击按钮时，描述将还原为正常的描述直至下次联合供稿出现。

此元素支持如上面 <search> 所示的相同的 locale 属性。

（不包含 <feed-description> 示例，但是它和 <description> 示例类似。）

<update> 网址 </update>

用户在链接上点击以更新时（“设置”>“选项”>“自定义按钮”>“选择按钮”>“编辑”>“下载最新版本”），此按钮定义下载的网址和更新按钮获得代替 XML 文件的网址。此网址将由实际的网址覆盖，同时下载的按钮从网站安装而并非来自 google.com。这是没有本地属性的自定义按钮中的唯一元素。

请参阅 <update> example。

<option> 子元素 </option>

本地指定已定义的选项字符串，用户可以在工具栏设置对话框中轻松进行更改。此值已在 {option1} 变量中传回。该元素可以有三个子元素，第一个要求有：

<title>

选项名称。用户可以在工具栏设置对话框中看到此名称。需要此子元素。

<description>

选项说明。用户可以查看此说明。每个选项均可有多个说明。此子元素为可选项。

<default>

标记 {option1} 的默认值。此值在用户没有输入任何值时使用。此子元素为可选项。

请参阅 <option> 示例。