AMP

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 ليتم عرضه في حالة عدم توفر أي إعلان:

Have a great day!
<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 للتعرف على القائمة الكاملة.

تابع القراءة – تعلم المزيد حول الإعلانات في دليل تقديم الإعلانات على AMP.