How to create Google Web Stories using AMP and HTML?

Article by: Manish Methani

Last Updated: September 24, 2021 at 8:04am IST
4 min 26 sec

Google Web Stories

  • Visual Storytelling Platform: Google Web Stories is a platform that allows users to create and share visually engaging and interactive stories on the web.

  • Mobile-Friendly Format: Stories are designed for mobile devices, providing a seamless and immersive experience for users on smartphones.

  • Short, Snackable Content: Stories are typically short and concise, making them ideal for quick consumption and easy sharing.

  • Immersive Multimedia Elements: Users can incorporate a variety of multimedia elements, such as images, videos, and animations, to enhance the storytelling experience.

  • Discoverability: Google Web Stories can appear in search results and are discoverable through Google Search, making it easier for users to find and engage with your content.

Advantages for Monetizing Passion:

  • Engaging Content: The visually appealing and interactive nature of Web Stories can captivate your audience, keeping them interested in your passion.

  • Increased Visibility: With the potential to appear in search results, Web Stories can attract a larger audience, increasing the visibility of your content.

  • Monetization Opportunities: Google Web Stories allows you to monetize your content through various methods, such as ads and affiliate marketing, providing an avenue to generate income from your passion.

  • Social Media Integration: Stories can be easily shared on social media platforms, expanding your reach and driving more traffic to your content.

  • User-Friendly Creation: The platform offers a user-friendly interface, making it accessible for creators of all levels, even those without advanced technical skills.

  • Mobile-Centric Experience: As a mobile-centric format, Web Stories align with the way users consume content on their smartphones, ensuring a seamless and enjoyable experience for your audience.

In essence, Google Web Stories provides a visually appealing and accessible platform for creators to share their passion, with built-in features that facilitate engagement and monetization opportunities.

Sample Code to create the Google Web Stories using AMP and HTML:

<html>
<head>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async
custom-element="amp-story"
src="https://cdn.ampproject.org/v0/amp-story-1.0.js"
></script>

<link rel="canonical" href="https://codzify.com/how-to-answer-tell-me-about-yourself" />

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"/>

<style amp-boilerplate>

body {
-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
animation: -amp-start 8s steps(1, end) 0s 1 normal both;
}

@-webkit-keyframes -amp-start {
from {
visibility: hidden;
}

to {
visibility: visible;
}
}

@-moz-keyframes -amp-start {
  from {
   visibility: hidden;
  }

   to {
     visibility: visible;
     }
  }

@-ms-keyframes -amp-start {
  from {
     visibility: hidden;
   }

   to {
      visibility: visible;
    }
 }

@-o-keyframes -amp-start {
   from {
      visibility: hidden;
    }

   to {
     visibility: visible;
     }
  }

@keyframes -amp-start {
    from {
       visibility: hidden;
      }

      to {
      visibility: visible;
      }
  }

</style>

<noscript>
   <style amp-boilerplate>
      body {
        -webkit-animation: none;
        -moz-animation: none;
         -ms-animation: none;
          animation: none;
        }
   </style>
</noscript>

</head>

<body>

<amp-story standalone publisher="" title="" 
publisher-logo-src="https://codzify.com/dash/imgs/main_icons/codzfy_without_border.png"
poster-portrait-src="https://codzify.com/assets/images/stories/tellMeAboutYourself/poster.jpg">
   <amp-story-page id="my-first-page">
        <amp-grid-layer template="fill">
           <amp-img src="https://codzify.com/assets/images/stories/tellMeAboutYourself/1.jpg" 
           width="900" height="1600" alt="This is my First Image">
    </amp-img>
   </amp-grid-layer>
 </amp-story-page>

   <amp-story-page id="my-second-page">
        <amp-grid-layer template="fill">
           <amp-img src="https://codzify.com/assets/images/stories/tellMeAboutYourself/2.jpg" 
           width="900" height="1600" alt="This is my Second Image">
    </amp-img>
   </amp-grid-layer>
 </amp-story-page>

   <amp-story-page id="my-third-page">
        <amp-grid-layer template="fill">
           <amp-img src="https://codzify.com/assets/images/stories/tellMeAboutYourself/3.jpg" 
           width="900" height="1600" alt="This is my Third Image">
    </amp-img>
   </amp-grid-layer>
 </amp-story-page>

   <amp-story-page id="my-fourth-page">
        <amp-grid-layer template="fill">
           <amp-img src="https://codzify.com/assets/images/stories/tellMeAboutYourself/4.jpg" 
           width="900" height="1600" alt="This is my Fourth Image">
    </amp-img>
   </amp-grid-layer>
 </amp-story-page>

   <amp-story-page id="my-fifth-page">
        <amp-grid-layer template="fill">
           <amp-img src="https://codzify.com/assets/images/stories/tellMeAboutYourself/5.jpg"
            width="900" height="1600" alt="This is my Fifth Image">
    </amp-img>
   </amp-grid-layer>
 </amp-story-page>

   <amp-story-page id="my-sixth-page">
        <amp-grid-layer template="fill">
           <amp-img src="https://codzify.com/assets/images/stories/tellMeAboutYourself/6.jpg"
            width="900" height="1600" alt="This is my Sixth Image">
    </amp-img>
   </amp-grid-layer>
 </amp-story-page>

</body>
</html>

Recommended Videos:

How to Add Google Analytics (GA4) & Adsense to Google Web Stories | Codzify Tech Tutorial

Learn Flutter, FlutterFlow,
Firebase & Angular.

Looking to learn how to create the production-ready apps
from scratch? Well, you are at the right place.

₹1299 or $15.56

Learn to create the Dating App using No-Code Tool FlutterFlow

Level: Advanced

Explore Curriculum
₹1299 or $15.56

Flutter Mobile App Development Course

Explore Curriculum
₹1299 or $15.56

The Complete Angular Course

Explore Curriculum
₹1299 or $15.56

Dart Programming for Absolute Beginners

Coming Soon
FREE

Next.js course

Start Watching
FREE

Fundamentals of Computer Programming Languages

Start Watching
FREE

Learn HTML, CSS & Bootstrap

Start Watching

Latest Web Stories

1

Learn how to open WhatsApp using FlutterFlow | Step by Step Guide

Test your skills with these expert-led curated
Mock Tests.

C Programming Test

Test your C Programming skills with this comprehensive mock test on C Programming.

Take Test

Flutter Test

Solve most asked Interview Questions on Flutter and Test your foundational skills in flutter.

Take Test

GATE(CSE) Operating Systems

Solve most asked GATE Questions in Operating Systems and test your Gate Score.

Take Test

HTML,CSS Test

This is a mock test designed to help you assess your knowledge and skills in HTML and CSS.

Take Test

(GATE CSE) Data Structures & Algorithms Test

Solve most asked GATE Questions in Data Structures and Algorithms and test your Gate Score.

Take Test

Download the Codzify
Mobile App


Learn Anytime, Anywhere at your own pace. Scan the QR Code with your Mobile Camera to Download the Codzify Mobile App.

Codzify Mobile App Codzify Mobile App
Codzify Logo

Terms and Conditions    Cookie Policy   Refund Policy   Adsense Disclaimer