ค้นหารหัสการแชร์โดยทางโปรแกรมด้วย oEmbed

เผยแพร่แล้ว: 2022-03-10

สรุปโดยย่อ ↬ ไซต์จำนวนมากมีสื่อและเนื้อหาที่สามารถแชร์ที่อื่นได้โดยใช้โค้ดสำหรับฝัง HTML จะเกิดอะไรขึ้นหากคุณมี URL ของรายการและต้องการค้นหาสื่อในเวอร์ชันที่ฝังได้โดยไม่มีการแทรกแซงจากมนุษย์ นั่นคือที่มาของ oEmbed

เว็บเต็มไปด้วยบริการที่โฮสต์เนื้อหาที่หลากหลาย เช่น วิดีโอ รูปภาพ เพลงและพอดแคสต์ แผนที่และกราฟ และสิ่งอำนวยความสะดวกต่างๆ เป็นไปได้ว่าเมื่อคุณเพิ่มเนื้อหาของคุณลงในไซต์ มันจะเสนอวิธีการฝังเนื้อหานั้นในหน้าเว็บที่อื่น

ไซต์เช่น YouTube มีโปรแกรมเล่นแบบฝังได้ซึ่งเป็นที่นิยมใช้ในโพสต์บล็อกและแม้แต่หน้าผลิตภัณฑ์ Soundcloud มีรหัสสำหรับการฝังเครื่องเล่นเพลงในเว็บไซต์ของวงดนตรีของคุณ ผู้ระดมทุนเพื่อการกุศลอาจอัปโหลดเส้นทางของการแข่งขันครั้งใหญ่ไปยังเว็บไซต์อย่าง Strava และต้องการแชร์บนไซต์ระดมทุนเพื่อแสดงผู้สนับสนุน

ทั้งหมดนี้ทำได้โดยการค้นหาตัวเลือก แชร์ บนไซต์ที่โฮสต์และคัดลอกโค้ดที่ปกติแล้วจะผสมระหว่าง HTML และ JavaScript รหัสดังกล่าวมักจะถูกวางลงในหน้าปลายทาง และไซต์ที่ให้บริการโฮสต์จะนำเสนอเนื้อหาที่หลากหลายเพื่อให้เพื่อน ลูกค้า และผู้ติดต่อของคุณได้เห็น

จนถึงตอนนี้ ดีมาก และครอบคลุมตัวเลือกสำหรับการฝังเนื้อหาด้วยตนเองได้ค่อนข้างดี อย่างไรก็ตาม มีกรณีการใช้งานที่สองที่ชัดเจน ซึ่งผลลัพธ์จะเหมือนกัน แต่เส้นทางไปยังมันแตกต่างกันมาก

เพิ่มเติมหลังกระโดด! อ่านต่อด้านล่าง↓

การแชร์แบบเป็นโปรแกรม

สมมติว่าคุณกำลังสร้างแอปหรือไซต์ที่ยอมรับเนื้อหาจากผู้ใช้ นั่นอาจเป็นเรื่องง่ายๆ เหมือนกับหน้าอินทราเน็ตพื้นฐานสำหรับพนักงานในการแบ่งปันข่าวสารกับเพื่อนร่วมงาน หรือบางอย่างที่ยิ่งใหญ่ เช่น เครือข่ายสังคมออนไลน์ที่ผู้คนสามารถลงทะเบียนและเริ่มโพสต์ได้

ในทั้งสองกรณี คุณต้องค้นหาว่าต้องทำอย่างไรหากผู้ใช้เพิ่ม URL เป็นส่วนหนึ่งของเนื้อหานั้น คุณสามารถจินตนาการถึงสถานการณ์สมมติได้:

 Check out this video! https://youtu.be/jw7bRnFbwAI

ณ จุดนี้ ในฐานะระบบการเผยแพร่ คุณต้องคิดให้ออกว่าต้องทำอย่างไร ตัวเลือกแรกคือไม่ต้องทำอะไรเลย และปล่อยให้ URL เป็นข้อความธรรมดา นั่นไม่ใช่แนวคิดที่ยอดเยี่ยม เนื่องจากโดยทั่วไปผู้ใช้มักจะต้องการคลิกที่ URL และข้อความธรรมดาจะไม่ช่วยให้พวกเขาไปที่หน้าอีกด้านหนึ่ง

ตัวเลือกที่สองคือเปลี่ยนเป็นลิงค์ นั่นเป็นขั้นตอนต่อไปที่ดี เนื่องจากผู้ใช้สามารถติดตามลิงก์และไปที่เนื้อหาได้ แต่ในการทำเช่นนั้น พวกเขาออกจากเว็บไซต์ของคุณและอาจไม่กลับมาอีกในทันที

ประสบการณ์การใช้งานที่ดีที่สุดคือสามารถดึงโปรแกรมเล่นสำหรับเนื้อหานั้นและฝังไว้ที่นั่นแทนที่จะเป็นเพียง URL ซึ่งจะทำให้ผู้ใช้ได้สัมผัสกับเนื้อหาภายในไซต์ของคุณโดยตรง เหมือนกับที่พวกเขาทำบน Facebook เป็นต้น

สิ่งนี้ทำให้เกิดปัญหา ระบุ URL ฉันจะเปลี่ยนเป็นโค้ดฝัง HTML/JavaScript ที่จำเป็นเพื่อแสดงให้ผู้เล่นหลายคนแสดงบนหน้าเว็บได้อย่างไร

หากเป็นเว็บไซต์ที่เป็นที่รู้จักอย่าง YouTube ฉันสามารถเขียนโค้ดที่ใช้ YouTube API เพื่อดึงข้อมูลวิดีโอ และรับหรือสร้างโค้ดสำหรับฝังด้วยวิธีนั้น ฉันสามารถทำเช่นเดียวกันกับบริการวิดีโออื่นๆ เช่น Vimeo และ VIVO ฉันสามารถเขียนโค้ดเพื่อจดจำ URL ของ Flickr และ Instagram และใช้ API ของพวกมันเพื่อดึงรูปภาพเวอร์ชันที่ฝังได้อย่างสวยงาม และเช่นเดียวกันสำหรับ Twitter และทวีต แต่ฟังดูเหมือนงานเยอะ!

ทางที่ดีที่สุดคือหากมีวิธีการที่เป็นมาตรฐานในการรับจาก URL ของเนื้อหาไปยังบล็อกของโค้ดฝังเพื่อแสดงเนื้อหานั้นบนหน้าเว็บ หากคุณให้ความสนใจ คุณจะรู้ว่าคำตอบนั้นคือ oEmbed

ที่มาของ oEmbed

นี่เป็นปัญหาที่ Leah Culver มีในขณะที่ทำงานกับ Pownce (ไซต์เครือข่ายสังคมที่เป็นนวัตกรรมอย่างแท้จริงซึ่งเป็น Betamax ไปยัง VHS ของ Twitter) Pownce ต้องการฝังการแสดงเนื้อหาที่หลากหลายลงในสตรีมอัปเดตของผู้ใช้ แต่ไม่ต้องการจำกัดการสนับสนุนเฉพาะบริการที่พวกเขาเขียนโค้ดโดยเฉพาะเพื่อรวมเข้าด้วยกัน ระหว่างรับประทานอาหารค่ำกับเพื่อนร่วมงาน ไมค์ มาโลน และแคล เฮนเดอร์สัน (ผู้นำด้านวิศวกรรมที่ Flickr ซึ่งเป็นหนึ่งในผู้ให้บริการรายใหญ่ของเนื้อหาดังกล่าวในขณะนั้น) และริชาร์ด โครว์ลีย์ พวกเขาร่วมกันขุดแนวคิดเกี่ยวกับมาตรฐานเปิดสำหรับการรับโค้ดฝังตัวจาก URL เฮนเดอร์สันจากไปและร่างบางอย่างขึ้นจากการสนทนา และ oEmbed ก็ถือกำเนิดขึ้น

การใช้ oEmbed

นี่คือวิธีการทำงาน

เริ่มต้นด้วย URL ที่ชี้ไปยังรายการเนื้อหาเดียว นั่นอาจเป็นวิดีโอ YouTube รูปภาพหรืออะไรก็ตาม โดยปกติแล้ว ผู้ใช้ไซต์หรือแอปของคุณจะจัดเตรียมข้อมูลนี้โดยเป็นส่วนหนึ่งของเนื้อหาบางส่วนที่พวกเขาต้องการเผยแพร่ ขั้นตอนแรกคือการดึงเนื้อหาของเพจที่ URL นั้น ซึ่งควรเป็นหน้า HTML

หากไซต์ที่โฮสต์เนื้อหารองรับ oEmbed ในส่วน <head> ของหน้านั้นควรมีองค์ประกอบ link ที่มีประเภทเนื้อหา oembed :

 <link rel="alternate" type="application/json+oembed" href="https://youtube.com/oembed?url=https%3A%2F%2Fyoutu.be%2Fjw7bRnFbwAI&format=json" title="Inclusive Components with Heydon Pickering" />

หมายเหตุเกี่ยวกับ XML: oEmbed รองรับการตอบสนองทั้งในรูปแบบ XML และ JSON สำหรับบทความนี้ ฉันกำลังพิจารณา JSON เท่านั้น เพราะเราไม่ใช่คนป่าเถื่อน หากคุณอยู่ในตำแหน่งที่โชคร้ายที่ต้องทำงานกับ XML โปรดทราบว่ารูปแบบนี้รองรับกับข้อกำหนด oEmbed แม้ว่าคุณอาจพบว่าผู้ให้บริการบางรายเสนอเฉพาะการตอบกลับ JSON เท่านั้น

แท็กลิงก์นี้เป็นแอตทริบิวต์ rel ที่ตั้งค่าเป็น alternate และ type ตั้งค่าเป็น application/json+oembed หรือ text/xml+oembed คุณลักษณะนี้ทำให้เราทราบว่า URL ที่ระบุใน href เป็นปลายทาง oEmbed API สำหรับการดึงรายละเอียดของเนื้อหา

URL นั้นมักจะมีสองพารามิเตอร์: url และ format

พารามิเตอร์	ค่า
`url` (จำเป็น)	ที่อยู่เว็บที่เข้ารหัส URL ของรายการเนื้อหา
`format`	รูปแบบที่คุณต้องการตอบกลับ หนึ่งใน `json` หรือ `xml`

พารามิเตอร์ URL ทั่วไปสำหรับคำขอผู้บริโภคเริ่มต้น

ข้อมูลจำเพาะฉบับเต็มมีรายละเอียดมากขึ้นที่นี่ (และคุณควรอ้างอิงว่าหากสร้างการใช้งานของคุณเอง) แต่นี่คือสองพารามิเตอร์ที่คุณน่าจะเห็นมากที่สุด

ดังนั้นเราจึงมี URL ดึงหน้า พบแท็กลิงก์ oEmbed ที่มี URL อื่นสำหรับปลายทาง API ต่อไป เราขอ URL ใหม่นั้น และส่งคืนข้อมูลทั้งหมดที่บริการมีให้เกี่ยวกับเนื้อหาชิ้นนั้น

 { "author_name": "Smashing Magazine", "width": 480, "title": "Smashing TV: Inclusive Components with Heydon Pickering (Nov 7th 2019)", "provider_name": "YouTube", "height": 270, "html": "<iframe width=\"480\" height=\"270\" src=\"https://www.youtube.com/embed/jw7bRnFbwAI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>", "provider_url": "https://www.youtube.com/", "thumbnail_url": "https://i.ytimg.com/vi/jw7bRnFbwAI/hqdefault.jpg", "type": "video", "thumbnail_height": 360, "author_url": "https://www.youtube.com/channel/UCSDtqcJ8ZXviPrEcj1vuLiQ", "version": "1.0", "thumbnail_width": 480 }

ตอนนี้เรากำลังพูดถึง! คำตอบทำให้เราได้ข้อมูลมากมายเกี่ยวกับเนื้อหา version ในอนาคตอันใกล้ควรเป็น 1.0 ซึ่งเป็นเวอร์ชันปัจจุบันของข้อมูลจำเพาะ oEmbed ข้อมูลอื่นๆ ที่ส่งคืนขึ้นอยู่กับค่าของ type เป็นส่วนใหญ่

ประเภทการตอบกลับ

ค่าของคีย์ type ในการตอบกลับจะบอกคุณว่าคุณต้องการฝังสื่อประเภทใด

มูลค่า `type`	คาดหวังอะไร
`photo`	รูปภาพนิ่งที่มี `url` `width` และ `height` ที่สามารถใช้สำหรับแท็ก `img` พื้นฐาน
`video`	โปรแกรมเล่นวิดีโอที่มี `html` ระบุรหัสที่จำเป็นสำหรับการฝังโปรแกรมเล่นบนหน้าเว็บ แม้ว่าจะมี `width` และ `height`
`link`	วิธีที่ดีที่สุดในการจัดการกับเนื้อหานี้คือการให้ลิงก์หลังจากทั้งหมด คำตอบอาจมีข้อมูลที่เป็นประโยชน์อื่นๆ เช่น ชื่อ แต่ควรเชื่อมโยงเข้าด้วยกัน
`rich`	โปรแกรมเล่นเนื้อหาที่หลากหลายซึ่งเหมือนกับประเภทวิดีโอส่งคืน `html` , `width` และ `height`

นอกจากเนื้อหาวิดีโอโดยเฉพาะแล้ว ประเภททั่วไปที่คุณน่าจะเห็นในป่ายังมีเนื้อหา rich แม้แต่ Flickr เองในขณะที่ยังคงส่งการตอบกลับ photo ก็ยังให้ html สำหรับ 'ผู้เล่น' ที่ฝังไว้สำหรับรูปภาพด้วยเช่นกัน

โดยส่วนใหญ่ การฝังเนื้อหาในไซต์ของคุณเป็นเพียงกรณีของการใช้โค้ดที่ให้ไว้เป็นค่า html

หมายเหตุเกี่ยวกับความปลอดภัย

สิ่งหนึ่งที่คุณอาจระมัดระวังอย่างเหมาะสมก็คือการตอบกลับ HTML และฝังไว้ในหน้าเว็บที่คุณโฮสต์โดยทางโปรแกรม หากไม่มีขั้นตอนของมนุษย์ในการตรวจสอบโค้ดที่คุณวางซ้ำอีกครั้ง โค้ดนั้นก็อาจเป็นอันตรายได้เสมอ ดังนั้นคุณควรดำเนินการตามขั้นตอนที่เหมาะสมเพื่อลดความเสี่ยง

ซึ่งอาจรวมถึงการกรอง URL เพื่อให้แน่ใจว่าแบบแผนและโดเมนตรงกับที่คาดไว้ และโค้ดแซนด์บ็อกซ์ลงใน iframe บนโดเมนอื่นที่ไม่มีคุกกี้ คุณควรเข้าถึงสถานการณ์ที่คุณกำลังใช้รหัส และตรวจสอบให้แน่ใจว่าคุณไม่ได้เปิดเผยตัวตนของคุณต่อความเสี่ยงที่เกินควร

เริ่มต้น

สิ่งสำคัญคือการเข้าใจกระบวนการเมื่อใช้ oEmbed ความจริงก็คือภาษาทั่วไปส่วนใหญ่มีไลบรารีที่พร้อมใช้งานซึ่งแยกกระบวนการออกและทำให้ค่อนข้างง่าย

ตัวอย่างเช่น npm packaged oembed จัดเตรียมอินเทอร์เฟซที่ง่ายมากสำหรับการร้องขอตาม URL ของเนื้อหาและรับการตอบกลับ oEmbed กลับมา

ขั้นแรกให้ติดตั้งแพ็คเกจในโครงการของคุณ:

 npm i oembed

แล้วขอ URL ฉันใช้ URL ของงานนำเสนอใน Notist ที่ฉันให้ไว้เกี่ยวกับ oEmbed เมต้ามากขนาดไหน

 const oembed = require('oembed'); const url = 'https://noti.st/drewm/ZOFFfI'; oembed.fetch(url, { maxwidth: 1920 }, function(error, result) { if (error) console.error(error); else console.log("oEmbed result", result); });

และคำตอบ:

 { type: 'rich', version: '1.0', title: 'Understanding oEmbed', author_name: 'Drew McLellan', author_url: 'https://noti.st/drewm', provider_name: 'Notist', provider_url: 'https://noti.st', cache_age: 604800, thumbnail_url: 'https://on.notist.cloud/slides/deck4179/large-0.png', thumbnail_width: 1600, thumbnail_height: 900, html: '<p data-notist="drewm/ZOFFfI">View <a href="https://noti.st/drewm/ZOFFfI">Understanding oEmbed</a> on Notist.</p><script async src="https://on.notist.cloud/embed/002.js"></script>', width: 960, height: 540 }

หากคุณต้องการทำเช่นเดียวกันใน PHP คุณสามารถติดตั้งแพ็คเกจที่ใช้งานสะดวกที่เรียกว่า embed/embed ผ่าน Composer

 composer require embed/embed

จากนั้นในโครงการ PHP ของคุณ:

 use Embed\Embed; $info = Embed::create('https://noti.st/drewm/ZOFFfI'); $info->title; // "Understanding oEmbed" $info->authorName; // "Drew McLellan $info->code; // "<p data-notist="drewm/ZOFFfI"> ... </script>"

อย่างที่คุณเห็น ด้วยการใช้ไลบรารี กระบวนการจะกลายเป็นเรื่องง่ายมาก และคุณสามารถรับจาก URL ไปยังโค้ดฝังตัวได้อย่างรวดเร็ว พร้อมที่จะแสดงการนำเสนอเนื้อหาของผู้ใช้ที่หลากหลาย

บทสรุป

oEmbed เป็นวิธีแก้ปัญหาที่หรูหรามากสำหรับปัญหาที่เฉพาะเจาะจงมาก คุณจะได้รับการอภัยเพราะคิดว่ามีวิศวกรเพียงไม่กี่คนที่ทำงานในเครือข่ายโซเชียลขนาดใหญ่เท่านั้นที่จะได้รับประโยชน์จากสิ่งนี้ แต่ในความเป็นจริง ระบบการเผยแพร่ที่ผู้ใช้อาจป้อน URL นั้นเป็นเรื่องปกติธรรมดาอย่างน่าประหลาดใจ หาวิศวกรส่วนหลังสักคนหนึ่งที่ไม่จำเป็นต้องสร้าง CMS บางประเภทให้ฉัน เราอาจไม่ได้คิดในแง่เดียวกัน แต่ถ้าคุณยอมรับอินพุตของผู้ใช้ คุณควรคิดว่าจะทำอย่างไรถ้าอินพุตนั้นมี URL

ตอนนี้คุณรู้เกี่ยวกับ oEmbed แล้ว (ขออภัย) คุณไม่มีข้อแก้ตัวที่จะไม่พิจารณาวิธีจัดการ URL ในโครงการในอนาคตของคุณอย่างจริงจัง

oEmbed ข้อมูลจำเพาะ
oembed สำหรับ NodeJS
ฝัง/ฝังสำหรับ PHP
“ประกาศ OEmbed: มาตรฐานเปิดสำหรับเนื้อหาแบบฝัง” Leah Culver