Do you build things with AMP? Fill out the AMP Developer Survey!
AMP
  • websites

amp-facebook

Introduction

The amp-facebook component allows embedding both Facebook posts and videos into AMP files.

Setup

Import the amp-facebook component

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

Basic usage

The amp-facebook component only requires the URL of the facebook post...

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

Video

Here is a sample for a Facebook video embed.

<amp-facebook width="552"
  height="310"
  layout="responsive"
  data-href="https://www.facebook.com/zuck/videos/10102509264909801/">
</amp-facebook>

Video with card

Setting data-embed-as="video" will embed the video with the accompanying card.

<amp-facebook width="552"
  height="310"
  layout="responsive"
  data-embed-as="video"
  data-href="https://www.facebook.com/zuck/videos/10102509264909801/">
</amp-facebook>

Video without card

Setting data-embed-as="post" will embed the video without the accompanying card.

<amp-facebook width="552"
  height="310"
  layout="responsive"
  data-embed-as="post"
  data-href="https://www.facebook.com/zuck/videos/10102509264909801/">
</amp-facebook>
Wünschst du eine genauere Erklärung?

Sollten die Erklärungen auf dieser Seite nicht all deine Fragen beantworten, kannst du dich gerne an andere AMP Nutzer wenden, um deinen konkreten Use Case zu besprechen.

Zu Stack Overflow wechseln
Ein Feature wurde nicht erklärt?

Das AMP Projekt ist auf deine Teilnahme und deine Beiträge angewiesen! Wir hoffen natürlich, dass du dich aktiv an unserer Open Source Community beteiligen wirst. Aber wir freuen uns auch über einmalige Beiträge zu den Themen, die dich besonders interessieren.

Beispiel auf GitHub bearbeiten