Embedding Web Stories across your site

>>> Shared from Original Post The Keyword

Web Stories are a great way for content creators to bring enhanced experiences to their users  and thousands of creators and publishers are using them. Tools for creating stories are available to a global audience, and Google products such as Search and Discover are incorporating Web Stories as a first-class content format. And if you are using WordPress we have good news for you! With the release of v1.5 of the Stories Editor for WordPress, you can easily embed Web Stories into your existing site.

Embedding Web Stories in your site

The Web Stories Editor for WordPress makes it easy for you to create beautiful Web Stories, and the newly released version 1.5 provides capabilities that make it very easy to embed Web Stories into your site, including a versatile Web Stories block, integration of Web Stories into the theme customization process, and Integration with Classic Editor.
Abstract visual illustration of a Gutenberg Block with stacked blocks, Theme Integration with paint brush arrows, and the Classic Editor with editor panel next to content.

Integrating Web Stories into your content strategy allows you to:

  1. Take advantage of both original and third-party story experiences to enhance the quality of your content strategy. You can embed your own Web Stories or Web Stories created by other publishers into your content. 

  2. Diversify your traffic sources by combining organic traffic from search results and Discover, with direct traffic from origin, and social sharing. 

The Web Stories block

To embed stories on your WordPress-powered content site , you start by inserting a Web Stories block:

A new blog post interface in WordPress, without any content text, showing the types of blocks you can add to the post.

The Web Stories block provides three options for embedding stories into a post or page: 

The Web Story block within the WordPress interface which has selectors to embed your latest stories, select specific stories or enter a custom URL
  1. Latest Stories: Display your most recent stories, with filtering and sorting options. The list automatically updates as you publish new stories. 

  2. Selected Stories: Display a list of handpicked stories. 

  3. Single Story: Embed a single story given its URL. This is a simple option but combined with other blocks, stories can be embedded and displayed in many creative ways.


For the Latest Stories and Selected Stories embedding options, you can specify which Web Stories you want to show, as well as some layout options to control how they are displayed:

The Web Story block editor in WordPress with selectors to determine the layout of the selected Web Stories, with options for Box Carousel, Circle Carousel, Grid or List.
  1. Carousel: Carousel of web stories as rectangular cards or circular items.

  2. Grid: Grid view (up to four columns).

  3. List: Stacked list of stories.


Each layout option provides additional settings to give you fine-grained control over how embedded stories appear.


With this new Web Stories block, stories can be displayed anywhere blocks can be used. This includes the upcoming full site editing feature in WordPress, which gives users the ability to edit all elements of a site using Gutenberg blocks. This is great news, as the ecosystem continues to evolve and moving steadily towards Gutenberg-based themes, more and more users will get direct access to the Stories format.

Availability

If you are using any of the following themes, you can start bringing the power of storytelling to your site today:


  • The makers of the popular Astra theme announced their integration of stories.

  • The Neve theme also provides integration of Web Stories into their theme.

  • The Newspack project provides native stories support to the Newspack theme and the new capabilities will be released soon.

  • The Web Stories WordPress plugin provides built-in integrations for all WordPress core default themes so that they have this opt-in functionality out-of-the-box.


Below you can take a look at some demo sites using these themes to get a glimpse of what is possible. Can’t wait to see what you would do on your site!

Astra

The Astra theme provides native integration with Web Stories. Check out the Astra theme demo site. In the screenshots below you can again see a selected stories embed using a circle carousel at the top of the theme, a selected stories embed using a box carousel displaying the members of the team, a selected stories embed using a box carousel displaying stories for the menu items, and a selected stories embed using a list layout.

Newspack

Newspack is an all-in-one publishing platform that incorporates industry best practices to help small and medium-sized news organizations produce great journalism. Integration of Web Stories into the Newspack flagship theme is available as of v1.33.0. Take a look at the Newspack theme demo site showcasing embedded stories in different ways. 

What’s next

With the creation capabilities of the Web Stories editor for WordPress and the completely revamped and versatile Gutenberg block, you have everything you need to unleash your creativity and bring the power of the Stories format to your content strategy. And this is just the beginning. Stay tuned and share your stories with the world!

>>> Read the Full Story at The Keyword

Alberto Medina
  • Alberto Medina