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