Using social media in AMP pages

We saw earlier how to embed video content in our AMP pages. We can also embed video content (as well as non-video content) hosted on popular social media platforms, such as Facebook, Twitter, and Instagram too.

Facebook

Import the amp-facebook component with:

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

Then embed a Facebook post with the following code, copying the URL from the Facebook post page. In the case of videos, you can find the width and height of the video from the Options | Embed dialog accessed from the Facebook video post.

<amp-facebook width="560" 
              height="315" 
              layout="responsive"
              data-embed-as="video"
              data-href=
"https://facebook.com/FirstMediaBlossom/videos/10154760841464586">
</amp-facebook>

Note the data-embed-as attribute. When a Facebook video post is embedded with this data-embed-as="video" value...