اكتشاف رمز المشاركة برمجيًا مع oEmbed

نشرت: 2022-03-10

ملخص سريع ↬ استضافت العديد من المواقع وسائط ومحتوى يمكن مشاركته في مكان آخر باستخدام بعض تعليمات HTML البرمجية المضمنة. ماذا يحدث إذا كان لديك فقط عنوان URL للعنصر وتحتاج إلى العثور على نسخة قابلة للتضمين من الوسائط دون تدخل بشري؟ هذا هو المكان الذي يأتي فيه أومبيد.

الويب مليء بالخدمات التي تستضيف محتوى ثريًا مثل مقاطع الفيديو والصور والموسيقى والبودكاست والخرائط والرسوم البيانية وجميع أنواع المسرات المختلفة. هناك احتمالات ، عندما تضيف المحتوى الخاص بك إلى موقع ما ، فإنه سيوفر لك طريقة لتضمين هذا المحتوى في صفحة ويب في مكان آخر.

تحتوي مواقع مثل 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 واستخدام واجهات برمجة التطبيقات الخاصة بهم لجلب نسخ لطيفة من الصور الفوتوغرافية. ونفس الشيء بالنسبة للتويتر والتغريدات. لكن هذا يبدو وكأنه الكثير من العمل!

ما سيكون مثاليًا هو وجود طريقة معيارية للانتقال من عنوان URL لجزء من المحتوى إلى كتلة من التعليمات البرمجية المضمنة لإظهار ذلك المحتوى على الصفحة. إذا كنت منتبهًا ، ستدرك أن الإجابة على ذلك هي فكرة جيدة.

أصل أومبيد

كانت هذه بالضبط هي المشكلة التي واجهتها Leah Culver أثناء العمل على Pownce (موقع تواصل اجتماعي مبتكر حقًا كان Betamax إلى Twitter VHS). أراد Pownce تضمين تمثيلات غنية للمحتوى في دفق تحديث المستخدم ، لكنه لم يرغب في قصر الدعم على الخدمات التي قاموا بكتابة التعليمات البرمجية خصيصًا للتكامل معها. في العشاء مع الزميل مايك مالون ، وكذلك كال هندرسون (الذي قاد الهندسة في Flickr - أحد المزودين الرئيسيين لمثل هذا المحتوى في ذلك الوقت) وريتشارد كراولي ، قاموا معًا بتجميع فكرة لمعيار مفتوح للحصول على كود التضمين من عنوان URL. ذهب هندرسون بعيدًا وصاغ شيئًا بناءً على المناقشة ، وولد أومبيد.

باستخدام 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` الفائق (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 شائعة بشكل مدهش. اعثر علي مهندس خلفية واحد لم يكن بحاجة في وقت ما لبناء نوع من أنظمة إدارة المحتوى. قد لا نفكر في الأمر بنفس المصطلحات ، ولكن إذا قبلت إدخال المستخدم ، فيجب أن تفكر في ما يجب فعله إذا كان هذا الإدخال يحتوي على عناوين URL.

الآن بعد أن عرفت عن oEmbed (آسف) ، ليس لديك أي عذر لعدم إعطاء بعض الاهتمام الجاد لكيفية التعامل مع عناوين URL في مشاريعك المستقبلية.

مواصفات oEmbed
oembed لـ NodeJS
تضمين / تضمين لـ PHP
"الإعلان عن OEmbed: معيار مفتوح للمحتوى المضمن ،" ليا كولفر