Create AMP Web Stories to Your Social Media

Web Stories on Properti2.com.

You could create a short story containing the highlight of your web article in a few slides. Then, add an "AMP Stories page" link to your social media stories.

Advantage! With AMP Stories, Google is offering a beautiful place at the top of the Search Engine Result Page (SERP) for your best pieces of content.

You can inform your audience or promote your products or services in a format tailored for mobile. Also, an AMP Story works perfectly on desktop.

Setup

AMP Stories are written using AMPHTML and they use their own AMP extension: amp-story. The first step is to import the amp-story in the header.

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

Stories can be styled using CSS:

<style amp-custom>

  amp-story {

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI ", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji ", "Segoe UI Emoji ", "Segoe UI Symbol ";

  }

  amp-story-page * {

    color: white;

    text-align: center;

  }

  [template=thirds] {

    padding: 0;

  }

</style>

Writing the Story

1. Stories are declared inside the amp-story tag.


2. A story consists of one or more pages. Each page is declared by an amp-story-page element. Pages are designed by layering videos, images and text.


3. A "bookend" panel containing links to other resources will appear on the last page of your story if you include an amp-story-bookend that references a bookend JSON config.

<amp-story standalone title="Stories in Properti2 - Terbaru" publisher="Properti2" publisher-logo-src="android-icon-192x192.png" poster-portrait-src="properti2.jpg" poster-square-src="properti2.jpg" poster-landscape-src="properti2.jpg">


  <amp-story-page id="page-1">


    <amp-story-grid-layer template="fill">


      <amp-img src="unit-2-kt-lt--16-tower-condominium-apartemen-la-grande-tamansari_20190622151149.jpeg" animate-in="fly-in-top" width="720" height="1280" layout="responsive" alt="Unit Apartemen Corner at La Grande Apartment, Lantai 16">


      </amp-img>


    </amp-story-grid-layer>


    <amp-story-grid-layer template="vertical">


      <h2><a href="id/listing/unit-apartemen-corner-at-la-grande-apartment-lantai-16-i9cd" title="Unit Apartemen Corner at La Grande Apartment, Lantai 16">Unit Apartemen Corner at La Grande Apartment, Lantai 16 </a></h2><p>Rp1.9 miliar </p>


    </amp-story-grid-layer>


    <amp-story-grid-layer template="thirds">


      <h2 animate-in="fly-in-bottom" grid-area="lower-third" animate-in-delay="0.4s" style="color:#fff">Dijual Unit apartemen di Kota Bandung&nbsp</h2>


    </amp-story-grid-layer>


  </amp-story-page>


  <amp-story-page id="page-2">


    <amp-story-grid-layer template="fill">


      <amp-img src="tanah-pinggir-jalan-di-sudimara-pinang-kota-tangerang_1_20210725000416.jpg" animate-in="fly-in-top" width="720" height="1280" layout="responsive" alt="Tanah Pinggir Jalan di Sudimara Pinang, Kota Tangerang">


    </amp-img>


    </amp-story-grid-layer>


    <amp-story-grid-layer template="vertical">


      <h2><a href="id/listing/tanah-pinggir-jalan-di-sudimara-pinang-kota-tangerang-be4a" title="Tanah Pinggir Jalan di Sudimara Pinang, Kota Tangerang">Tanah Pinggir Jalan di Sudimara Pinang, Kota Tangerang </a></h2>


    </amp-story-grid-layer>


    <amp-story-grid-layer template="thirds">


      <h2 animate-in="fly-in-bottom" grid-area="lower-third" animate-in-delay="0.4s" style="color:#fff">Dijual Tanah / Lahan di Kota Tangerang&nbsp</h2>


    </amp-story-grid-layer>


  </amp-story-page>


  <amp-story-page id="page-3">


    <amp-story-grid-layer template="fill">


      <amp-img src="rumah-brand-new-di-tebet-timur-jakarta-selatan_1_20210725152452.jpeg" animate-in="fly-in-top" width="720" height="1280" layout="responsive" alt="Rumah Brand New di Tebet Timur, Jakarta Selatan">


      </amp-img>


    </amp-story-grid-layer>


    <amp-story-grid-layer template="vertical">


      <h2><a href="id/listing/rumah-brand-new-di-tebet-timur-jakarta-selatan-klj3" title="Rumah Brand New di Tebet Timur, Jakarta Selatan">Rumah Brand New di Tebet Timur, Jakarta Selatan </a></h2><p>Rp2.55 miliar </p>


    </amp-story-grid-layer>


    <amp-story-grid-layer template="thirds">


      <h2 animate-in="fly-in-bottom" grid-area="lower-third" animate-in-delay="0.4s" style="color:#fff">Dijual Rumah di Jakarta Selatan&nbsp</h2>


    </amp-story-grid-layer>


  </amp-story-page>


  <amp-story-bookend src="https://amp.dev/static/samples/json/bookend.json" layout="nodisplay">


  </amp-story-bookend>


</amp-story>

Go creative!

Related Posts