減碳駕駛朋友小工具 Motudo EcoDriving2 Gadget

減碳駕駛朋友小工具 Motudo EcoDriving2 Friend Gadget 是 Motudo EcoDriving Gadget 減碳駕駛計算機小工具的改版，新加入下面幾個工具：

1. Google Chart API
   
2. jQuery
   

其實這個版本是去掉 OpenSocial 的 Motudo Gadget 減碳駕駛朋友版小工具，只是該工具因為 IE7 問題還沒有擺上去，細節參閱 OpenSocial 客製小工具 Custom Gadget，於是拿掉 Google Friend Connect 的部份，直接用小工具形式呈現。

下面就是剪貼網頁內嵌 script 的呈現結果。

延伸

1. Motudo Gadget Google 小工具 - 減碳駕駛朋友小工具
   
2. 摩圖獨專案 - Motudo Project
   
3. MOTUDO 網誌: 減碳駕駛 Green Driving
   
4. MOTUDO 網誌: 超里 Hypermiling
   

OpenSocial 客製小工具 Custom Gadget

延續之前的MOTUDO 網誌: Google Friend Connect 的客製小工具 Custom Gadget測試，這次結合 Motudo EcoDriving Gadget 減碳駕駛計算機小工具 的概念來做，目前結果放在 Motudo Gadget 減碳駕駛朋友版小工具。

這個小工具目前無法放在 motudo-zht.blogspot.com 這個網誌邊欄，主要是因為 IE7 會掛掉 Google Friend Connect 裡面的 Custom Gadget，這是 IE 的 Bug，可以在The Reference Frame: Fix: IE7 with Sitemeter: Operation aborted 或是 Question: Why do I receive an "Operation aborted" error message when you visit a Web page in Internet Explorer? 找到進一步的資訊。


在 Google 還沒修正如何繞過這個 IE7 問題之前，暫時將不考慮放置這 Motudo Google Gadget - 減碳駕駛朋友版小工具 到網誌邊欄裡面，由於每一個頁面都會載入邊欄，會因為 IE 的因素，將整個網站內容全擋掉了，要求客戶升級 IE8 或是使用 Firefox 等不衝突的瀏覽器也是種解決方案，不過對於網誌部落格這類不特定讀者的應用，這樣搞不太可能。

一開始以為是自己程式的關係，於是試著移除 jQuery / Chart API / OpenSocial 的部份，等到剩下 HelloWorld 還執行不出來的時候，大概問題非開發者這端可以解決，你可以利用最簡單的官方 XML 來自行產出這個 IE7 問題測試看看。

1. OpenSocial HelloWorld Gadget XML
2. Google Friend Connect - Social Gadgets - Custom Gadget
3. Blogger Edit Layout - Add JavaScript/HTML
4. IE7
   

另外使用 Gene: The Man and His Dream: Custom Gadgets for Google Friend Connect 也一樣有這個問題，另外有人提到Bug report: friend connect + Google maps crashes IE7 - Google Friend Connect Discussion 也是類似情形。

除了 IE7 的議題之外，幾個 OpenSocial 相關的想法記錄一下。

1. 還沒有即時的預覽工具，現在必須上網站或是 Blogger 的邊欄來測試，問題是有些 Google Gadget 會有暫存快取的議題，有時候在 Google Gadgets Editor 改完存檔，並不會馬上看到反應，可能要等一下。
2. 使用 Google Gadgets Editor 可以取巧解決快取議題，不斷 Save As 更新 Gadget XML 的檔名來做測試，因為檔名是新的，不會有快取問題，等到除錯完成在做出最後版本。只是這類免洗 XML 作法最後會變成很多，所以非必要還是少用。
   
3. iGoogle Sandbox 裡面有個社群網路，現 Google Friend Connect 也建構一個，同一個 Google Gadget XML 放不同 OpenSocial Container 容器，呈現的結果會不一樣。
4. 請先用假資料先把外觀跑出來，等到調到滿意後，然後再來上線測試。也就是 OpenSocial 的資料先用假的，上線再改過來就好。
5. 關於 Google Chart API 有個比例的地方 chxr 跟 chds 要一起調整，否則會有比例問題，如果是 0-100 就不用改了，用預設值就可以，進一步參考 How to use Google Charts API with 6 examples at psychopyko
   

延伸

1. Google Friend Connect Discussion
2. Gene: The Man and His Dream: Sorry for Custom Google Friend Connect Gadget
3. Gene: The Man and His Dream: Google Friend Connect Custom Gadget work on IE now....
4. OpenSocial Demo XML
5. OpenSocial API Specification - OpenSocial
6. Google Gadgets Editor
7. Google Friend Connect: Add social features to your site
8. dev-opensocial-2008-1208.xml
9. Google Chart API
10. Using Visualizations - Google Visualization API
11. 摩圖獨專案 - Motudo Project

Google Friend Connect 的客製小工具 Custom Gadget

Google Friend Connect: Add social features to your site 這個服務已經有很多地方介紹，對於申請或是使用請參閱下面延伸閱讀。

這裡要測試的是 Social Gadgets 頁面最下面的 Custom Gadget 部分，這個東西實在很像這個 Add Gadget to Your Webpage 服務，所以我用同一個 Motudo Gadget Google 小工具 - 減碳飲料計算機小工具 試看看裝到 Custom Gadget 的差異。

這裡試看看 profile mode，結果如上面的圖所展示。

由於舊的 Motudo Gadget Google 小工具 - 減碳飲料計算機小工具 並沒有動到 OpenSocial 的 API，不會跟原來的版本有所差異，真正要客製的部份是要引入 OpenSocial 才有差別，下次找機會再來測試。

目前看來加到 Blogger 文章裡面會有高度問題如上面的小工具呈現的效果，即使自行新增 CSS 高度屬性也是無效，也許是之前的 Gadget XML 有問題，沒有適當的調整高度，待測試。

另一個問題就是 BR 的標籤再度出現在 Script 裡面，造成 Google Friend Connect 無法使用，這個問題只會出現在文章裡面，如果放到邊欄，應該不會有自動斷行改 BR 的問題。

延伸

1. Motudo Gadget Google 小工具 - 減碳飲料計算機小工具
2. 海芋小站: Google Friend Connect 申請、設定與放置於網頁之實戰手札
3. 電腦玩物: Google Friend Connect 帶你進入巨型網路社交圈，歡迎大家來試玩
4. 只把Google Friend Connect「這樣用」真是暴殄天物！ (Mr. 6)