Google 的小工具是能嵌入網頁中的 HTML 和 JavaScript 應用程式。 網頁和其他應用程式，包括協作平台網站。這些小工具可將外部和 例如小型應用程式和資料庫導向的清單 整合文字和圖片，提供流暢的使用者體驗。
每個協作平台網頁都是可能使用的小工具容器。除此之外 可能會一併使用的 Data API 建立功能強大的應用程式。也就是說，身為小工具開發人員 則可運用傳統版協作平台 API，為其他網路開發人員及其目標對像打造引人入勝的工具。 方便您自行使用
在 Google 協作平台上打造小工具後，就有數百萬個 使用者。只要將您的小工具提交給我們，使用者就會在此處輕鬆瀏覽、設定您的小工具，並將它新增至您的 網站：
現在，您已瞭解 {sites_name_short} 是最適合您的小工具發布平台了 等什麼？立即著手為協作平台建立小工具！
協作平台小工具總覽
一般而言，小工具是能夠產生或提取外部資訊的小型公用程式。 網頁。小工具最簡單的形式就是一個小型 .xml 檔案，可擷取 一次顯示在多個網頁中。在協作平台中，包括小工具搜尋結果 當作是外部資訊的管道之一。有些小工具 以及從其他網站傳遞資訊的 iframe。
較先進的小工具會收集動態內容，並提供給 。請參考小工具範例。
小工具由以下元件組成：
- 小工具規格檔案：包裝 HTML 和 JavaScript 函式的 .xml 檔案。
- 容器頁面：插入小工具的網頁 (在本例中為 Google 協作平台)。
- 外部資料來源 - 這是選用項目，可以和 .xml 檔案位於相同位置，但小工具規格通常可以透過 HTTP 來呼叫，藉此提供結果。
專為 Google 打造的小工具 網站的所有檢視者都可以使用協作平台。這類影片通常具有互動性，並著重於提取 設計與呈現 網站。
日曆小工具就是個絕佳範例。的個人化日曆小工具 預設可能會顯示登入使用者的日曆，而日曆小工具則是 ，代表協作者可從多種不同的地點日曆進行選取。
協作平台小工具 可讓您顯示來自外部來源的多項資訊 (例如 即時圖表，提供不同但相關成效資訊主頁 直接在協作平台發布的說明文字。這不僅能節省視覺資產， 同一個畫面顯示相同主題的不同資訊。您也可以使用小工具 原本可能會禁止網站安全性檢查的動態內容。
警告：使用舊版建構的小工具
小工具 API 可在「Google 協作平台」中運作，但系統未正式支援。內建和動態消息式小工具
也同樣不受支援因此，Google 建議您使用
小工具*。也能使用 Google Cloud CLI 或
Compute Engine API如需相關說明，請參閱這篇文章：
http://igoogledeveloper.blogspot.com/2009/09/more-things-change-more-they-stay-same.html
範例小工具
以下是簡易又受歡迎的「包含小工具」，其中只提供 iframe 來透過其他網頁內容傳遞內容：
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Include gadget (iframe)" title_url="http://sites.google.com/"
description="Include another web page in your Google Site"
thumbnail="https://www.gstatic.com/sites-gadgets/common/images/sites-icon-gadget-thumb.png"
screenshot="https://www.gstatic.com/sites-gadgets/common/images/sites-icon-gadget-ss.png"
height="800" width="600" author="Google">
<Require feature="dynamic-height"/>
</ModulePrefs>
<UserPref name="iframeURL" display_name="URL to content" required="true"/>
<UserPref name="scroll" display_name="Display scrollbar" default_value="auto" datatype="enum">
<EnumValue value="auto" display_value="Automatic"/>
<EnumValue value="no" display_value="No"/>
<EnumValue value="yes" display_value="Yes"/>
</UserPref>
<Content type="html" view="default,canvas">
<div id='dest'><img src="http://www.google.com/ig/images/spinner.gif"></div>
<script type="text/javascript">
gadgets.util.registerOnLoadHandler(doRender);
function doRender(){
// setup variables
var prefs = new gadgets.Prefs();
var iframeURL = prefs.getString('iframeURL');
var scroll = prefs.getString('scroll');
var height = 800;
var width = 600;
if (gadgets.window) {
var viewport = gadgets.window.getViewportDimensions();
if (viewport.width) {
var width = viewport.width;
}
if (viewport.height) {
var height = viewport.height;
}
}
var iframe = document.createElement('iframe');
iframe.setAttribute('width', width + 'px');
iframe.setAttribute('height', height + 'px');
iframe.setAttribute('frameborder','no');
if(scroll){
iframe.setAttribute('scrolling', scroll);
}
iframe.setAttribute('src', iframeURL);
// set the slideshow to the placeholder div
var dest = document.getElementById('dest');
dest.innerHTML = '';
dest.appendChild(iframe);
}
</script>
</Content>
</Module>
請參閱入門：小工具*。API 提供小工具標記和預期內容的完整說明。
代管小工具
無論您的小工具功能為何，其檔案必須存放在全球資訊網上， 任何可透過 HTTP 存取且無須驗證的線上位置， 信任關係別忘了，您必須在公開的目錄中發布您的小工具，以供選取。 否則，使用者必須直接插入網址，才能嵌入網站。
以下是小工具代管選項：
- App Engine - 能夠儲存小工具所需的所有檔案。需要進行一些設定，包括建立專案和後續上傳的檔案。但也能因應大量使用者的需求。您可以建立一個應用程式來儲存所有小工具，再建立另一個應用程式來提供靜態檔案，包括類似下列格式的 app.yaml 檔案：
application: <your app name> version: 1 runtime: python api_version: 1 handlers: - url: /.* static_dir: static
將所有小工具檔案存放在靜態目錄中時，即可在本機目錄中編輯檔案，並在進行變更後部署至 App Engine。如果您的檔案是 /static/gadget.xml，其網址會是：http://<您的應用程式名稱>.appspot.com/static/gadget.xml
- 自行選擇的線上位置：完全由您掌控，但您必須 完全責任。伺服器停機可能會導緻小工具使用者服務中斷。
建構小工具
小工具只是 HTML，以及 (選擇性) 以 XML 包裝的 JavaScript、Flash 或 Silverlight。《小工具開發人員指南》提供建立小工具所需的所有詳細資訊。此外，您可以使用 OpenSocial 範本，在小工具中快速建構社交應用程式。
以下是建立協作平台小工具的高階步驟：
- 決定小工具的代管位置。如需選項說明，請參閱「代管小工具」 一節。
- 使用您選擇的文字編輯器建立新的 .xml 檔案，做為規格。
- 決定內容類型 (HTML 或網址)，並在小工具 .xml 檔案中指定類型，例如：
<Content type="html">
這幾乎是 HTML 的，也就是說，所有內容都是直接在 .xml 檔案中提供。但如果您打算以獨立檔案提供內容，請使用網址內容類型。如需差異的完整說明，請參閱選擇內容類型。 - 在小工具 .xml 檔案中建立內容，或是在規格呼叫的個別檔案中建立內容。如要檢視現有的小工具，請參閱檢視小工具範例一節。
- 定義使用者可以變更的小工具基本偏好設定。如需操作說明，請參閱定義使用者偏好設定。如要提供更多進階設定，請參閱「允許進階使用者設定」一節。
- 定義只有小工具作者可以變更的模組偏好設定。如需其他詳細資訊，請參閱「定義小工具偏好設定」。
- 測試小工具。如需操作說明，請參閱測試您的小工具一節。
嵌入您的小工具
如要將小工具嵌入協作平台網頁中，請從「協作平台」小工具目錄選取小工具 (與·iGoogle 小工具目錄同步)，或是直接加入小工具網址。
如何在協作平台中嵌入小工具：
- 前往包含新小工具的協作平台頁面。
- 開啟要編輯的頁面。
- 選取「插入」>「插入」更多小工具，
- 搜尋該小工具，然後從左側的類別中選取小工具，或按一下 [透過網址新增小工具]，然後貼到 .xml 檔案中。然後按一下「Add」。
提示：無論您是透過網址新增小工具，都可以使用這項「依網址新增小工具」方法，嵌入 i 和網路上的任何其他位置的小工具。 - 指定小工具尺寸，從可用的設定中選取，然後按一下「確定」。已新增小工具 。
- 儲存頁面即可在網站中檢視及測試小工具。
測試您的小工具
建立小工具之後，您應充分測試才能使用此小工具，並允許他人 你也可以執行相同的動作建立一或多個 Google 協作平台測試和嵌入功能，手動測試小工具 小工具。如需詳細步驟，請參閱「嵌入您的小工具」一節。 小工具的功能和外觀取決於含有 基礎架構因此，想要對小工具進行偵錯，最好的方法就是依照 實際的 Google 網站。嘗試在各種協作平台主題之間切換，確保每個主題都能正確顯示小工具。
測試小工具時，您難免會發現錯誤需要修正 加入小工具 .xml 檔案中如果在瀏覽器運作期間，建議您停用小工具快取功能 但又需要微調 XML否則您所做的變更不會顯示在頁面上。除非您要求 Google 協作平台不要儲存小工具規格，否則系統會快取小工具規格。如果要在開發期間略過快取，請將下列程式碼片段新增至含有小工具的協作平台網頁網址 (而非小工具規格 .xml 檔案的網址)：
?nocache=1
協作平台提供標準使用者介面，可讓您新增及設定小工具。新增小工具後，系統便會顯示預覽畫面並列出可設定的 UserPref 參數。測試更新各種設定值，並
將小工具新增到測試網站。確認您的小工具可以在
網站本身建議您測試
網站管理員可正確設定任何你定義的 UserPref。
接著，請參閱發布小工具的準備工作一節，瞭解要執行其他測試。
允許進階使用者設定
所有小工具都可以讓您設定基本的使用者偏好設定，可透過小工具規格檔案的 UserPref 區段完成。這通常會影響尺寸、捲軸、邊框、標題和小工具專屬設定，如以下螢幕截圖所示：
但在許多情況下，比起標準 UserPref 元件提供的進階偏好設定，小工具也能受益。偏好設定通常需要包含自訂商業邏輯、驗證或挑選器等功能。從小工具 UserPref 區段產生的介面支援幾種資料類型 (字串、列舉等)，因此系統無法驗證網址或日期等輸入內容的驗證作業。
此外，在與檢視者和編輯器相同的容器中，小工具作者可以在標準檢視中擴充設定。在協作平台中，檢視者不一定是編輯器，因此小工具作者無法保證檢視使用者一定能更新偏好設定。「Google 協作平台」等社交容器不允許任何使用者修改偏好設定，只包括作者。
在協作平台中，UserPref 產生的基本小工具偏好設定介面可替換成設定檢視畫面，其中可提供更多偏好設定和資料類型，如以下螢幕截圖所示：
設定檢視畫面會在插入時間或編輯時間取代 UserPref 設定，可讓您透過自訂介面調整使用者的偏好設定。您也可以自訂輸入元素，例如在地圖上挑選位置，而不必輸入地圖座標。
開發人員可以使用標準設定 API，在這個檢視畫面中儲存偏好設定。詳情請參閱小工具 XML 參考資料以及開發人員基礎知識的「儲存狀態」部分。這些檢視畫面可讓容器應用程式補充設定資訊，並記錄在小工具 .xml 規格檔案中 (位於 UserPref 部分 (包含類似開頭標記)：
<Content type="html" view="configuration" preferred_height="150">
舉例來說，提供上述設定檢視的 news.xml 小工具包含以下部分：
<Content type="html" view="configuration" preferred_height="300">
<style type="text/css">
.config-options {
margin: 10px;
}
.label {
font-weight: bold;
width: 35%;
vertical-align: top;
}
.gray {
color:#666666;
}
html {
font-family:arial,sans-serif;
font-size:0.81em;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.5;
}
a:link, a:visited, a:active { text-decoration: none }
</style>
<img alt="Google Web Elements" src="http://www.google.com/webelements/images/web_elements_logo.gif"/>
<table class="config-options">
<tr>
<td align="left" class="label">Size:</td>
<td align="left">
<select id="size" onchange="Update()">
<option selected="selected" value="300x250">Medium rectangle (300x250)</option>
<option value="728x90">Leaderboard (728x90)</option>
</select>
</td>
</tr>
<tr>
<td align="left" class="label">Select sections:</td>
<td align="left">
<table>
<tbody><tr>
<td><input type="checkbox" onclick="Update()" id="sec_h" value="h"/> Top Stories</td>
<td><input type="checkbox" onclick="Update()" id="sec_w" value="w"/> World</td>
<td><input type="checkbox" onclick="Update()" id="sec_b" value="b"/> Business</td>
</tr><tr>
<td><input type="checkbox" onclick="Update()" id="sec_p" value="p"/> Politics</td>
<td><input type="checkbox" onclick="Update()" id="sec_n" value="n"/> Nation</td>
<td><input type="checkbox" onclick="Update()" id="sec_e" value="e"/> Entertainment</td>
</tr><tr>
<td><input type="checkbox" onclick="Update()" id="sec_t" value="t"/> Technology</td>
<td><input type="checkbox" onclick="Update()" id="sec_s" value="s"/> Sports</td>
<td><input type="checkbox" onclick="Update()" id="sec_m" value="m"/> Health</td>
</tr></tbody>
</table>
</td>
</tr>
<tr>
<td align="left" class="label">Or create one:</td>
<td align="left">
<input type="text" id="query" onchange="Update()"/>
<br/>
<span class="gray">Example: 2010 Olympics</span>
</td>
</tr>
<tr>
<td colspan="2">
<div id="preview" style="margin-top:10px;overflow:auto;width:100%;">
<iframe id="preview_ifr" frameborder="0" marginwidth="0" marginheight="0" border="0"
style="border:0;margin:0;"
scrolling="no" allowtransparency="true"></iframe>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
var prefs = new gadgets.Prefs();
function getSelectedTopics() {
var selected = [];
var topics = ['h', 'w', 'b', 'p', 'n', 'e', 't', 's', 'm'];
for (var i = 0; i < topics.length; i++) {
if (document.getElementById('sec_' + topics[i]).checked) {
selected.push(topics[i]);
}
}
return selected.join(',');
}
function setSelectedTopics(selected) {
if (selected && selected.length >= 0) {
var topics = selected.split(',');
for (var i = 0; i < topics.length; i++) {
document.getElementById('sec_' + topics[i]).checked = true;
}
}
}
function Update() {
var topic = getSelectedTopics();
var query = document.getElementById('query').value;
var size = document.getElementById('size').value;
var url = 'http://www.google.com/uds/modules/elements/newsshow/iframe.html?rsz=large&' +
'format=SIZE&element=true';
var iframe = document.getElementById('preview_ifr');
url = url.replace(/SIZE/, size);
if (topic.length > 0) {
url += '&topic=' + topic;
}
if (query.length > 0) {
url += '&q=' + encodeURIComponent(query);
}
iframe.src = url;
if (size == '728x90') {
iframe.style.width = '728px';
iframe.style.height = '90px'
} else {
iframe.style.width = '300px';
iframe.style.height = '250px';
}
prefs.set('size', size);
prefs.set('topic', topic);
prefs.set('query', query);
gadgets.window.adjustHeight();
}
function Initialize() {
var size = '__UP_size__';
if (size.length > 0) {
document.getElementById('size').value = size;
}
var query = '__UP_query__';
if (query.length > 0) {
document.getElementById('query').value = query;
}
setSelectedTopics('__UP_topic__');
Update();
}
gadgets.util.registerOnLoadHandler(Initialize);
</script>
</Content>
您可以在下列連結找到這個範例，以及其他含有設定檢視的協作平台專用小工具：
https://www.gstatic.com/sites-gadgets/news/news.xml
http://gadgets.pardonmyzinger.org/static/qrcode.xml
https://www.gstatic.com/sites-gadgets/news/youtube_news.xml
遵循協作平台小工具的最佳做法
使用者希望擁有良好的網路瀏覽體驗。遵循下列最佳做法， 小工具，可與「協作平台」中使用的眾多主題完美融合。詳情請見 小工具總覽：瞭解如何建立小工具。其餘的 本節概述協作平台小工具特有的指南。
- 由於您的小工具可以公開查看，因此請勿在小工具規格或標題中放置機密資訊。例如，請勿加入內部專案名稱。
- 為了盡可能降低小工具的能見度，請勿將小工具提交到小工具目錄或任何其他公開資訊服務。請讓所有使用者只透過網址加入網址。此外，您可以建立網址類型小工具 (而不是包含所有內容的典型 HTML 類型)，只是呼叫另一個檔案來請求內容。使用這個直通選項時，則只會顯示第二個檔案的網址。如要瞭解在 HTML 和網址小工具之間的差異，請參閱選擇開發人員基礎知識的內容類型部分，以及自行編寫小工具的「小工具為公開小工具」一節，瞭解其他遮蓋小工具的方式。
- 最重要的是，在多個網站上測試您的小工具。修改網站背景顏色、文字顏色和字型，確保您的小工具與各種範本相得益彰。