AMP

Füge Inhalte von Drittanbietern hinzu

Erfahre, wie du Komponenten von Drittanbietern in deine Seiten aufnimmst.

Einen Tweet einbetten

Bette mithilfe des Elements amp-twitter einen Tweet von Twitter in deine Seite ein.

Um einen Tweet in deine Seite einzubetten, binde zunächst das folgende Skript in <head> ein:

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

Tweets werden derzeit automatisch proportional skaliert, damit sie zur angegebenen Größe passen. Damit erreichst du aber eventuell nicht deine ideale Darstellung. Passe die angegebene Breite und Höhe manuell an oder verwende das Attribut "media", um das Seitenverhältnis auf Basis der Bildschirmbreite auszuwählen.

<amp-twitter
  width="500"
  height="583"
  layout="responsive"
  data-tweetid="638793490521001985"
>
</amp-twitter>
Dieses Snippet im Playground öffnen

TIPP: Mehr Beispiele für amp-twitter findest du bei Beispiele für AMP.

Bild aus Instagram einbetten

Bette mithilfe des Elements amp-instagram Bild aus Instagram in deine Seite ein.

Um einen Beitrag aus Instagram in deine Seite einzubetten, binde zunächst das folgende Skript in <head> ein:

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

Füge den Instagram "data-shortcode" aus der Instagram Foto URL hinzu. In https://instagram.com/p/fBwFP ist der Wert von "data-shortcode" beispielsweise fBwFP . Außerdem verwendet Instagram ein festes Seitenverhältnis für responsive Layouts, sodass der Wert für Breite und Höhe universell sein sollte.

<amp-instagram
  data-shortcode="fBwFP"
  width="320"
  height="392"
  layout="responsive"
>
</amp-instagram>
Dieses Snippet im Playground öffnen

TIPP: Mehr Beispiele für amp-instagram findest du bei AMP By Example.

Beitrag oder Video aus Facebook anzeigen

Zeige mit dem Element amp-facebook einen Beitrag oder ein Video aus Facebook auf deiner Seite an.

Binde das folgende Skript in <head> ein:

<script async custom-element="amp-facebook"
  src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
Beispiel: Einbetten eines Beitrags

Quellcode:

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

Vorschau:

Beispiel: Einbetten eines Videos

Quellcode:

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

Vorschau:

TIPP: Mehr Beispiele für amp-facebook findest du bei AMP By Example.

YouTube Video einbetten

Bette mithilfe des Elements amp-youtube ein Youtube Video in deine Seite ein.

Binde das folgende Skript in <head> ein:

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

Die YouTube data-videoid findest du in jeder URL für eine YouTube Videoseite. In https://www.youtube.com/watch?v=Z1q71gFeRqM ist die Video ID beispielsweise Z1q71gFeRqM.

Verwende layout="responsive", um korrekte Layouts für Videos mit einem Seitenverhältnis von 16:9 zu erreichen:

<amp-youtube
  data-videoid="lBTCB7yLs8Y"
  layout="responsive"
  width="560"
  height="315"
>
</amp-youtube>
Dieses Snippet im Playground öffnen

TIPP: Mehr Beispiele für amp-youtube findest du bei AMP By Example.

Eine Ad anzeigen

Zeige mit dem Element amp-ad eine Ad auf deiner Seite an. Es werden nur Ads unterstützt, die über HTTPS bereitgestellt werden.

Innerhalb des AMP Dokuments darf kein vom Werbenetzwerk bereitgestelltes JavaScript ausgeführt werden. Stattdessen lädt die AMP Runtime ein iframe aus einer anderen Quelle (über die iframe Sandbox) und führt das JS des Werbenetzwerks in dieser iframe Sandbox aus.

Du musst die Breite und Höhe der Ad sowie den Typ des Werbenetzwerks angeben. type identifiziert das Template des Werbenetzwerks. Unterschiedliche Typen von Ads erfordern unterschiedliche data-* Attribute.

<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>
Dieses Snippet im Playground öffnen

Wenn das Werbenetzwerk dies unterstützt, füge einen placeholder hinzu, der angezeigt wird, wenn keine Ad verfügbar ist:

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>
Dieses Snippet im Playground öffnen

AMP unterstützt eine Vielzahl von Werbenetzwerken. Eine vollständige Liste findest du bei amp-ad.

ERFAHRE MEHR: Mehr Infos über Ads findest du im Leitfaden zur Bereitstellung von Ads in AMP.