8 AMP Components for Social Media Integration

By . in Mobile. Updated on .

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.

Read Also:  Beginner’s Guide to Accelerated Mobile Pages (AMP)

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.

Read Also:  Top 10 Essential AMP Components for Mobile Optimization

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.

1. amp-facebook

<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.

Code example:

<amp-facebook width="500" height="485" layout="responsive"
    data-href="https://www.facebook.com/hongkiatcom/posts/10154256404668592">
</amp-facebook>

Code preview:

AMP Example Facebook

Script to include:

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

Here’s a look at a working example on how to use <amp-facebook> on a complete AMP HTML page.

2. amp-twitter

You can embed tweets into AMP pages by using the <amp-twitter> component.

To do so, you need to specify the ID of the tweet in the data-tweetid attribute. You can modify how the tweet is displayed by adding any of the display options of the Twitter APi as a data-* HTML5 attribute.

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.

Code example:

<amp-twitter width="506" height="338" layout="responsive"
    data-tweetid="765234426166915072" data-link-color="#698aba">
</amp-twitter>

Code preview:

AMP Twitter Example

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.

Code example with placeholder:

<amp-twitter width="506" height="338" layout="responsive"
  data-tweetid="765234426166915072" data-link-color="#698aba">
  <blockquote placeholder class="twitter-tweet" data-lang="en">
    <p lang="en" dir="ltr">How to Validate Accelerated Mobile Pages
      (<a href="https://twitter.com/hashtag/AMP?src=hash">#AMP</a>)
      <a href="https://twitter.com/hashtag/google?src=hash">#google</a>
      <a href="https://twitter.com/hashtag/seo?src=hash">#seo</a>
      <a href="https://t.co/eVOSAtr5Ax">https://t.co/eVOSAtr5Ax</a>
    </p>
    — Hongkiat (@hongkiat)
      <a href="https://twitter.com/hongkiat/status/765234426166915072">
        August 15, 2016</a>
  </blockquote>
</amp-twitter>

Script to include:

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

Check out an example of a full HTML AMP page using the <amp-twitter> component.

3. amp-instagram

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.

Code example:

<amp-instagram data-shortcode="-PFt7tF8Km"
    width="400" height="400" layout="responsive">
</amp-instagram>

Code preview:

AMP Instagram Example

For responsive layouts, AMP automatically calculates the required space which also includes the “Instagram chrome” (account name, date, number of likes, etc).

This means you can use any value for width and height, until the two values are equal (Instagram photos are usually square), as the AMP runtime will resize the image according to the available space.

If the photo doesn’t happen to be a square, you have to specify its actual width and height values.

For fixed layouts, you need to include the extra space (top and bottom: +48 px, left and right: +8px) needed for the Instagram chrome when you calculate the image dimensions.

Script to include:

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

Check out full AMP HTML page examples on how to use the <amp-instagram> component.

4. amp-pinterest

<amp-pinterest> allows you to embed either a Pin widget or a Pin It button into an AMP HTML document.

Embed a Pin Widget

To embed a Pin widget, you have to specify the dimensions, the URL of the pin using the data-url attribute, and you also need to add the data-do="embedPin" attribute.

Code example (default size):

<amp-pinterest width="245" height="330" data-do="embedPin"
  data-url="https://uk.pinterest.com/pin/422986589975891640/">
</amp-pinterest>

As the default Pin widget is quite small, you can also opt for a bigger version by using the data-width="medium" attribute.

Code example (medium size):

<amp-pinterest width="355" height="410" data-do="embedPin"
  data-width="medium"
  data-url="https://uk.pinterest.com/pin/422986589975891640/">
</amp-pinterest>

Code preview (medium size):

AMP Pinterest Example
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:

  1. data-do="buttonPin" to let the AMP runtime know that this will be a Pin It button
  2. data-url with the URL you want share
  3. data-media with the absolute URL of the image you want users to pin
  4. 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.

<figure>
  <amp-img src="image.jpg" width="640" height="385"
        alt="Image Example">
  </amp-img>
  <amp-pinterest height="28" width="56" data-do="buttonPin"
        data-url="https://www.hongkiat.com/blog/best-android-twitter-clients/"
        data-media="https://assets.hongkiat.com/uploads/thumbs/640x410/best-android-twitter-clients.jpg"
        data-description="Best 5 Free Twitter Clients for Android">
   </amp-pinterest>
</figure>

Code preview:

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

AMP Pin Button Example

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.

Code example (Follow button):

<amp-pinterest height="20" width="87" data-do="buttonFollow"
  data-href="https://www.pinterest.com/hongkiat/"
  data-label="Hongkiat">
</amp-pinterest>

Script to include:

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

In the Github examples you can see many different use cases of the <amp-pinterest> component.

5. amp-soundcloud

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).

Code example (classic mode):

<amp-soundcloud height="166" layout="fixed-height"
      data-trackid="264419072" data-color="ff5c44">
</amp-soundcloud>

Code preview (classic mode):

AMP SoundCloud Classic Mode
Visual Mode

In Visual Mode, the featured image spans behind the audio player. Here, you can also find the proper height belonging to Visual Mode in the Embed code on SoundCloud.com.

Code example (visual mode):

<amp-soundcloud height="450" layout="fixed-height"
    data-trackid="264419072" data-visual="true">
</amp-soundcloud>

Code example (visual mode):

AMP SoundCloud Example Visual Mode

If you want to embed a private audio, use the optional data-secret-token attribute.

Script to include:

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

Check out some examples on how to properly use <amp-soundcloud> on Github.

6. amp-vine

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.

Code example:

<amp-vine width="400" height="400"
    layout="responsive" data-vineid="hKQjlJPtWKT">
</amp-vine>

Code preview:

AMP Vine Example

Script to include:

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

Take a look at the Github examples related to the <amp-vine> component.

7. amp-youtube

You can embed YouTube videos on AMP pages with the help of the <amp-youtube> component.

To do so, you need to add the dimensions, plus the ID of the video in the data-videoid attribute. When specifying width and height, it’s important to pay attention to the aspect ratio.

You can also use the parameters of YouTube embeds in AMP documents, just insert the name of the parameter after the data-param- prefix.

Code example:

In this example, I made use of the start YouTube parameter in the data-param-start attribute in order to make the video begin at 43s.

  <amp-youtube width="480" height="270" layout="responsive"
      data-videoid="n0PVwYoKQmo" data-param-start="43">
  </amp-youtube>

Code preview:

AMP Example Youtube

Script to include:

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

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:

8. amp-social-share

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.

Code example:

<div>
  <!-- Facebook -->
  <amp-social-share type="facebook" width="60" height="44"
      data-param-app_id="254325784911610">
  </amp-social-share>

  <!-- Twitter -->
  <amp-social-share type="twitter" width="60" height="44">
  </amp-social-share>

  <!-- Google Plus -->
  <amp-social-share type="gplus" width="60" height="44">
  </amp-social-share>

  <!-- Pinterest -->
  <amp-social-share type="pinterest" width="60" height="44">
  </amp-social-share>

  <!-- Linkedin -->
  <amp-social-share type="linkedin" width="60" height="44">
  </amp-social-share>

  <!-- Email -->
  <amp-social-share type="email" width="60" height="44">
  </amp-social-share>
</div>

Code preview:

AMP Social Share Example

The pre-configuration makes 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:

  1. data-text for the text you want to include in the share
  2. data-url for the URL you want to share
  3. 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.

Script to include:

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

Check out Github examples that can help you properly configure your social share buttons.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail