MP Components That You Did Not Know You Could Add To AMP Pages

Or is it?

AMP was designed to speed up mobile web browsing. However, there were some restrictions. These included the limitation of custom code, HTML/CSS and JavaScript. The CSS stylesheet limit of 75kb is a good example. Any web page exceeding that size will be rejected AMP validation.

Digital marketers can personalize pages using many AMP components, despite its limitations. These specialized HTML tags work in a similar way to traditional HTML tags with opening and closing tags, attributes and styling capabilities. They are easy to identify, starting with the amp prefix.

While the complete list will be updated on an ongoing basis. The following 23 AMP components provide a good indication of how customized pages can look.

Instapage now offers AMP code to allow a wide range of components. For more information, please visit. )

23 AMP components for customizing your pages

1. Accordion

Adding amp-accordion HTML to your page gives visitors an overview of the content and lets them jump to a specific section. Each section of the AMP accordion’s immediate children is considered a section. (Each section must have only two “children”) and the section heading is the first. The heading can be clicked to expand or collapse the section.

There are two additional options for the AMP accordion components: nested acordions to nest or stack multiple accordions inside each other and Auto-Collapsing accordions which only allow one section at a given time.

2. Audio

AMP uses amp­audio instead of the HTML5 audio tag. Only HTML5 audio files can be embedded directly with the AMP component. This is how it appears on the page:

The audio controls (play/pause/sound/mute and download) can be disabled.

3. Call tracking

AMP–call-tracking replaces static numbers with numbers that are used for call tracking analytics.

4. Carousel

The AMP Carousel component displays multiple images along the horizontal axis. There are many amp-carousel formats available.

To display a list or images in a continuous strip, you can use the type=”carousel”

To display slideshows of images, type “slides”.

You can also choose the autoplay attribute type=slidesonly, which scrolls through slides automatically in 5 second intervals and requires no user interaction.

5. Facebook

The Facebook component embeds Facebook images, posts, and videos in AMP pages. It only requires the Facebook URL.

6. Comment on Facebook

AMP-facebook-comments allows embedding Facebook comments into AMP pages.

7. Like Facebook

AMP Facebook-like allows embedding of the Facebook Like button in AMP pages.

8. Facebook Page

AMP-facebook page embeds a Facebook Page in AMP files. It only requires the href for the Facebook Page. You can show different tabs on your Facebook Page with the AMP Page component. You can display the timeline or events tab by specifying data_tabs=”timeline events:”

9. Font

The AMP font element lets you design pages using custom fonts in either the body or head of the document.

If the font you choose isn’t compatible, it will display as plain, red text

10. Form

The AMP component allows you to create AMP pages that include detailed lead capture forms. You can also provide success and error messages with special attributes such as submit-success or submit-error.

11. Geo

The AMP geo extension lets you create small sections of content that are based on a rough estimate of the user’s geographic location (country-level only; similar to an ISO Country Code). You can also group different locations together to make it easier to apply attributes for multiple geographies simultaneously.

12. iFrame

AMP iframe embeds content in AMP pages via iFrame. This is ideal for displaying content that is not supported by AMP (Vimeo. Giphy. Google Maps. etc.). ).

AMP-iframe lets you resize your iFrame during runtime. This can be done either on page load (the embedded iFrame resizes itself to 200x200px), or upon user interaction (pressing a button will resize it to 300x300px). This AMP component must be at least 600px from the top. It also cannot be within the first 75% viewport when scrolling to the top.

13. Lightbox image

The AMP Image Lightbox component lets you expand AMP images in order to fill the viewport. Optionally, you can display an image caption at bottom of viewport.

14. Instagram

You can embed Instagram videos and photos into your AMP pages using amp-instagram. This is done by using the data-shortcode in each photo/video URL. Captions can be added using the data-captioned attribute.

15. Lightbox gallery

AMP–lightbox-gallery offers a lightbox experience for other AMP components such as amp–img and amp–carousel. Images are not supported at the moment. A UI component expands when the visitor interacts the AMP element until it is closed again. To allow users to view multiple images on your page, add the lightbox attribute.

16. Pinterest

By using andamp-pinterest to add a “Pin It” button to your webpage, visitors can pin different content from your site to their boards:

These attributes are required to add a “Pin It” button:

• data-url: The URL to be shared
• data-media: The URL of the image to pin
• data-description is the default description in the Pin

You can also embed a complete pin widget:

In this instance, the data-url attribute should contain the fully qualified URL of the Pinterest resource.

17. Pixel

The AMP pixel component allows you to quickly track pageviews. AMPpixel is an embedded component that does not require you to load an extension.

18. Reddit

Both Reddit comments and posts can be included on AMP pages using amp-reddit. The AMP Reddit component requires that you specify the source of the embed. When embedding comments, include the parent comment by specifying data-embedparent=”true”, and include updated comments by specifying data-embedlive=”true.”

19. SoundCloud

You can allow visitors to play SoundCloud tracks from your AMP pages if you use the component. All you need for amp soundcloud is the trackid in the SoundCloud embed code.

A full SoundCloud playlist can be embedded with the playlistid (also found within the SoundCloud embed code), simply by replacing data-trackid and data-playlistid

20. Twitter

Similar to other components of social media AMP, amp-twitter embeds tweets in your AMP pages.

You can deactivate Twitter cards by using data-cards=”hidden” if you don’t need an image or want to save space on your page.

21. Favorite button

The AMP framework allows marketers to add a favorite/like/bookmark button. You can also choose a more advanced version, which includes a favorite count and updates it when the button clicks.

22. Payments in AMP

You can request payment information from AMP pages directly from your browser. You will also need amp-iframe to request payment information in AMP. This embedded iFrame has a “Buy Now” button and all the payment logic within it.

However, AMP limits JavaScript so the iFrame source must also handle PaymentRequest instances. There are other options:

• Switch the “Buy Now” button to an “Add To Cart” button
• Redirecting customers to a standard checkout page

23. Star rating

Star-rating features can be added to your pages with touch, mouse and keyboard accessibility and color-changing stars when hovered over them.

What AMP components can you add to your webpage?

AMP has limitations but it is possible to design beautiful pages that can be customized. To maximize conversions, you can add 23 components to your AMP pages.

Marketers can use Instapage’s AMP feature to create optimized landing pages. This includes advanced analytics, a user-friendly builder and a built in validator tool. Start creating faster landing pages today. To learn more, book an Instapage demo.

Author: Stephanie Mialki