Include third-party content
تعرَّف على كيفية تضمين مكوّنات من جهات خارجية في صفحاتك.
تضمين تغريدة
يمكنك تضمين إحدى تغريدات Twitter في صفحتك باستخدام العنصر amp-twitter.
لتضمين تغريدة في صفحتك، عليك أولاً تضمين النص البرمجي التالي في <head>:
<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
يتم حاليًا تغيير أحجام التغريدات تلقائيًا بشكل نسبي لملاءمة الحجم المتوفّر، ولكن قد يؤدي هذا إلى مظهر غير مثالي. يمكنك تعديل العرض والارتفاع المقدمين يدويًا أو استخدام سمة الوسائط لتحديد نسبة العرض إلى الارتفاع بناءً على عرض الشاشة.
<amp-twitter
width="500"
height="583"
layout="responsive"
data-tweetid="638793490521001985"
>
</amp-twitter>
amp-twitter في توضيح AMP بالأمثلة. تضمين 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 أيضًا نسبة ثابتة للعرض إلى الارتفاع للتنسيقات سريعة الاستجابة، وهكذا يجب أن تكون قيمة العرض والارتفاع عامة.
<amp-instagram
data-shortcode="fBwFP"
width="320"
height="392"
layout="responsive"
>
</amp-instagram>
amp-instagram في توضيح AMP بالأمثلة. عرض مشاركة أو فيديو Facebook
يمكن عرض منشور أو فيديو Facebook في صفحتك باستخدام العنصر amp-facebook.
يجب تضمين النص البرمجي التالي في :
<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>
معاينة: {amp-facebook0} {/amp-facebook0}
amp-facebook في توضيح AMP بالأمثلة. تضمين فيديو 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:
<amp-youtube
data-videoid="lBTCB7yLs8Y"
layout="responsive"
width="560"
height="315"
>
</amp-youtube>
amp-youtube في توضيح AMP بالأمثلة. عرض أحد الإعلانات
يمكن عرض أحد الإعلانات في الصفحة باستخدام عنصر amp-ad. يتم فقط دعم الإعلانات المقدمة عن طريق HTTPS.
غير مسموح بتشغيل JavaScript مقدمة من شبكة إعلانية داخل مستند AMP. وبدلاً من ذلك، يحمّل وقت تشغيل AMP إطار iframe من أصل مختلف (من خلال وضع حماية إطارات iframe) ويعمل على تنفيذ جافا سكريبت المقدمة من الشبكة الإعلانية داخل وضع حماية إطارات iframe هذا.
يجب تحديد عرض وارتفاع الإعلان، ونوع الشبكة الإعلانية. ويُحدد type نموذج الشبكة الإعلانية. وتتطلب أنواع الإعلانات المختلفة سمات data-* مختلفة.
<amp-ad
width="300"
height="250"
type="a9"
data-amzn_assoc_ad_mode="auto"
data-divid="amzn-assoc-ad-fe746097-f142-4f8d-8dfb-45ec747632e5"
data-recomtype="async"
data-adinstanceid="fe746097-f142-4f8d-8dfb-45ec747632e5"
>
</amp-ad>
في حالة دعم ذلك من شبكة الإعلانات، فقم بتضمين placeholder ليتم عرضه في حالة عدم توفر أي إعلان:
<amp-ad
width="300"
height="250"
type="a9"
data-amzn_assoc_ad_mode="auto"
data-divid="amzn-assoc-ad-fe746097-f142-4f8d-8dfb-45ec747632e5"
data-recomtype="async"
data-adinstanceid="fe746097-f142-4f8d-8dfb-45ec747632e5"
>
<div placeholder>Have a great day!</div>
</amp-ad>
يدعم AMP مجموعة كبيرة من الشبكات. راجع amp-ad للتعرف على القائمة الكاملة.