{"id":27804,"date":"2016-08-24T23:01:25","date_gmt":"2016-08-24T15:01:25","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=27804"},"modified":"2022-07-13T19:41:59","modified_gmt":"2022-07-13T11:41:59","slug":"amp-components-social-media","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/amp-components-social-media\/","title":{"rendered":"8 AMP Components for Social Media Integration"},"content":{"rendered":"

The biggest conflict that Google\u2019s mobile web standard, Accelerated Mobile Pages<\/a><\/strong> needs to solve is making mobile sites faster<\/strong>, while keeping them functional & rich in content<\/strong>. These days rich and engaging content can hardly be imagined without embeds from popular social media sites \u2014 tweets, videos, audios, posts, photos.<\/p>\n

Extended AMP Components<\/strong> \u2014 among other great features<\/a> \u2014 provide a great way to integrate AMP<\/abbr> documents with different social content types.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tBeginner\u2019s Guide to Accelerated Mobile Pages (AMP)<\/a>\n\t\t\t\t<\/p>\n

How Extended AMP Components Work<\/h2>\n

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

In exchange, you get a bunch of AMP Components<\/a><\/strong> you can use to display external resources<\/strong>, such as images, videos, audios, advertisements, etc. on your site.<\/p>\n

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

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tTop 10 Essential AMP Components for Mobile Optimization<\/a>\n\t\t\t\t<\/p>\n

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

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

1. amp-facebook<\/code><\/a><\/h2>\n

<amp-facebook><\/code> makes it possible to embed a Facebook post or video<\/strong> into an AMP page.<\/p>\n

You always need to specify the dimensions of the embedded post<\/strong>, which means you need to add a width<\/code> and a height<\/code> 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.<\/p>\n

You\u2019re also required to add the URL of the given post<\/strong> in the data-href<\/code> 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.<\/p>\n

If you want to embed a video without the belonging Facebook post<\/strong>, add the optional data-embed-as=\"video\"<\/code> attribute<\/p>\n

If you want to make your embed responsive<\/strong> use the layout<\/code><\/a> attribute with the \"responsive\"<\/code> value. You can also use the optional layout<\/code> attribute on any other AMP component to control its layout.<\/p>\n

Code example:<\/strong><\/p>\n

\r\n<amp-facebook width=\"500\" height=\"485\" layout=\"responsive\"\r\n    data-href=\"https:\/\/www.facebook.com\/hongkiatcom\/posts\/10154256404668592\">\r\n<\/amp-facebook>\r\n<\/pre>\n
Code preview:<\/strong><\/p>\n
\"AMP<\/figure>\n
Script to include:<\/strong><\/p>\n
\r\n<script async custom-element=\"amp-facebook\"\r\n    src=\"https:\/\/cdn.ampproject.org\/v0\/amp-facebook-0.1.js\">\r\n<\/script>\r\n<\/pre>\n
Here\u2019s a look at a working example<\/a> on how to use <amp-facebook><\/code> on a complete AMP HTML page.<\/p>\n
2. amp-twitter<\/code><\/a><\/h2>\n
You can embed tweets<\/strong> into AMP pages by using the <amp-twitter><\/code> component.<\/p>\n
To do so, you need to specify the ID of the tweet<\/strong> in the data-tweetid<\/code> attribute. You can modify how the tweet is displayed by adding any of the\n  display options of the Twitter APi<\/a> as a data-*<\/code> HTML5 attribute<\/a>.<\/p>\n
For instance, in the example below I used the Twitter API\u2019s linkColor<\/code> display option as data-link-color<\/code> (its data-*<\/code> format) to change the default link color to the color Hongkiat.com uses on its Twitter account.<\/p>\n
Code example:<\/strong><\/p>\n
\r\n<amp-twitter width=\"506\" height=\"338\" layout=\"responsive\"\r\n    data-tweetid=\"765234426166915072\" data-link-color=\"#698aba\">\r\n<\/amp-twitter>\r\n<\/pre>\n
Code preview:<\/strong><\/p>\n
\"AMP<\/figure>\n
The <amp-twitter><\/code> component is not perfect yet, Github docs says<\/a> that Twitter does not currently provide an API that yields fixed aspect ratio Tweet embeds<\/q>.<\/p>\n
This means you need to manually set the width<\/code> and height<\/code> attributes<\/strong>, as the AMP runtime sometimes doesn\u2019t display a part (usually the bottom) of the tweet.<\/p>\n
It\u2019s always a good idea to check how your embedded tweets look like before publishing the AMP page.<\/p>\n
Add a Placeholder<\/h3>\n
Although it\u2019s not required, the documentation recommends adding a placeholder<\/strong> in case the tweet doesn\u2019t load at once.<\/p>\n
The placeholder<\/code><\/a> attribute can be used on each AMP component. The placeholder is shown immediately<\/strong> if the final resources are not available. When the AMP element loads, it hides its placeholder<\/strong>.<\/p>\n
Take a look at how the above example code looks like with a placeholder<\/strong>. On Twitter, I simply clicked on the Embed Tweet<\/span> button, copy-pasted the embeddable blockquote (without the script at the end), and added the placeholder<\/code> attribute to the <blockquote><\/code> tag.<\/p>\n
Code example with placeholder:<\/strong><\/p>\n
\r\n<amp-twitter width=\"506\" height=\"338\" layout=\"responsive\"\r\n  data-tweetid=\"765234426166915072\" data-link-color=\"#698aba\">\r\n  <blockquote placeholder class=\"twitter-tweet\" data-lang=\"en\">\r\n    <p lang=\"en\" dir=\"ltr\">How to Validate Accelerated Mobile Pages\r\n      (<a href=\"https:\/\/twitter.com\/hashtag\/AMP?src=hash\">#AMP<\/a>)\r\n      <a href=\"https:\/\/twitter.com\/hashtag\/google?src=hash\">#google<\/a>\r\n      <a href=\"https:\/\/twitter.com\/hashtag\/seo?src=hash\">#seo<\/a>\r\n      <a href=\"https:\/\/t.co\/eVOSAtr5Ax\">https:\/\/t.co\/eVOSAtr5Ax<\/a>\r\n    <\/p>\r\n    \u2014 Hongkiat (@hongkiat)\r\n      <a href=\"https:\/\/twitter.com\/hongkiat\/status\/765234426166915072\">\r\n        August 15, 2016<\/a>\r\n  <\/blockquote>\r\n<\/amp-twitter>\r\n<\/pre>\n
Script to include:<\/strong><\/p>\n
\r\n<script async custom-element=\"amp-twitter\"\r\n    src=\"https:\/\/cdn.ampproject.org\/v0\/amp-twitter-0.1.js\">\r\n<\/script>\r\n<\/pre>\n
Check out an example<\/a> of a full HTML AMP page using the <amp-twitter><\/code> component.<\/p>\n
3. amp-instagram<\/code><\/a><\/h2>\n
With <amp-instagram><\/code>, you can embed Instagram photos and videos<\/strong> into your AMP pages.<\/p>\n
You are required to specify the dimensions<\/strong> of the embed with the width<\/code> and height<\/code> attributes, and you also have to add the identifier<\/strong> of the Instagram photo or video using the data-shortcode<\/code> attribute.<\/p>\n
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\/<\/code><\/a>, so I need to use -PFt7tF8Km<\/code> as value for the data-shortcode<\/code> attribute.<\/p>\n
Code example:<\/strong><\/p>\n
\r\n<amp-instagram data-shortcode=\"-PFt7tF8Km\"\r\n    width=\"400\" height=\"400\" layout=\"responsive\">\r\n<\/amp-instagram>\r\n<\/pre>\n
Code preview:<\/strong><\/p>\n
\"AMP<\/figure>\n
For responsive layouts<\/strong>, AMP automatically calculates the required space which also includes the \u201cInstagram chrome\u201d<\/strong> (account name, date, number of likes, etc).<\/p>\n
This means you can use any value for width<\/code> and height<\/code>, until the two values are equal<\/strong> (Instagram photos are usually square), as the AMP runtime will resize the image according to the available space.<\/p>\n
If the photo doesn\u2019t happen to be a square, you have to specify its actual width<\/code> and height<\/code> values.<\/p>\n
For fixed layouts<\/strong>, you need to include the extra space<\/strong> (top and bottom: +48 px, left and right: +8px) needed for the Instagram chrome when you calculate the image dimensions.<\/p>\n
Script to include:<\/strong><\/p>\n
\r\n<script async custom-element=\"amp-instagram\"\r\n    src=\"https:\/\/cdn.ampproject.org\/v0\/amp-instagram-0.1.js\">\r\n<\/script>\r\n<\/pre>\n
Check out full AMP HTML page examples on how to use the <amp-instagram><\/code> component<\/a>.<\/p>\n
4. amp-pinterest<\/code><\/a><\/h2>\n
<amp-pinterest><\/code> allows you to embed either a Pin widget or a Pin It<\/span> button<\/strong> into an AMP HTML document.<\/p>\n
Embed a Pin Widget<\/h3>\n
To embed a Pin widget, you have to specify the dimensions, the URL of the pin using the data-url<\/code> attribute, and you also need to add the data-do=\"embedPin\"<\/code> attribute.<\/p>\n
Code example (default size):<\/strong><\/p>\n
\r\n<amp-pinterest width=\"245\" height=\"330\" data-do=\"embedPin\"\r\n  data-url=\"https:\/\/uk.pinterest.com\/pin\/422986589975891640\/\">\r\n<\/amp-pinterest>\r\n<\/pre>\n
As the default Pin widget is quite small, you can also opt for a bigger version by using the data-width=\"medium\"<\/code> attribute.<\/p>\n
Code example (medium size):<\/strong><\/p>\n
\r\n<amp-pinterest width=\"355\" height=\"410\" data-do=\"embedPin\"\r\n  data-width=\"medium\"\r\n  data-url=\"https:\/\/uk.pinterest.com\/pin\/422986589975891640\/\">\r\n<\/amp-pinterest>\r\n<\/pre>\n
Code preview (medium size):<\/strong><\/p>\n
\"AMP<\/figure>\n
Display a Pin It<\/span> Button<\/h3>\n
You can also add a Pin It<\/span> button<\/strong> to your AMP page with the help of the <amp-pinterest><\/code> component. Apart from the width<\/code> and height<\/code> dimensions, you\u2019re required to specify four attributes<\/strong> in order to embed the Pin It<\/span> button:<\/p>\n
    \n
  1. data-do=\"buttonPin\"<\/code> to let the AMP runtime know that this will be a Pin It<\/span> button<\/li>\n
  2. data-url<\/code> with the URL you want share<\/li>\n
  3. data-media<\/code> with the absolute URL of the image you want users to pin<\/li>\n
  4. data-description<\/code> with the description you want to appear in the Pin create form<\/li>\n<\/ol>\n
    There are many different button sizes<\/strong>, to choose from, check the docs for all sizes available<\/a>.<\/p>\n
    Code example:<\/strong><\/p>\n
    In this example, I created a Pin It<\/span> button that would allow users to pin an image from  this former Hongkiat.com post<\/a>. I used the small rectangular button size.<\/p>\n
    \r\n<figure>\r\n  <amp-img src=\"image.jpg\" width=\"640\" height=\"385\"\r\n        alt=\"Image Example\">\r\n  <\/amp-img>\r\n  <amp-pinterest height=\"28\" width=\"56\" data-do=\"buttonPin\"\r\n        data-url=\"https:\/\/www.hongkiat.com\/blog\/best-android-twitter-clients\/\"\r\n        data-media=\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/640x410\/best-android-twitter-clients.jpg\"\r\n        data-description=\"Best 5 Free Twitter Clients for Android\">\r\n   <\/amp-pinterest>\r\n<\/figure>\r\n<\/pre>\n
    Code preview:<\/strong><\/p>\n
    Note that you need to use additional CSS<\/a> to display the Pin It<\/span> button on top of the image.<\/p>\n
    \"AMP<\/figure>\n
    You can also create a Pinterest Follow<\/span> button<\/a> by using the data-do=\"buttonFollow\"<\/code> attribute, and specifying the name you want to display inside the Follow<\/span> button in the data-label<\/code> & the URL of your account in the data-href<\/code> attribute.<\/p>\n
    Code example (Follow button):<\/strong><\/p>\n
    \r\n<amp-pinterest height=\"20\" width=\"87\" data-do=\"buttonFollow\"\r\n  data-href=\"https:\/\/www.pinterest.com\/hongkiat\/\"\r\n  data-label=\"Hongkiat\">\r\n<\/amp-pinterest>\r\n<\/pre>\n
    Script to include:<\/strong><\/p>\n
    \r\n<script async custom-element=\"amp-pinterest\"\r\n    src=\"https:\/\/cdn.ampproject.org\/v0\/amp-pinterest-0.1.js\">\r\n<\/script>\r\n<\/pre>\n
    In the Github examples<\/a> you can see many different use cases of the <amp-pinterest><\/code> component.<\/p>\n
    5. amp-soundcloud<\/code><\/a><\/h2>\n
    SoundCloud<\/a> is a popular audio distribution platform where users can share their music. With the help of the <amp-soundcloud><\/code> component you can play SoundCloud tracks<\/strong> right from your AMP HTML page.<\/p>\n
    This component can only be used with fixed-height<\/code><\/a> layout<\/strong> which means you only need to specify the height<\/code>, 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<\/strong>.<\/p>\n
    The <amp-soundcloud><\/code> component can be displayed in either classic or visual mode<\/strong>. You can choose from the two modes by setting the value of the data-visual<\/code> attribute to either true<\/code> or false<\/code> (the default is false<\/code>).<\/p>\n
    In both modes, you have to use the data-trackid<\/code> attribute to specify the identifier<\/strong> of the audio; you can find the audio ID by clicking the Share<\/span> button below the audio player on SoundCloud.com, and looking up the long-form URL inside the Embed code.<\/p>\n
    Classic Mode<\/h3>\n
    The Classic Mode<\/code><\/strong> displays a small thumbnail image on the left, and the audio player on the right. You can get the proper value for the height<\/code> attribute from the Embed code on SoundCloud.com.<\/p>\n
    In Classic Mode, you can specify the color of the audio player if you want using the data-color<\/code> attribute (you cannot do this in Visual Mode).<\/p>\n
    Code example (classic mode):<\/strong><\/p>\n
    \r\n<amp-soundcloud height=\"166\" layout=\"fixed-height\"\r\n      data-trackid=\"264419072\" data-color=\"ff5c44\">\r\n<\/amp-soundcloud>\r\n<\/pre>\n
    Code preview (classic mode):<\/strong><\/p>\n
    \"AMP<\/figure>\n
    Visual Mode<\/h3>\n
    In Visual Mode<\/code>, the featured image spans behind the audio player. Here, you can also find the proper height<\/code> belonging to Visual Mode in the Embed code on SoundCloud.com.<\/p>\n
    Code example (visual mode):<\/strong><\/p>\n
    \r\n<amp-soundcloud height=\"450\" layout=\"fixed-height\"\r\n    data-trackid=\"264419072\" data-visual=\"true\">\r\n<\/amp-soundcloud>\r\n<\/pre>\n
    Code example (visual mode):<\/strong><\/p>\n
    \"AMP<\/figure>\n
    If you want to embed a private audio<\/strong>, use the optional data-secret-token<\/code> attribute.<\/p>\n
    Script to include:<\/strong><\/p>\n
    \r\n<script async custom-element=\"amp-soundcloud\"\r\n    src=\"https:\/\/cdn.ampproject.org\/v0\/amp-soundcloud-0.1.js\">\r\n<\/script>\r\n<\/pre>\n
    Check out some examples on how to properly use <amp-soundcloud><\/code> on Github<\/a>.<\/p>\n
    6. amp-vine<\/code><\/a><\/h2>\n
    Vine<\/a> is a short-form video sharing site on which you can share 6-second long videos with your friends. The <amp-vine><\/code> component makes it possible to easily embed Vine videos<\/strong> into your AMP HTML pages.<\/p>\n
    This AMP component is quite simple, you only need to add the dimensions, and the ID of the Vine video in the data-vineid<\/code> attribute. You can get the ID from the URL of each Vine.<\/p>\n
    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<\/code> and height<\/code> attributes, until they\u2019re equal<\/strong> they\u2019ll properly work.<\/p>\n
    Code example:<\/strong><\/p>\n
    \r\n<amp-vine width=\"400\" height=\"400\"\r\n    layout=\"responsive\" data-vineid=\"hKQjlJPtWKT\">\r\n<\/amp-vine>\r\n<\/pre>\n
    Code preview:<\/strong><\/p>\n
    \"AMP<\/figure>\n
    Script to include:<\/strong><\/p>\n
    \r\n<script async custom-element=\"amp-vine\"\r\n    src=\"https:\/\/cdn.ampproject.org\/v0\/amp-vine-0.1.js\">\r\n<\/script>\r\n<\/pre>\n
    Take a look at the Github examples<\/a> related to the <amp-vine><\/code> component.<\/p>\n
    7. amp-youtube<\/code><\/a><\/h2>\n
    You can embed YouTube videos<\/strong> on AMP pages with the help of the <amp-youtube><\/code> component.<\/p>\n
    To do so, you need to add the dimensions, plus the ID of the video in the data-videoid<\/code> attribute. When specifying width<\/code> and height<\/code>, it\u2019s important to pay attention to the aspect ratio<\/strong>.<\/p>\n
    You can also use the parameters of YouTube embeds<\/a><\/strong> in AMP documents, just insert the name of the parameter after the data-param-<\/code> prefix<\/strong>.<\/p>\n
    Code example:<\/strong><\/p>\n
    In this example, I made use of the start<\/code> YouTube parameter in the data-param-start<\/code> attribute in order to make the video begin at 43s.<\/p>\n
    \r\n  <amp-youtube width=\"480\" height=\"270\" layout=\"responsive\"\r\n      data-videoid=\"n0PVwYoKQmo\" data-param-start=\"43\">\r\n  <\/amp-youtube>\r\n<\/pre>\n
    Code preview:<\/strong><\/p>\n
    \"AMP<\/figure>\n
    Script to include:<\/strong><\/p>\n
    \r\n<script async custom-element=\"amp-youtube\"\r\n    src=\"https:\/\/cdn.ampproject.org\/v0\/amp-youtube-0.1.js\">\r\n<\/script>\r\n<\/pre>\n
    The Github examples<\/a> show different ways to embed Youtube videos on Accelerated Mobile Pages.<\/p>\n
    Other Video Sharing Services<\/h3>\n
    AMP also has components related to other video sharing services, that work similarly to <amp-youtube><\/code><\/strong>. You can use the following extended AMP components for video embeds from providers other than YouTube:<\/p>\n