การฝังข้อมูลจากแหล่งภายนอก (Embed Code)
  • By Admin
  • 194
  • 25 ก.พ. 2569

การฝังข้อมูลจากแหล่งภายนอก (Embed Code)

ยกระดับเว็บไซต์ด้วยการใช้เครื่องมือ Embed Code ฝังวิดีโอจาก YouTube, แผนที่ Google Maps และไฟล์จาก Google Drive ลงบนหน้าเว็บ

🌐 Module 6: การฝังข้อมูลจากแหล่งภายนอก

ยกระดับหน้าเว็บด้วย Embed Code, YouTube และ Google Maps

1. Embed Code คืออะไร?

การ "ฝัง (Embed)" หรือการใช้ iframe คือการเจาะหน้าต่างเล็กๆ บนเว็บไซต์ของเรา เพื่อดึงข้อมูลจากเว็บไซต์อื่นมาแสดงผลครับ เช่น แทนที่เราจะแปะแค่ลิงก์ให้คนกดออกไปดูวิดีโอที่ YouTube เราก็ดึงวิดีโอตัวนั้นมาเล่นบนเว็บของเราได้เลย! ทำให้ผู้ใช้งานไม่ต้องสลับหน้าเว็บไปมา

2. การฝัง YouTube และ Google Maps

Google Sites มีเครื่องมือสำเร็จรูปสำหรับบริการของ Google เองโดยเฉพาะ ทำให้ง่ายมากๆ ครับ:

▶️ YouTube

คลิกเมนู "YouTube" แถบด้านขวา ค้นหาชื่อวิดีโอ หรือวางลิงก์ (URL) ของวิดีโอที่เกี่ยวข้องกับเนื้อหา แล้วกดเลือกได้เลย

🗺️ Google Maps

คลิกเมนู "แผนที่ (Map)" พิมพ์ชื่อสถานที่ (เช่น ชื่อโรงเรียน หรือสถานที่ท่องเที่ยวในโครงงาน) จากนั้นกดเลือก แผนที่จะแสดงผลแบบให้ผู้ใช้ซูมเข้า-ออกได้จริง!

3. การฝังไฟล์จาก Google Drive (ข้อควรระวังสำคัญ!)

เราสามารถฝังไฟล์สไลด์ (Google Slides) หรือเอกสาร (Google Docs) ลงในเว็บได้โดยตรงจากเมนู "ไดรฟ์ (Drive)"

⚠️ ข้อควรระวังระดับ 5 ดาว:

ก่อนจะนำไฟล์จาก Drive มาฝัง นักเรียน "ต้อง" ไปตั้งค่าสิทธิ์การแชร์ของไฟล์นั้นใน Google Drive ให้เป็น "ทุกคนที่มีลิงก์ (Anyone with the link)" ก่อนเสมอ! ไม่อย่างนั้น ผู้เข้าชมเว็บคนอื่นจะเห็นเป็นหน้าจอแจ้งเตือนว่า "ต้องขอสิทธิ์เข้าถึง"

🚩 ภารกิจ: เชื่อมต่อโลกภายนอก

ได้เวลาเสริมหล่อให้เว็บไซต์! ให้ทีมช่วยกันนำสื่อจากภายนอกมาติดลงในเว็บ

🛠 สเต็ปการทำงาน:

  1. หา 1 วิดีโอ: ค้นหาวิดีโอ YouTube ที่ช่วยอธิบายเนื้อหาโครงงานของนักเรียนให้เข้าใจง่ายขึ้น แล้วนำมา "ฝัง" ลงในหน้าเว็บ
  2. หา 1 สถานที่: หากโครงงานเกี่ยวกับสถานที่ ให้ฝังแผนที่ (Google Maps) ลงไป (หรือฝังแผนที่โรงเรียนในหน้า "ผู้จัดทำ" ก็ได้ครับ)
  3. ทดสอบไฟล์ Drive: ลองฝังสไลด์นำเสนอ หรือเอกสาร แล้วให้เพื่อนในกลุ่มทดลองเข้าเว็บด้วยโหมดไม่ระบุตัวตน (Incognito) เพื่อเช็คว่าลืมปลดล็อกสิทธิ์ "ทุกคนที่มีลิงก์" หรือเปล่า

✍️ แบบทดสอบประเมินตนเอง (Module 6)

ทดสอบความเข้าใจเรื่องการนำเข้าข้อมูลภายนอก

ข้อที่ 1: คำสั่ง "ฝัง (Embed)" ใน Google Sites ทำหน้าที่หลักคืออะไร?

ข้อที่ 2: หากเราฝังวิดีโอจาก YouTube ลงในเว็บไซต์ของเรา แล้ววันต่อมาเจ้าของวิดีโอใน YouTube ตัดสินใจ "ลบ" วิดีโอนั้นทิ้ง จะเกิดอะไรขึ้นบนหน้าเว็บไซต์ของเรา?

ข้อที่ 3: ปัญหา "ผู้เข้าชมเว็บมองไม่เห็นสไลด์" มักเกิดจากการลืมทำขั้นตอนใด ก่อนที่จะฝังไฟล์ Google Slides ลงใน Google Sites?


แชร์ :

บทเรียนอื่น ๆ