Main Menu

8 AMP Components for Social Media Integration

The biggest conflict that Google’s mobile web standard, Accelerated Mobile Pages needs to solve is making mobile sites faster, while keeping them functional & rich in content. These days rich and engaging content can hardly be imagined without embeds from popular social media sites — tweets, videos, audios, posts, photos.

Extended AMP Components — among other great features — provide a great way to integrate AMP documents with different social content types.

How Extended AMP Components Work

At the core of AMP’s philosophy there are Google’s best performance practices. To improve page load times, the AMP standards restrict how you can use front-end technologies. For instance, you cannot use custom JavaScript, external stylesheets, and any HTML element that loads external resources, such as the <img> tag.

In exchange, you get a bunch of AMP Components you can use to display external resources, such as images, videos, audios, advertisements, etc. on your site.

AMP Components are specific HTML tags that can be used similarly to ordinary HTML tags. A few of them are built in to the AMP runtime, while the majority works as extensions. Components that makes social media integration possible on AMP pages are all extended components.

Extended AMP Components require you to import the belonging script in the <head> section of your AMP HTML document. As AMP is an open-source project, the number of extended components may grow in the future.

In this post we have collected a handful of AMP Components that can help you with social media integration. Keep in mind that the versions of the scripts may change over time, so always check out the documentation before you include them on your site.

<amp-facebook> makes it possible to embed a Facebook post or video into an AMP page.

You always need to specify the dimensions of the embedded post, which means you need to add a width and a height attribute with values in integer pixels. You can find the proper dimensions by clicking on the “Embed” menu on the top of the Facebook post.

You’re also required to add the URL of the given post in the data-href attribute. You can find the URL by clicking on the timestamp of the Facebook post, and the browser will insert the unique URL into the address bar.

If you want to embed a video without the belonging Facebook post, add the optional data-embed-as="video" attribute

If you want to make your embed responsive use the layout attribute with the "responsive" value. You can also use the optional layout attribute on any other AMP component to control its layout.

For instance, in the example below I used the Twitter API’s linkColor display option as data-link-color (its data-* format) to change the default link color to the color Hongkiat.com uses on its Twitter account.

The <amp-twitter> component is not perfect yet, Github docs says that Twitter does not currently provide an API that yields fixed aspect ratio Tweet embeds.

This means you need to manually set the width and height attributes, as the AMP runtime sometimes doesn’t display a part (usually the bottom) of the tweet.

It’s always a good idea to check how your embedded tweets look like before publishing the AMP page.

Add a Placeholder

Although it’s not required, the documentation recommends adding a placeholder in case the tweet doesn’t load at once.

The placeholder attribute can be used on each AMP component. The placeholder is shown immediately if the final resources are not available. When the AMP element loads, it hides its placeholder.

Take a look at how the above example code looks like with a placeholder. On Twitter, I simply clicked on the Embed Tweet button, copy-pasted the embeddable blockquote (without the script at the end), and added the placeholder attribute to the <blockquote> tag.

With <amp-instagram>, you can embed Instagram photos and videos into your AMP pages.

You are required to specify the dimensions of the embed with the width and height attributes, and you also have to add the identifier of the Instagram photo or video using the data-shortcode attribute.

You can find the identifier at the end of the URL, for the example for the photo below the URL is https://www.instagram.com/p/-PFt7tF8Km/, so I need to use -PFt7tF8Km as value for the data-shortcode attribute.

Display a Pin It Button

You can also add a Pin It button to your AMP page with the help of the <amp-pinterest> component. Apart from the width and height dimensions, you’re required to specify four attributes in order to embed the Pin It button:

data-do="buttonPin" to let the AMP runtime know that this will be a Pin It button

data-url with the URL you want share

data-media with the absolute URL of the image you want users to pin

data-description with the description you want to appear in the Pin create form

There are many different button sizes, to choose from, check the docs for all sizes available.

Code example:

In this example, I created a Pin It button that would allow users to pin an image from this former Hongkiat.com post. I used the small rectangular button size.

Note that you need to use additional CSS to display the Pin It button on top of the image.

You can also create a Pinterest Follow button by using the data-do="buttonFollow" attribute, and specifying the name you want to display inside the Follow button in the data-label & the URL of your account in the data-href attribute.

SoundCloud is a popular audio distribution platform where users can share their music. With the help of the <amp-soundcloud> component you can play SoundCloud tracks right from your AMP HTML page.

This component can only be used with fixed-height layout which means you only need to specify the height, and the width will be calculated by the AMP runtime. As a result the embedded SoundCloud audio player will fill all the available horizontal space.

The <amp-soundcloud> component can be displayed in either classic or visual mode. You can choose from the two modes by setting the value of the data-visual attribute to either true or false (the default is false).

In both modes, you have to use the data-trackid attribute to specify the identifier of the audio; you can find the audio ID by clicking the Share button below the audio player on SoundCloud.com, and looking up the long-form URL inside the Embed code.

Classic Mode

The Classic Mode displays a small thumbnail image on the left, and the audio player on the right. You can get the proper value for the height attribute from the Embed code on SoundCloud.com.

In Classic Mode, you can specify the color of the audio player if you want using the data-color attribute (you cannot do this in Visual Mode).

Vine is a short-form video sharing site on which you can share 6-second long videos with your friends. The <amp-vine> component makes it possible to easily embed Vine videos into your AMP HTML pages.

This AMP component is quite simple, you only need to add the dimensions, and the ID of the Vine video in the data-vineid attribute. You can get the ID from the URL of each Vine.

As Vines are squares, if you use the responsive layout, the same rule applies as with Instagram embeds; you can add any value to the width and height attributes, until they’re equal they’ll properly work.

The Github examples show different ways to embed Youtube videos on Accelerated Mobile Pages.

Other Video Sharing Services

AMP also has components related to other video sharing services, that work similarly to <amp-youtube>. You can use the following extended AMP components for video embeds from providers other than YouTube:

Apart from social media embeds, you can also display social share buttons on your AMP pages by using the <amp-social-share> component.

The social share feature is preconfigured for some providers, but with the right settings you can use the <amp-social-share> component for any other social share buttons.

Pre-Configured Share Buttons

Pre-configured share buttons don’t require too many settings; you have to define the width (default is 60px) and height (default is 44px) attributes, and the name of the social media provider in the type attribute.

With Facebook, you’re also required to specify the Facebook app id in the data-param-app_id attribute.

The pre-configurationmakes assumptions that the URL you want to share is the canonical URL of the current page, and the text you want to include in your share is the page title.

If you want to use another config, you can do that with the following three optional attributes:

data-text for the text you want to include in the share

data-url for the URL you want to share

data-attribution for the name of the person or provider you want your share to be attributed to

Unconfigured Share Buttons

To display social share buttons of unconfigured providers, such as WhatsApp, you need to specify the custom protocol of the provider in the data-share-endpoint attribute. Check out in the docs how you can do this.