ที่ Google แกดเจ็ตคือแอปพลิเคชัน HTML และ JavaScript ที่ฝังในเว็บได้ และแอปอื่นๆ รวมถึง Sites แกดเจ็ตเหล่านี้สามารถเพิ่มคุณลักษณะภายนอกและ เนื้อหาแบบไดนามิกภายในไซต์ของคุณ เช่น แอปพลิเคชันขนาดเล็ก และรายการที่อ้างอิงฐานข้อมูล ผสานรวมเข้ากับข้อความและรูปภาพเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ราบรื่น
ทุกหน้าของ Sites เป็นที่เก็บแกดเจ็ตที่เป็นไปได้ ยิ่งไปกว่านั้น Sites ยังมี Data API ที่ใช้ร่วมกันได้ ด้วยแกดเจ็ตเพื่อสร้างแอปพลิเคชันประสิทธิภาพสูง ซึ่งหมายความว่านักพัฒนาแกดเจ็ตคุณสามารถ ใช้ประโยชน์จาก API ของ Sites แบบคลาสสิกเพื่อสร้างเครื่องมือที่น่าสนใจสำหรับนักพัฒนาเว็บรายอื่นๆ และผู้ชมเหล่านั้น เช่น เหมาะสำหรับการใช้งานของคุณเอง
เมื่อคุณสร้างแกดเจ็ตสำหรับ Sites แกดเจ็ตนี้ก็จะพร้อมใช้งานสำหรับผู้ใช้หลายล้านคน ผู้ใช้ เพียงส่งแกดเจ็ตของคุณมาให้เรา แกดเจ็ตนั้นจะปรากฏในที่ที่ผู้ใช้สามารถเรียกดู กำหนดค่า และเพิ่มแกดเจ็ตของคุณลงใน Sites
ตอนนี้คุณก็รู้แล้วว่า {sites_name_short} เป็นแพลตฟอร์มการเผยแพร่ที่ยอดเยี่ยมสำหรับแกดเจ็ตของคุณ กำลังรออยู่หรือ เริ่มต้นสร้างแกดเจ็ตสำหรับ Sites วันนี้
ภาพรวมแกดเจ็ตของ Sites
โดยทั่วไปแล้ว แกดเจ็ตเป็นยูทิลิตีขนาดเล็กที่สร้างหรือดึงข้อมูลจากภายนอกเข้าสู่เว็บ ในรูปแบบที่ง่ายที่สุด แกดเจ็ตคือไฟล์ .xml ขนาดเล็กที่ดึงข้อมูลด้วย ทำให้ใช้งานกับหน้าเว็บหลายหน้าได้พร้อมกัน ใน Sites รวมถึงผลลัพธ์ของแกดเจ็ต ใน iframe ซึ่งทำหน้าที่เป็นท่อส่งข้อมูลภายนอกนี้ แกดเจ็ตบางรายการไม่มีให้ใช้งานอีกต่อไป นั่นคือ iframe ซึ่งส่งผ่านข้อมูลจากเว็บไซต์อื่น
แกดเจ็ตขั้นสูงกว่าจะรวบรวมเนื้อหาแบบไดนามิกและให้แอปพลิเคชันเชิงโต้ตอบภายใน หน้า Sites โปรดดูแกดเจ็ตตัวอย่าง
แกดเจ็ตประกอบด้วยองค์ประกอบต่อไปนี้
- ไฟล์ข้อมูลจำเพาะของแกดเจ็ต - ไฟล์ .xml ที่รวมฟังก์ชัน HTML และ JavaScript
- หน้าคอนเทนเนอร์ - หน้าเว็บที่แทรกแกดเจ็ตไว้ ซึ่งในกรณีนี้คือ Google Site
- แหล่งข้อมูลภายนอก - ส่วนนี้ไม่บังคับและอาจอยู่ในตำแหน่งเดียวกับไฟล์ .xml แต่มักจะเรียกใช้โดยข้อกำหนดของแกดเจ็ต HTTP เพื่อแสดงผลลัพธ์
แกดเจ็ตที่สร้างขึ้นสำหรับ ผู้ดูเว็บไซต์ทุกคนอาจใช้เว็บไซต์ได้ คอนเทนต์ประเภทนี้มักจะเป็นคอนเทนต์แบบอินเทอร์แอกทีฟ โดยเน้นที่การดึงโฆษณา ในเนื้อหาแบบไดนามิก แทนที่จะนำเสนอในงานนำเสนอ และได้รับการออกแบบมาเพื่อส่งเสริมเนื้อหาของ ของคุณ
แกดเจ็ตปฏิทินเป็นตัวอย่างที่ดีของความแตกต่างนี้ แกดเจ็ตปฏิทินส่วนบุคคลใน อาจแสดงปฏิทินของผู้ใช้ที่เข้าสู่ระบบโดยค่าเริ่มต้น ขณะที่แกดเจ็ตปฏิทิน ใน Sites อาจช่วยให้ผู้ทำงานร่วมกันสามารถเลือกจากปฏิทินเฉพาะสถานที่ได้หลากหลายประเภท
แกดเจ็ตของ Sites อนุญาตให้คุณนำเสนอข้อมูลหลายอย่างจากแหล่งที่มาภายนอก (เช่น แผนภาพแบบสดจากแดชบอร์ดประสิทธิภาพที่ต่างกันแต่เกี่ยวข้องกัน) ไว้ในหน้าเดียว พร้อมด้วย ข้อความอธิบายที่เผยแพร่ใน Sites โดยตรง ตัวเลือกนี้จะบันทึกภาพอสังหาริมทรัพย์ขณะเก็บรวบรวม ข้อมูลที่แตกต่างกันในหัวข้อเดียวกันในมุมมองเดียวกัน แกดเจ็ตยังช่วยให้คุณรวม เนื้อหาแบบไดนามิกที่การตรวจสอบความปลอดภัยของ Sites อาจป้องกันไม่ได้
คำเตือน: แกดเจ็ตที่สร้างด้วยรุ่นเดิม
API ของแกดเจ็ตอาจใช้งานได้ใน Sites แต่ไม่มีการสนับสนุนอย่างเป็นทางการ แกดเจ็ตในตัวและแกดเจ็ตแบบฟีด
ก็ไม่รองรับเช่นเดียวกัน ดังนั้น Google ขอแนะนำให้คุณสร้างแกดเจ็ตไซต์ทั้งหมดโดยใช้
แกดเจ็ต* ในปัจจุบัน 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 โดยไม่ต้องมีการตรวจสอบสิทธิ์จะ สิ่งที่ควรทำ เพียงอย่าลืมว่าแกดเจ็ตของคุณจะต้องเผยแพร่ในไดเรกทอรีสาธารณะเพื่อให้เลือกได้ ไม่เช่นนั้น ผู้ใช้ต้องฝัง URL ด้วยการแทรก URL โดยตรง
นี่คือตัวเลือกการโฮสต์แกดเจ็ตของคุณ:
- 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 URL ของไฟล์จะเป็น: http://<your-app-name>.appspot.com/static/gadget.xml
- ตำแหน่งออนไลน์ใดก็ได้ที่คุณเลือก - ควบคุมได้เต็มที่แต่ยัง ความรับผิดชอบอย่างเต็มที่ ช่วงพักการใช้งานบนเซิร์ฟเวอร์อาจทำให้ผู้ใช้แกดเจ็ตของคุณไม่สามารถให้บริการได้
กำลังสร้างแกดเจ็ตของคุณ
แกดเจ็ตเป็นเพียง HTML และ (ไม่บังคับ) JavaScript, Flash หรือ Silverlight ที่รวมไว้ใน XML คู่มือนักพัฒนาแกดเจ็ตให้รายละเอียดที่จำเป็นทั้งหมดในการสร้างแกดเจ็ตของคุณเอง นอกจากนี้ อาจมีการใช้เทมเพลต OpenSocial เพื่อสร้างแอปพลิเคชันโซเชียลในแกดเจ็ตอย่างรวดเร็ว
ขั้นตอนระดับสูงในการสร้างแกดเจ็ตสำหรับ Sites มีดังนี้
- ตัดสินใจว่าจะโฮสต์แกดเจ็ตของคุณไว้ที่ใด โปรดดูคำอธิบายตัวเลือกต่างๆ ในส่วนการโฮสต์แกดเจ็ตของคุณ
- สร้างไฟล์ .xml ใหม่ที่จะทำหน้าที่เป็นข้อกำหนดของคุณโดยใช้ตัวแก้ไขข้อความที่คุณเลือก
- เลือกประเภทเนื้อหา HTML หรือ URL และระบุเนื้อหาดังกล่าวลงในไฟล์ .xml ของแกดเจ็ต ดังนี้
<Content type="html">
URL นี้มักจะเป็น HTML ที่แทบจะสอดคล้องกัน โดยถือว่าเนื้อหาทั้งหมดถูกระบุในไฟล์ .xml โดยตรง แต่หากคุณต้องการใส่เนื้อหาในไฟล์แยกต่างหาก ให้ใช้ประเภทเนื้อหา URL ดูการเลือกประเภทเนื้อหาสำหรับคำอธิบายแบบเต็มของความแตกต่าง - สร้างเนื้อหาในไฟล์ .xml ของแกดเจ็ต หรือในไฟล์แยกต่างหากที่เรียกใช้โดยข้อกำหนด โปรดดูที่ส่วนการดูแกดเจ็ตตัวอย่างสำหรับวิธีตรวจสอบแกดเจ็ตที่มีอยู่
- ระบุค่ากำหนดพื้นฐานสำหรับแกดเจ็ตที่ผู้ใช้เปลี่ยนแปลงได้ โปรดดูคำแนะนำเกี่ยวกับการกำหนดค่ากำหนดของผู้ใช้ หากต้องการกำหนดค่าขั้นสูง โปรดดูส่วนการอนุญาตการกำหนดค่าผู้ใช้ขั้นสูง
- กำหนดค่าโมดูลที่มีเฉพาะผู้เขียนแกดเจ็ตเท่านั้นที่สามารถเปลี่ยนแปลงได้ โปรดดูการกำหนดค่ากำหนดของแกดเจ็ตสำหรับรายละเอียดเพิ่มเติม
- ทดสอบแกดเจ็ต โปรดดูคำแนะนำที่ส่วนการทดสอบแกดเจ็ตของคุณ
การฝังแกดเจ็ตของคุณ
คุณสามารถฝังแกดเจ็ตในหน้า Sites ได้โดยเลือกจากไดเรกทอรีแกดเจ็ตของ Sites (ซึ่งซิงค์กับไดเรกทอรีแกดเจ็ตของ iGoogle) หรือรวม URL โดยตรง
ในการฝังแกดเจ็ตใน Sites ให้ทำดังนี้
- ไปที่หน้า "เว็บไซต์" ซึ่งจะมีแกดเจ็ตใหม่
- เปิดหน้าเพื่อแก้ไข
- เลือก แทรก > แกดเจ็ตเพิ่มเติม
- ค้นหาแกดเจ็ต แล้วเลือกจากหมวดหมู่ทางด้านซ้าย หรือคลิกเพิ่มแกดเจ็ตด้วย URL และวาง URL ลงในไฟล์ .xml ของคุณ จากนั้นคลิกเพิ่ม
เคล็ดลับ: วิธีการเพิ่มแกดเจ็ตด้วย URL เดียวกันนี้อาจใช้เพื่อฝังแกดเจ็ตจาก iGoogle และที่อื่นๆ ทางออนไลน์ได้ - ระบุขนาดของแกดเจ็ต เลือกจากการตั้งค่าที่มี แล้วคลิกตกลง เพิ่มแกดเจ็ตแล้ว ในหน้าเว็บของคุณ
- บันทึกหน้าเว็บเพื่อดูและทดสอบแกดเจ็ตของคุณในเว็บไซต์
การทดสอบแกดเจ็ตของคุณ
หลังจากสร้างแกดเจ็ตของคุณแล้ว คุณควรทดสอบอย่างละเอียดก่อนใช้งานและอนุญาตให้ผู้อื่น ทำแบบเดียวกันนี้ ทดสอบแกดเจ็ตของคุณด้วยตนเองโดยสร้าง Google Sites ทดสอบและการฝัง แกดเจ็ตของคุณ โปรดดูขั้นตอนโดยละเอียดในส่วนการฝังแกดเจ็ตของคุณ ฟังก์ชันการทำงานและลักษณะของแกดเจ็ตของคุณขึ้นอยู่กับเว็บไซต์ที่มี ได้ ดังนั้น วิธีที่ดีที่สุดในการแก้ปัญหาแกดเจ็ตของคุณคือ การทดสอบในบริบทของ ไซต์ Google ที่แท้จริง ลองสลับใช้ธีมต่างๆ ของ Sites เพื่อให้มั่นใจว่าแกดเจ็ตของคุณแสดงอย่างถูกต้องในแต่ละธีม
ในขณะที่คุณทดสอบแกดเจ็ตของคุณ คุณอาจพบข้อบกพร่องและต้องทำการแก้ไขอย่างหลีกเลี่ยงไม่ได้ ลงในไฟล์ .xml ของแกดเจ็ต คุณควรปิดการใช้งานการแคชแกดเจ็ตขณะที่คุณ ในการปรับเปลี่ยน XML มิเช่นนั้น การเปลี่ยนแปลงของคุณจะไม่แสดงในหน้าเว็บ ข้อกำหนดของแกดเจ็ตจะถูกแคชไว้ ยกเว้นกรณีที่คุณแจ้ง Sites ว่าไม่ต้องดำเนินการ ในการข้ามแคชระหว่างการพัฒนา ให้เพิ่มค่านี้ต่อท้าย URL ของหน้าเว็บ Sites ที่มีแกดเจ็ต (ไม่ใช่ URL ของไฟล์ .xml ของข้อกำหนดแกดเจ็ต):
?nocache=1
Sites มี UI มาตรฐานสำหรับการเพิ่มและกำหนดค่าแกดเจ็ต เมื่อคุณเพิ่มแกดเจ็ต แกดเจ็ตจะแสดงตัวอย่างและแสดงพารามิเตอร์ UserPref ที่กำหนดค่าได้ ทดสอบการอัปเดตค่าการกำหนดค่าต่างๆ และ
การเพิ่มแกดเจ็ตของคุณ ลงในเว็บไซต์ทดสอบ ยืนยันว่าแกดเจ็ตของคุณทำงานตามที่คาดไว้ใน
ของเว็บไซต์นั้นเอง คุณควรทดสอบ
UserPref ทั้งหมดที่คุณกำหนดจะได้รับการกำหนดค่าอย่างถูกต้องโดยผู้ดูแลระบบเว็บไซต์
จากนั้น โปรดดูที่ส่วนการเตรียมพร้อมสำหรับการเผยแพร่ของการเผยแพร่แกดเจ็ตของคุณสำหรับการทดสอบอื่นๆ ที่จะดำเนินการต่อ
การอนุญาตการกำหนดค่าผู้ใช้ขั้นสูง
แกดเจ็ตทั้งหมดอาจมอบความสามารถในการตั้งค่ากำหนดของผู้ใช้ขั้นพื้นฐาน โดยดำเนินการผ่านส่วน UserPref ของไฟล์ข้อมูลจำเพาะของแกดเจ็ต ตามปกติแล้ว การตั้งค่าเหล่านี้จะมีผลต่อขนาด แถบเลื่อน ขอบ ชื่อ และการตั้งค่าเฉพาะแกดเจ็ต ดังที่แสดงในภาพหน้าจอที่นี่:
แต่มีหลายกรณีที่แกดเจ็ตได้รับประโยชน์จากค่ากำหนดขั้นสูงมากกว่าคอมโพเนนต์ UserPref มาตรฐาน ค่ากำหนดมักต้องมีฟีเจอร์ต่างๆ เช่น ตรรกะทางธุรกิจที่กำหนดเอง การตรวจสอบ หรือเครื่องมือเลือก อินเทอร์เฟซที่สร้างจากส่วน UserPref ของแกดเจ็ตสนับสนุนประเภทข้อมูลที่จำกัด (สตริง, enum เป็นต้น) ดังนั้นจึงไม่สามารถตรวจสอบความถูกต้องของอินพุต เช่น URL หรือวันที่ได้
นอกจากนี้ ในคอนเทนเนอร์อย่าง iGoogle ซึ่งเครื่องมือดูและตัวแก้ไขเหมือนกัน ผู้เขียนแกดเจ็ตจะสามารถขยายการกำหนดค่าให้เป็นส่วนหนึ่งของมุมมองมาตรฐานได้ ใน Sites ผู้ดูไม่ใช่ผู้แก้ไขเสมอไป ดังนั้นผู้เขียนแกดเจ็ตไม่สามารถรับประกันได้ว่าผู้ใช้ที่ดูจะสามารถเข้าถึงค่ากำหนดการอัปเดตได้ คอนเทนเนอร์โซเชียล เช่น Sites จะอนุญาตให้ผู้ใช้แก้ไขค่ากำหนดไม่ได้ มีเพียงผู้เขียนเท่านั้น
ใน Sites อินเทอร์เฟซค่ากำหนดแกดเจ็ตพื้นฐานที่สร้างโดย 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>
คุณสามารถค้นหาตัวอย่างนี้และแกดเจ็ตเฉพาะ Sites อื่นๆ พร้อมมุมมองการกำหนดค่าได้ที่นี่
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 ได้อย่างลงตัว โปรดดู ภาพรวมแกดเจ็ต สำหรับรายละเอียดในการสร้างแกดเจ็ต ส่วนที่เหลือของ ส่วนนี้จะมีหลักเกณฑ์เฉพาะสำหรับแกดเจ็ตของ Sites
- โปรดอย่าใส่ข้อมูลที่ละเอียดอ่อนในข้อมูลจำเพาะหรือชื่อแกดเจ็ต เนื่องจากผู้ใช้ทั่วไปจะสามารถมองเห็นแกดเจ็ตของคุณได้ เช่น อย่าใส่ชื่อโปรเจ็กต์ภายใน
- หากต้องการลดการเปิดเผยแกดเจ็ตของคุณ โปรดอย่าส่งแกดเจ็ตนั้นไปยังไดเรกทอรีแกดเจ็ตของ iGoogle หรือบริการแสดงรายการสาธารณะอื่นๆ แต่ให้ผู้ใช้ทุกคนใส่ข้อมูลด้วย URL เท่านั้น นอกจากนี้ คุณสามารถสร้างแกดเจ็ตประเภท URL (แทนที่จะเป็นประเภท HTML ทั่วไปที่มีเนื้อหาทั้งหมด) ที่เรียกเพียงไฟล์อื่นสำหรับเนื้อหา เมื่อใช้ตัวเลือกส่งผ่านนี้ ระบบจะแสดงเฉพาะ URL ของไฟล์ที่สองเท่านั้น โปรดดูที่การเลือกส่วนประเภทเนื้อหาของความรู้พื้นฐานสำหรับนักพัฒนาซอฟต์แวร์ เพื่อดูความแตกต่างระหว่างแกดเจ็ต HTML และแกดเจ็ต URL และส่วนแกดเจ็ตเป็นแบบสาธารณะของการเขียนแกดเจ็ตของคุณเองสำหรับวิธีอื่นๆ ในการมาสก์แกดเจ็ตของคุณ
- ที่สำคัญที่สุด ทดสอบแกดเจ็ตของคุณบนไซต์ต่างๆ จำนวนมาก แก้ไขสีพื้นหลัง สีข้อความ และแบบอักษรของเว็บไซต์ เพื่อให้แกดเจ็ตของคุณกลมกลืนไปกับเทมเพลตที่หลากหลาย