Los chicos de AMP han dado un paso adelante muy interesante al dar la posibilidad de tener Stories en la web al estilo de Instagram.

El otro día mi amigo Luis Rull (gran profesional y mejor persona) lo comenta por twitter, y claro, a ver quién se resiste a meterse en un charco así, así que manos a la obra. 👨🏻‍💻

Tenemos buenas noticias 🥳 , y es que los chicos de Google están trabajando en un plugin para ello, y ya sabemos que Google es Google, y aunque está en fase Beta, tiene muy buena pinta.

Aunque la interfaz para crear las stories es muy chula e intuitiva, de momento no lo estoy usando, porque crea los stories como custom post type, por lo que tendríamos algo como /story/story-1 /story/story-2 …. y no es lo que estaba buscando.

Yo lo que quiero es tener una url, por ejemplo /on-air/ y que esa sea mi última story. Será cuestión de tiempo esperar que el plugin evolucione, y si no meten dicha funcionalidad, hacer fork y añadirla.

Mientras ¿qué he hecho? Pues será por plugins 🧩🧩🧩 … estoy usando el plugin AMP Stories for WordPress, que aunque está un poco abandonado (supongo que el autor al ver los movimientos de Google, ha dicho «batalla perdida»)

Aunque la interfaz es más obsoleta y menos intuitiva, más del estilo de cuando creamos campos personalizados con Advanced Custom Fields, nos da la posibilidad de habilitar las stories en determinadas páginas, y es justo lo que buscaba, ya que puedo crear una página llamada «on-air«, y sólo en dicha página habilitarlo.

Añadimos las imágenes, los textos, publicamos y listo !! 🚀

Como al entrar en la página estamos en modo «slide», no tenemos forma de salir de ella, por lo que a la última imagen del story le suelo añadir un enlace que permita al usuario seguir navegando por la web, a modo de CTA.

Con eso estaríamos listos, pero quería destacarlo en algún sitio, y pensé que lo mejor sería hacerlo como lo hace Instagram, con una miniatura en forma de círculo en la cabecera. Y lo puse al lado del logo de la web.

Os añado el código que usé:

// Stories
// 4117 es el ID de la página on-air
if ( function_exists('vp_metabox') ) {
    $amp_story_activated = vp_metabox('amp_story_vp_metabox.amp_story_tg', null, 4117);
    if ( $amp_story_activated == 1 ) {
        ?>
        <div class="thumb_story">
            <a href="<?php echo get_the_permalink(4117);?>" title="@ablancodev on air">
                <img src="<?php echo get_the_post_thumbnail_url(4117, 'full');?>" alt="Story web" width=37px" />
            </a>
        </div>
        <?php
    }
 }

Como imagen he cogido la imagen destacada de la página, ya que aunque la primera intención fue coger la primera de la story, al ser verticales no quedaban muy bien, y así puedo adaptarla según necesidades.

Y tras toda esta chapa, el resumen es sencillo:

• Instalamos el plugin AMP Stories for WordPress ✅
• Creamos una página, y diseñamos en ella nuestro story. ✅
• (opcional) Añadimos el botón miniatura que nos llevará al story en la cabecera. ✅