Google Sites के लिए गैजेट

Google में, विजेट एचटीएमएल और JavaScript ऐप्लिकेशन होते हैं, जिन्हें वेब पर एम्बेड किया जा सकता है पेज और अन्य ऐप्लिकेशन, जिनमें 'साइटें' शामिल हैं. ये गैजेट शामिल किए जा सकते हैं जिसमें बाहरी और उदाहरण के लिए, आपकी साइट में मौजूद डाइनैमिक कॉन्टेंट, जैसे कि मिनिएचर ऐप्लिकेशन और डेटाबेस के आधार पर बनी सूचियां, उपयोगकर्ताओं को बेहतरीन अनुभव देने के लिए, टेक्स्ट और इमेज का इस्तेमाल किया जाता है.

साइट का हर पेज एक संभावित गैजेट कंटेनर होता है. इसके अलावा, साइट Data API जिसे एक साथ इस्तेमाल किया जा सकता है सशक्त ऐप्लिकेशन बनाने के लिए गैजेट के साथ. इसका मतलब है कि एक गैजेट डेवलपर के रूप में आप Google Sites के क्लासिक वर्शन के एपीआई का इस्तेमाल करके, दूसरे वेब डेवलपर और उनकी ऑडियंस के लिए दिलचस्प टूल बनाएं. जैसे डेटा सुरक्षित रखने में मदद करता है.

जब आप साइटों के लिए एक गैजेट बनाते हैं, तो वह लाखों सक्रिय उपयोगकर्ता. बस अपना गैजेट हमें सबमिट करें, और यह वहां दिखाई देगा जहां उपयोगकर्ता आसानी से ब्राउज़, कॉन्फ़िगर और अपने गैजेट को अपने साइटें.

अब आपको यह पता चल गया है कि {sites_name_short} आपके गैजेट के लिए एक शानदार डिस्ट्रिब्यूशन प्लैटफ़ॉर्म है. क्या आप इंतज़ार कर रहे हैं? साइट के लिए अभी गैजेट बनाना आरंभ करें!

साइट गैजेट का संक्षिप्त विवरण

सामान्य रूप से, गैजेट छोटी उपयोगिताएं होती हैं जो वेब पर बाहरी जानकारी जनरेट करती या उसे निकालती हैं पेज. अपने सबसे आसान रूप में, गैजेट एक छोटी .xml फ़ाइल होती है जो उसे एक साथ कई वेब पेजों पर उपलब्ध कराने की क्षमता होती है. साइटों में, किसी गैजेट परिणाम के साथ एक iframe में मौजूद है, जो इस बाहरी जानकारी के स्रोत के रूप में काम करता है. कुछ गैजेट अब नहीं हैं के बजाय, वे iframe जो किसी अन्य वेब साइट से जानकारी पास करते हैं.

और भी बेहतर गैजेट डायनैमिक सामग्री इकट्ठा करते हैं और अंदर इंटरैक्टिव अनुप्रयोग उपलब्ध कराते हैं आपकी साइटें के पेज. उदाहरण गैजेट देखें.

गैजेट में ये कॉम्पोनेंट शामिल होते हैं:

• गैजेट की खास जानकारी वाली फ़ाइल - ऐसी .xml फ़ाइल जिसमें एचटीएमएल और JavaScript फ़ंक्शन शामिल होते हैं.
  
• कंटेनर पेज - वह वेब पेज जहां गैजेट डाला गया है. इस मामले में Google साइट.
  
• बाहरी डेटा सोर्स - यह वैकल्पिक है और .xml फ़ाइल की जगह पर हो सकता है. हालांकि, नतीजे देने के लिए इसे अक्सर एचटीटीपी की तुलना में गैजेट की खास जानकारी के ज़रिए कॉल किया जाता है.

इसके लिए बनाए गए गैजेट किसी साइट के सभी दर्शक, साइटों का इस्तेमाल कर सकते हैं. ये इंटरैक्टिव होते हैं और इनका फ़ोकस के साथ-साथ की वेबसाइट पर जाएं.

कैलेंडर गैजेट इस अंतर का अच्छा उदाहरण है. इसमें एक वैयक्तिकृत कैलेंडर गैजेट डिफ़ॉल्ट रूप से, लॉग इन किए हुए उपयोगकर्ता का कैलेंडर दिखाएगा, जबकि कैलेंडर गैजेट साइटों में, सहयोगियों को अलग-अलग जगह के हिसाब से कैलेंडर में से चुनने की सुविधा मिल सकती है.

साइट गैजेट आपको बाहरी स्रोतों से जानकारी के कई टुकड़े प्रस्तुत करने की अनुमति देते हैं (कहें के लाइव डायग्राम में अलग-अलग, लेकिन उनसे जुड़े परफ़ॉर्मेंस डैशबोर्ड) को एक ही पेज पर देखा जा सकता है जानकारी देने वाला टेक्स्ट, सीधे Sites में पब्लिश किया गया हो. यह कलेक्ट करने के दौरान विज़ुअल रीयल एस्टेट को बचाता है एक ही विषय पर जानकारी को एक ही व्यू में अलग-अलग कर देना. गैजेट आपको उन्हें शामिल करने की अनुमति भी देते हैं ऐसा डाइनैमिक कॉन्टेंट जिसे आम तौर पर Sites की सुरक्षा जांच की वजह से रोका जा सकता था.

चेतावनी: लेगसी के साथ बनाए गए गैजेट गैजेट API साइट में काम कर सकता है लेकिन आधिकारिक रूप से समर्थित नहीं है. अंतर्निहित और फ़ीड-आधारित गैजेट वे भी काम नहीं करते हैं. इसलिए, Google अनुशंसा करता है कि आप मौजूदा हाल ही के गैजेट.* एपीआई. ज़्यादा जानकारी के लिए यह पोस्ट देखें:
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 का इस्तेमाल करें.

आपका गैजेट होस्ट किया जा रहा है

चाहे आपका गैजेट कुछ भी करता हो, उसकी फ़ाइलों को खोजने के लिए वर्ल्ड वाइड वेब पर उनका होना ज़रूरी है और इस्तेमाल किया गया. एचटीटीपी से बिना पुष्टि के ऐक्सेस की जाने वाली किसी भी ऑनलाइन जगह की जानकारी करते हैं. बस याद रखें, चुने जाने के लिए आपके गैजेट को किसी सार्वजनिक निर्देशिका में प्रकाशित करना होगा. अगर ऐसा नहीं है, तो उपयोगकर्ताओं को सीधे इसका यूआरएल डालकर उसे एम्बेड करना होगा.

यहां आपके लिए गैजेट होस्टिंग के विकल्प दिए गए हैं:

• App Engine - आपके गैजेट के लिए आवश्यक सभी फ़ाइलों को संग्रहित करने में सक्षम. इसके लिए कुछ सेटअप की ज़रूरत होती है, जैसे कि प्रोजेक्ट बनाना और बाद में फ़ाइल अपलोड करना. हालांकि, यह बड़ी संख्या में लोगों के लिए आसानी से उपलब्ध हो जाएगा. आप अपने सभी गैजेट को स्टोर करने के लिए एक ऐप्लिकेशन और दूसरा इससे मिलता-जुलता app.yaml फ़ाइल फ़ॉर्मैट वाली स्टैटिक फ़ाइलें दिखाने के लिए बना सकते हैं:

  application: <your app name>
  version: 1
  runtime: python
  api_version: 1
  
  handlers:
  - url: /.*
    static_dir: static
  

  अगर आप सभी गैजेट फ़ाइलों को स्टैटिक डायरेक्ट्री में रखते हैं, तो आप हर बार बदलाव करने पर अपनी लोकल डायरेक्ट्री की फ़ाइलों में बदलाव कर सकते हैं और App Engine में डिप्लॉय कर सकते हैं. यदि आपके पास /static/devices.xml फ़ाइल है तो, इसका URL यह होगा: http://<your-app-name>.appspot.com/static/devices.xml

• आपकी पसंद का कोई भी ऑनलाइन स्थान - पूरी तरह से आपके नियंत्रण में, लेकिन पूरी ज़िम्मेदारी लेते हैं. आपके सर्वर पर डाउनटाइम की वजह से, आपके गैजेट का इस्तेमाल करने वाले लोगों के लिए सेवा कुछ समय के लिए उपलब्ध नहीं रहेगी.

आपका गैजेट बनाया जा रहा है

गैजेट केवल HTML होते हैं और (वैकल्पिक रूप से) JavaScript, Flash या Silverlight हैं, जो XML में रैप किए जाते हैं. गैजेट डेवलपर गाइड में आपके गैजेट बनाने के लिए सभी ज़रूरी जानकारी दी गई है. इसके अलावा, OpenSocial टेंप्लेट का इस्तेमाल, गैजेट में तेज़ी से सोशल ऐप्लिकेशन बनाने के लिए किया जा सकता है.

यहां Sites के लिए गैजेट बनाने के हाई-लेवल के चरण दिए गए हैं:

1. तय करें कि आपका गैजेट कहां होस्ट किया जाएगा. अपने विकल्पों के विवरण के लिए अपना गैजेट होस्ट करना सेक्शन देखें.
2. अपनी पसंद के टेक्स्ट एडिटर का इस्तेमाल करके, एक नई .xml फ़ाइल बनाएं. यह फ़ाइल आपके स्पेसिफ़िकेशन के तौर पर काम करेगी.
3. सामग्री का प्रकार, एचटीएमएल या यूआरएल तय करें और उसे गैजेट .xml फ़ाइल में इस तरह से बताएं:
   <Content type="html">
   यह करीब-करीब एचटीएमएल ही होगा, जो मानता है कि सारा कॉन्टेंट सीधे .xml फ़ाइल में दिया गया है. हालांकि, अगर आपको कॉन्टेंट को किसी अलग फ़ाइल में उपलब्ध कराना है, तो यूआरएल कॉन्टेंट टाइप का इस्तेमाल करें. दोनों के बीच के अंतर की पूरी जानकारी के लिए, कॉन्टेंट का टाइप चुनना लेख पढ़ें.
4. गैजेट .xml फ़ाइल में या स्पेसिफ़िकेशन के अनुसार कॉल की गई अलग-अलग फ़ाइलों में कॉन्टेंट बनाएं. मौजूदा गैजेट की जांच करने के तरीकों के बारे में जानने के लिए उदाहरण गैजेट देखना सेक्शन देखें.
5. उस गैजेट के लिए मूल प्राथमिकताएं परिभाषित करें, जिसे उपयोगकर्ता बदल सकते हैं. निर्देशों के लिए उपयोगकर्ता की प्राथमिकताएं तय करना देखें. ज़्यादा बेहतर कॉन्फ़िगरेशन उपलब्ध कराने के लिए, बेहतर उपयोगकर्ता कॉन्फ़िगरेशन की अनुमति देना सेक्शन देखें.
6. वे मॉड्यूल प्राथमिकताएं परिभाषित करें जिन्हें केवल गैजेट का लेखक बदल सकता है. अतिरिक्त जानकारी के लिए गैजेट की प्राथमिकताएं तय करना देखें.
7. गैजेट की जांच करें. निर्देशों के लिए अपने गैजेट की जांच करना अनुभाग देखें.

आपका गैजेट एम्बेड करना

गैजेट साइट के पेजों में या तो साइट गैजेट डायरेक्ट्री से चुनकर (जो आइगल गैजेट डायरेक्ट्री के साथ सिंक है) या सीधे उसके यूआरएल को शामिल करके, साइट के पेजों में एम्बेड किए जा सकते हैं.

साइटों में एक गैजेट एम्बेड करने के लिए:

1. उस साइट पेज पर जाएं जिसमें नया गैजेट होगा.
2. बदलाव करने के लिए पेज खोलें.
3. शामिल करें चुनें > और गैजेट.
4. गैजेट खोजें, उसे बाईं ओर दी गई श्रेणियों में से चुनें या यूआरएल से गैजेट जोड़ें पर क्लिक करें और यूआरएल को अपनी .xml फ़ाइल में चिपकाएं. इसके बाद, जोड़ें पर क्लिक करें.
   टिप: इसी का उपयोग URL विधि से गैजेट जोड़ें, से गैजेट एम्बेड करने के लिए और ऑनलाइन कहीं भी किया जा सकता है.
5. गैजेट के आयाम बताएं, उपलब्ध सेटिंग में से चुनें और ठीक पर क्लिक करें. गैजेट जोड़ दिया गया है आपके पेज को कनेक्ट करता है.
6. साइट में अपना गैजेट देखने और उसका परीक्षण करने के लिए पेज को सेव करें.

आपके गैजेट की जाँच की जा रही है

अपना गैजेट बनाने के बाद, आपको उसका उपयोग करने से पहले उसकी अच्छी तरह से जाँच करनी चाहिए और दूसरों को ऐसा करने की अनुमति देनी चाहिए भी ऐसा ही करें. एक या ज़्यादा Google साइटें परीक्षण बनाकर और एम्बेड करके अपने गैजेट का मैन्युअल रूप से परीक्षण करें आपका गैजेट. सटीक चरणों के लिए अपना गैजेट एम्बेड करना अनुभाग देखें. कॉन्टेंट बनाने आपके गैजेट की कार्यक्षमता और प्रदर्शन उस साइट पर निर्भर करता है जिसमें इसे. इसलिए, अपने गैजेट को डीबग करने का सबसे अच्छा तरीक़ा यह है कि उसका परीक्षण असल Google साइट पर जाना चाहिए. यह पक्का करने के लिए कि आपका गैजेट हर थीम में सही तरीके से दिखे, अलग-अलग साइटों की थीम के बीच स्विच करके देखें.

अपने गैजेट का परीक्षण करते समय, आपको निश्चित तौर पर बग पता चलेंगे और उनमें सुधार करने होंगे आपकी गैजेट .xml फ़ाइल में. आपको रहते हुए गैजेट कैशिंग को अक्षम करना चाहिए एक्सएमएल में बदलाव करके. ऐसा न करने पर, आपके बदलाव पेज पर नहीं दिखेंगे. गैजेट की विशेषताएं तब तक कैश मेमोरी में सेव रहती हैं, जब तक आप साइटों को ऐसा न करने का निर्देश देते हैं. डेवलपमेंट के दौरान कैशे को बायपास करने के लिए, इसे गैजेट वाले साइट पेज के यूआरएल के अंत में जोड़ें (न कि गैजेट स्पेसिफ़िकेशन .xml फ़ाइल का यूआरएल):

 ?nocache=1

साइटें, गैजेट जोड़ने और कॉन्फ़िगर करने के लिए एक मानक यूज़र इंटरफ़ेस (यूआई) उपलब्ध कराती हैं. कोई गैजेट जोड़ने पर, वह एक झलक दिखाएगा और कॉन्फ़िगर किए जा सकने वाले कोई भी UserPref पैरामीटर दिखाएगा. अलग-अलग कॉन्फ़िगरेशन वैल्यू को अपडेट करके जांच करें और अपने गैजेट को अपनी टेस्ट साइट में जोड़ना. पुष्टि करें कि आपका गैजेट साइट पर मौजूद है. आपको उसकी जाँच करनी चाहिए आपने जो UserPref तय किए हैं उन्हें साइट का एडमिन, सही तरीके से कॉन्फ़िगर कर सकता है.

इसके बाद अन्य जाँच करने के लिए, अपना गैजेट प्रकाशित करने के प्रकाशन की तैयारी वाला सेक्शन देखें.

बेहतर उपयोगकर्ता कॉन्फ़िगरेशन की अनुमति देना

सभी गैजेट, गैजेट स्पेसिफ़िकेशन फ़ाइल के UserPref सेक्शन में जाकर मूल उपयोगकर्ता प्राथमिकताएं सेट करने की सुविधा दे सकते हैं. ये आम तौर पर डाइमेंशन, स्क्रोलबार, बॉर्डर, टाइटल, और गैजेट की खास सेटिंग पर असर डालते हैं. इस स्क्रीनशॉट में ये बदलाव दिखाए गए हैं:

हालांकि, ऐसे कई मामले हैं जहां स्टैंडर्ड UserPref कॉम्पोनेंट की तुलना में, गैजेट को ज़्यादा बेहतर सेटिंग से फ़ायदा होता है. प्राथमिकताओं में अक्सर, कारोबार के मनमुताबिक नियम, पुष्टि या पिकर जैसी सुविधाएं शामिल होनी चाहिए. गैजेट UserPref सेक्शन से जनरेट किया गया इंटरफ़ेस, सीमित डेटाटाइप (स्ट्रिंग, ईनम वगैरह) के साथ काम करता है. इसलिए, यूआरएल या तारीख जैसे इनपुट की पुष्टि नहीं की जा सकती.

इसके अलावा, Googlebot जैसे कंटेनर में जहां दर्शक और संपादक एक समान हैं, वहां गैजेट लेखक मानक दृश्य के भाग के रूप में कॉन्फ़िगरेशन को विस्तारित कर सकते हैं. साइटें में, व्यूअर हमेशा संपादक नहीं होता है, इसलिए गैजेट का लेखक यह गारंटी नहीं दे सकता है कि देखने वाले उपयोगकर्ता के पास अपडेट की प्राथमिकताओं का ऐक्सेस है. साइटें जैसे सोशल कंटेनर, किसी भी उपयोगकर्ता को प्राथमिकताओं में बदलाव करने की अनुमति नहीं दे सकते, सिर्फ़ लेखक को.

साइटों में, UserPref के ज़रिए जनरेट किए गए बेसिक गैजेट प्राथमिकताओं के इंटरफ़ेस को किसी कॉन्फ़िगरेशन व्यू से बदला जा सकता है, जहां कई अतिरिक्त प्राथमिकताएं और डेटा टाइप दिए जा सकते हैं, जैसा कि यहां दिखाए गए स्क्रीनशॉट में दिखाया गया है:

इंसर्शन के समय या बदलाव करते समय, UserPref सेटिंग की जगह कॉन्फ़िगरेशन व्यू दिखता है. इसकी मदद से, कस्टम इंटरफ़ेस की मदद से उपयोगकर्ता की प्राथमिकताएं सेट की जा सकती हैं. साथ ही, आपके पास कस्टम इनपुट एलिमेंट हो सकते हैं, जैसे कि मैप के निर्देशांक डालने के बजाय, मैप पर पोज़िशन चुनना.

इस व्यू में प्राथमिकताओं को सेव करने के लिए, डेवलपर स्टैंडर्ड setprefs एपीआई का इस्तेमाल कर सकते हैं. ज़्यादा जानकारी के लिए, सामान की एक्सएमएल का रेफ़रंस और डेवलपर के लिए बुनियादी जानकारी का सेव की गई स्थिति वाला सेक्शन देखें. ये दृश्य कंटेनर ऐप्लिकेशन को पूरक कॉन्फ़िगरेशन जानकारी प्रदान करने की अनुमति देते हैं और ये गैजेट .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

Sites के गैजेट के लिए सबसे सही तरीके नीचे दिए गए हैं

ऐसी साइटें जो उपयोगकर्ता वेब पर अच्छा दिखना चाहते हैं. इन सबसे सही तरीकों को अपनाएं, ताकि गैजेट, Sites में इस्तेमाल की जाने वाली कई थीम के साथ आसानी से घुल-मिल जाता है. यहां जाएं: गैजेट बनाने के बारे में ज़्यादा जानकारी के लिए, गैजेट की खास जानकारी. बाकी यह अनुभाग विशेष रूप से साइट गैजेट के लिए दिशानिर्देश प्रस्तुत करता है.

• गैजेट की विशेषताओं या शीर्षक में संवेदनशील जानकारी शामिल न करें क्योंकि आपका गैजेट सार्वजनिक रूप से देखा जा सकता है. उदाहरण के लिए, प्रोजेक्ट के अंदरूनी नाम शामिल न करें.
• अपने गैजेट की दृश्यता कम करने के लिए, इसे Google गैजेट निर्देशिका या किसी अन्य सार्वजनिक सूची सेवा में सबमिट न करें. इसके बजाय, सभी उपयोगकर्ताओं को इसे सिर्फ़ यूआरएल से शामिल करने के लिए कहें. इसके अतिरिक्त, आप एक URL-टाइप गैजेट बना सकते हैं (सभी सामग्री वाले सामान्य HTML प्रकार के बजाय) जो अपनी सामग्री के लिए मात्र किसी अन्य फ़ाइल को कॉल करता है. इस पास-थ्रू विकल्प से, सिर्फ़ दूसरी फ़ाइल का यूआरएल दिखता है. एचटीएमएल और यूआरएल गैजेट और अपने गैजेट को मास्क करने के दूसरे तरीकों के बारे में जानने के लिए, डेवलपर के लिए बुनियादी बातों का कॉन्टेंट टाइप चुनना वाला सेक्शन देखें. इस सेक्शन में जाकर, अपने गैजेट लिखने के लिए इन्हें सार्वजनिक सेक्शन के तौर पर इस्तेमाल किया जा सकता है.
• सबसे महत्वपूर्ण बात, अपने गैजेट का परीक्षण विभिन्न साइटों पर करें. यह सुनिश्चित करने के लिए साइट का पृष्ठभूमि रंग, पाठ रंग और फॉन्ट फ़ेस संशोधित करें कि आपका गैजेट टेम्पलेट की एक व्यापक श्रेणी के साथ मिश्रित हो जाए.

वापस सबसे ऊपर जाएं