تعرَّف على كيفية تضمين مكوّنات من جهات خارجية في صفحاتك.

تضمين تغريدة

يمكنك تضمين إحدى تغريدات Twitter في صفحتك باستخدام العنصر amp-twitter.

لتضمين تغريدة في صفحتك، عليك أولاً بتضمين النص البرمجي التالي في <head>:

<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>

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

Show full code

تضمين Instagram

يمكنك تضمين Instagram في صفحتك باستخدام العنصر amp-instagram.

لتضمين Instagram، عليك أولاً بتضمين النص البرمجي التالي في <head>:

<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>

يمكنك تضمين الرمز القصير لبيانات Instagram والمتوفّر في عنوان URL لصورة Instagram. على سبيل المثال، في https://instagram.com/p/fBwFP، يكون fBwFP هو الرمز القصير للبيانات. كما يستخدم Instagram أيضًا نسبة ثابتة للعرض إلى الارتفاع للتنسيقات سريعة الاستجابة، وهكذا يجب أن تكون قيمة العرض والارتفاع عامة.

Show full code

عرض مشاركة أو فيديو Facebook

يمكنك عرض مشاركة أو فيديو Facebook في صفحتك باستخدام العنصر amp-facebook.

يجب تضمين النص البرمجي التالي في <head>:

<script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
مثال - تضمين مشاركة

مصدر الرمز:

<amp-facebook width="486" height="657"
    layout="responsive"
    data-href="https://www.facebook.com/zuck/posts/10102593740125791">
</amp-facebook>

معاينة:

مثال - تضمين فيديو

مصدر الرمز:

<amp-facebook width="476" height="316"
    layout="responsive"
    data-embed-as="video"
    data-href="https://www.facebook.com/nasaearth/videos/10155187938052139">
</amp-facebook>

معاينة:

تضمين فيديو youtube

يمكنك تضمين فيديو youtube في صفحتك باستخدام العنصر amp-youtube.

يجب تضمين النص البرمجي التالي في <head>:

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

يمكن العثور على مُعرّف data-videoid لموقع Youtube في كل عنوان URL لصفحة فيديو على Youtube. فمثلاً، في https://www.youtube.com/watch?v=Z1q71gFeRqM، يكون Z1q71gFeRqM هو معرّف الفيديو.

استخدم layout="responsive" لعرض التنسيقات الصحيحة لمقاطع الفيديو بنسبة عرض إلى ارتفاع تبلغ 16:9:

Show full code

عرض أحد الإعلانات

يمكنك عرض إعلان في صفحتك باستخدام العنصر amp-ad. والإعلانات المعروضة من خلال HTTPS هي وحدها المعتمدة.

غير مسموح بتشغيل جافا سكريبت مقدمة من شبكة إعلانية داخل مستند AMP. وبدلاً من ذلك، يحمّل وقت تشغيل AMP إطار iframe من أصل مختلف (من خلال وضع حماية إطارات iframe) ويعمل على تنفيذ جافا سكريبت المقدمة من الشبكة الإعلانية داخل وضع حماية إطارات iframe هذا.

يجب تحديد عرض وارتفاع الإعلان، ونوع الشبكة الإعلانية. ويُحدد type نموذج الشبكة الإعلانية. وتتطلب أنواع الإعلانات المختلفة سمات data-* مختلفة.

Show full code

إذا كان ذلك متاحًا من الشبكة، يمكنك تضمين placeholder لعرضه إذا لم يكن الإعلان متاحًا:

Show full code

يتوافق AMP مع مجموعة كبيرة من الشبكات الإعلانية. راجع إشارة إلى قائمة كاملة.