8 AMP Components for Social Media Integration

The biggest dispute that Google’s mobile web standard, Accelerated Mobile Pages needs to solve is making mobile sites faster, while keeping them organic abounding in content. These days abounding and enchanting calm can frequency be illusory though embeds from renouned amicable media sites — tweets, videos, audios, posts, photos.

Beginner’s Guide to Accelerated Mobile Pages (AMP)

Beginner’s Guide to Accelerated Mobile Pages (AMP)

Accelerated Mobile Pages is Google’s beginning that intends to solve a biggest problem of a mobile web –…Read more

Extended AMP Componentsamong other good features — yield a good approach to confederate AMP papers with opposite amicable calm types.

How Extended AMP Components Work

At a core of AMP’s truth there are Google’s best opening practices. To urge page bucket times, a AMP standards shorten how we can use front-end technologies. For instance, we can't use tradition JavaScript, outmost stylesheets, and any HTML member that loads outmost resources, such as a img tag.

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

AMP Components are specific HTML tags that can be used likewise to typical HTML tags. A few of them are built in to a AMP runtime, while a infancy works as extensions. Components that creates amicable media formation probable on AMP pages are all extended components.

10 Important Accelerated Mobile Pages (AMP) Components You Should Know

10 Important Accelerated Mobile Pages (AMP) Components You Should Know

Accelerated Mobile Pages or AMP is Google’s beginning to make a mobile web faster. To grasp this goal,…Read more

Extended AMP Components need we to import a belonging script in a head territory of your AMP HTML document. As AMP is an open-source project, a series of extended components might grow in a future.

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

1. amp-facebook

amp-facebook creates it probable to embed a Facebook post or video into an AMP page.

You always need to specify a measure of a embedded post, that means we need to supplement a width and a height charge with values in integer pixels. You can find a correct measure by clicking on a “Embed” menu on a tip of a Facebook post.

You’re also compulsory to add a URL of a given post in a data-href attribute. You can find a URL by clicking on a timestamp of a Facebook post, and a browser will insert a singular URL into a residence bar.

If we wish to embed a video though a belonging Facebook post, supplement a discretionary data-embed-as="video" attribute

If we wish to make your hide responsive use a layout charge with a "responsive" value. You can also use a discretionary layout charge on any other AMP member to control a 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 FacebookAMP Example Facebook

Script to include:

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

2. amp-twitter

You can embed tweets into AMP pages by regulating a amp-twitter component.

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

For instance, in a instance next we used a Twitter API’s linkColor arrangement choice as data-link-color (its data-* format) to change a default couple tone to a tone Hongkiat.com uses on a 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 ExampleAMP Twitter Example

The amp-twitter member is not ideal yet, Github docs says that Twitter does not now yield an API that yields bound aspect ratio Tweet embeds.

This means we need to manually set a width and height attributes, as a AMP runtime infrequently doesn’t arrangement a partial (usually a bottom) of a tweet.

It’s always a good thought to check how your embedded tweets demeanour like before edition a AMP page.

Add a Placeholder

Although it’s not required, a support recommends adding a placeholder in box a chatter doesn’t bucket during once.

The placeholder charge can be used on any AMP component. The placeholder is shown immediately if a final resources are not available. When a AMP member loads, it hides a placeholder.

Take a demeanour during how a above instance formula looks like with a placeholder. On Twitter, we simply clicked on a Embed Tweet button, copy-pasted a embeddable blockquote (without a book during a end), and combined a placeholder charge to a blockquote tag.

Code instance 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"
        Aug 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

3. amp-instagram

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

You are compulsory to specify a dimensions of a hide with a width and height attributes, and we also have to add a identifier of a Instagram print or video regulating a data-shortcode attribute.

You can find a identifier during a finish of a URL, for a instance for a print next a URL is https://www.instagram.com/p/-PFt7tF8Km/, so we need to use -PFt7tF8Km as value for a data-shortcode attribute.

Code example:

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

Code preview:

AMP Instagram ExampleAMP Instagram Example

For manageable layouts, AMP automatically calculates a compulsory space that also includes a “Instagram chrome” (account name, date, series of likes, etc).

This means we can use any value for width and height, until a two values are equal (Instagram photos are customarily square), as a AMP runtime will resize a picture according to a accessible space.

If a print doesn’t occur to be a square, we have to mention a tangible width and height values.

For bound layouts, we need to include a additional space (top and bottom: +48 px, left and right: +8px) indispensable for a Instagram chrome when we calculate a picture dimensions.

Script to include:

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

4. amp-pinterest

amp-pinterest allows we to embed possibly a Pin widget or a Pin It button into an AMP HTML document.

Embed a Pin Widget

To hide a Pin widget, we have to mention a dimensions, a URL of a pin regulating a data-url attribute, and we also need to supplement a data-do="embedPin" attribute.

Code instance (default size):

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

As a default Pin widget is utterly small, we can also opt for a bigger chronicle by regulating a data-width="medium" attribute.

Code instance (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 ExampleAMP Pinterest Example

Display a Pin It Button

You can also add a Pin It button to your AMP page with a assistance of a amp-pinterest component. Apart from a width and height dimensions, you’re required to mention 4 attributes in sequence to hide a Pin It button:

  1. data-do="buttonPin" to let a AMP runtime know that this will be a Pin It button
  2. data-url with a URL we wish share
  3. data-media with a comprehensive URL of a picture we wish users to pin
  4. data-description with a outline we wish to seem in a Pin emanate form

There are many opposite symbol sizes, to select from, check a docs for all sizes available.

Code example:

In this example, we combined a Pin It symbol that would concede users to pin an picture from this former Hongkiat.com post. we used a tiny rectilinear symbol 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="http://www.hongkiat.com/blog/best-android-twitter-clients/"
        data-media="http://media02.hongkiat.com/thumbs/640x410/best-android-twitter-clients.jpg"
        data-description="Best 5 Free Twitter Clients for Android"
   /amp-pinterest
/figure

Code preview:

Note that we need to use additional CSS to arrangement a Pin It symbol on tip of a image.

AMP Pin Button ExampleAMP Pin Button Example

You can also create a Pinterest Follow button by regulating a data-do="buttonFollow" attribute, and naming a name we wish to arrangement inside a Follow symbol in a data-label a URL of your comment in a data-href attribute.

Code instance (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

5. amp-soundcloud

SoundCloud is a renouned audio placement height where users can share their music. With a assistance of a amp-soundcloud member we can play SoundCloud tracks right from your AMP HTML page.

This member can only be used with fixed-height layout that means we usually need to mention a height, and a breadth will be distributed by a AMP runtime. As a outcome a embedded SoundCloud audio actor will fill all a accessible plane space.

The amp-soundcloud member can be displayed in either classical or visible mode. You can select from a dual modes by environment a value of a data-visual charge to possibly true or false (the default is false).

In both modes, we have to use a data-trackid charge to specify a identifier of a audio; we can find a audio ID by clicking a Share symbol next a audio actor on SoundCloud.com, and looking adult a long-form URL inside a Embed code.

Classic Mode

The Classic Mode displays a tiny thumbnail picture on a left, and a audio actor on a right. You can get a correct value for a height charge from a Embed formula on SoundCloud.com.

In Classic Mode, we can mention a tone of a audio actor if we wish regulating a data-color charge (you can't do this in Visual Mode).

Code instance (classic mode):

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

Code preview (classic mode):

AMP SoundCloud Classic ModeAMP SoundCloud Classic Mode

Visual Mode

In Visual Mode, a featured picture spans behind a audio player. Here, we can also find a correct height belonging to Visual Mode in a Embed formula on SoundCloud.com.

Code instance (visual mode):

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

Code instance (visual mode):

AMP SoundCloud Example Visual ModeAMP SoundCloud Example Visual Mode

If we wish to embed a private audio, use a discretionary 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

6. amp-vine

Vine is a short-form video pity site on that we can share 6-second prolonged videos with your friends. The amp-vine member creates it probable to simply embed Vine videos into your AMP HTML pages.

This AMP member is utterly simple, we usually need to supplement a dimensions, and a ID of a Vine video in a data-vineid attribute. You can get a ID from a URL of any Vine.

As Vines are squares, if we use a manageable layout, a same sequence relates as with Instagram embeds; we can supplement any value to a width and height attributes, until they’re equal they’ll scrupulously work.

Code example:

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

Code preview:

AMP Vine ExampleAMP Vine Example

Script to include:

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

7. amp-youtube

You can embed YouTube videos on AMP pages with a assistance of a amp-youtube component.

To do so, we need to supplement a dimensions, and a ID of a video in a data-videoid attribute. When naming width and height, it’s critical to pay courtesy to a aspect ratio.

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

Code example:

In this example, we done use of a start YouTube parameter in a data-param-start charge in sequence to make a video start during 43s.

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

Code preview:

AMP Example YoutubeAMP Example Youtube

Script to include:

script async custom-element="amp-youtube"
    src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"
/script
Other Video Sharing Services

AMP also has components associated to other video pity services, that work likewise to amp-youtube. You can use a following extended AMP components for video embeds from providers other than YouTube:

8. amp-social-share

Apart from amicable media embeds, we can also display amicable share buttons on your AMP pages by regulating a amp-social-share component.

The amicable share underline is preconfigured for some providers, though with a right settings we can use a amp-social-share member for any other amicable share buttons.

Pre-Configured Share Buttons

Pre-configured share buttons don’t need too many settings; we have to conclude a width (default is 60px) and height (default is 44px) attributes, and a name of a amicable media provider in a type attribute.

With Facebook, you’re also compulsory to mention a Facebook app id in a 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 ExampleAMP Social Share Example

The pre-configuration makes assumptions that a URL we wish to share is a authorized URL of a stream page, and a content we wish to embody in your share is a page title.

If we wish to use another config, we can do that with a following three discretionary attributes:

  1. data-text for a content we wish to embody in a share
  2. data-url for a URL we wish to share
  3. data-attribution for a name of a chairman or provider we wish your share to be attributed to
Unconfigured Share Buttons

To arrangement amicable share buttons of unconfigured providers, such as WhatsApp, we need to specify a tradition custom of a provider in a data-share-endpoint attribute. Check out in a docs how we 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

Add Comment