In this chapter, we'll explore how we can add rich media into our web pages with AMP. We'll move beyond article pages and start looking at e-commerce. We'll be focusing mostly on visual media with image galleries and videos (and audio for good measure), and we'll see how we can build compelling e-commerce product pages. We'll also be exploring social media support in AMP, and we'll see how Instagram, Twitter, and Facebook posts can be integrated.
Topics covered in Chapter 5 include the following:
- Interactive product image galleries with
<amp-carousel> - Audio and video in AMP:
<amp-video>,<amp-youtube>, and<amp-audio> - Full page video overlays with
<amp-lightbox> - Social media in AMP
- Tabbed product content
Buy "AMP: Building Accelerated Mobile Pages" on Amazon US, Amazon UK
View Examples
- Starting point for examples: product-start.html
- Product listing example: product-listing.html
- Page with hero-image carousel: hero-carousel.html
- Hero carousel with captions: hero-captions.html
- Product page with carousel:product-carousel.html
- Product carousel with
<amp-selector>: product-carousel-selector.html - Product page with embedded video: video.html
- Product page with embedded audio: audio.html
- Lightboxed video example: video-lightbox.html
- Product images in lightbox: product-lightbox.html
- Embedded Facebook post: facebook-post.html
- Embedded Twitter & Instagram posts: twitter-instagram.html
- Social sharing buttons: product-social.html
Download code
Download all code for this chapter: ch5.zip