How to create Google Web Stories using AMP and HTML?
Article by: Manish Methani
Last Updated: September 24, 2021 at 8:04am IST
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>
.webp)
