Learn how to include third-party components in your pages.

Embed a Tweet

Embed a Tweet from Twitter in your page by using the amp-twitter element.

To embed a tweet in your page, first include the following script in the <head>:

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

Currently, tweets are automatically proportionally scaled to fit the provided size, but this may yield less than the ideal appearance. Manually tweak the provided width and height or use the media attribute to select the aspect ratio based on screen width.

Show full code

Embed an Instagram

Embed an Instagram in your page by using the amp-instagram element.

To embed an Instagram, first include the following script in the <head>:

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

Include the Instagram data-shortcode found in the Instagram photo URL. For example, in https://instagram.com/p/fBwFP, fBwFP is the data-shortcode. Also, Instagram uses a fixed aspect ratio for responsive layouts, so the value for width and height should be universal.

Show full code

Display a Facebook post or video

Display a Facebook post or video in your page by using the amp-facebook element.

You must include the following script in the <head>:

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

Source:

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

Preview:

Example: Embedding a video

Source:

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

Preview:

Embed a YouTube video

Embed a YouTube video in your page by using the amp-youtube element.

You must include the following script in the <head>:

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

The YouTube data-videoid can be found in every YouTube video page URL. For example, in https://www.youtube.com/watch?v=Z1q71gFeRqM, Z1q71gFeRqM is the video id.

Use layout="responsive" to yield correct layouts for 16:9 aspect ratio videos:

Show full code

Display an ad

Display an ad in your page by using the amp-ad element. Only ads served via HTTPS are supported.

No ad network-provided JavaScript is allowed to run inside the AMP document. Instead, the AMP runtime loads an iframe from a different origin (via iframe sandbox) and executes the ad network’s JS inside that iframe sandbox.

You must specify the ad width and height, and the ad network type. The type identifies the ad network's template. Different ad types require different data-* attributes.

Show full code

If supported by the ad network, include a placeholder to be shown if no ad is available:

Show full code

AMP supports a wide range of ad networks. See the amp-ad reference documentation for a full list.