Skip to main content

Embedding Web Stories across your site

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.

  • The homepage of a cooking website with Web Stories shown as bubbles at the top of the page
  • Web Story carousel within the 'Our Team' page of the website with Web Stories that highlight each member of the team
  • The menu page of a website where each dish is included in a Web Story carousel
  • The special offerings page of a restaurant website with a 4 by 4 grid of content including dessert, happy hours, and a live chef station.

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. 

  • An example website homepage made with Newspack with news stories listed on the page and Web Story preview bubble images in a carousel at the top of the page
  • A web page made with Newspack with a Web Story carousel to showcase events happening around the reader with rectangular image previews
  • An example news website made with Newspack that showcases a four by four grid of Web Story preview cards on the right side of the page.

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!


by Alberto MedinaGoogle Web Creators via The Keyword

Comments

Post a Comment

Popular posts from this blog

certain keys on my keyboard dont work when "cold"

Hi guys, i have a Lenovo Y520-15IKBN (80WK) and certain keys on the keyboard don't work (e,g,h,8,9,Fn...) but only when the weather is cold. for example in the winter it used to work after certain amount of time when i first boot the laptop and stops working when i stop using it for a while, but now that the weather is hot it works just fine except for the first couple of minutes or when its colder. of course i do realise that it has nothing to do with the outside weather but with the temperature of the computer itself. can someone explain to me why this is happening and how it should be fixed as i cannot take it to the tech service until july even though it's still under warranty because i need it for school. ps: an external keyboard works fine. Submitted April 29, 2018 at 03:35PM by AMmej https://ift.tt/2KiQg05
Post a Comment
Read more

Old PC with a Foxconn n15235 motherboard needs drivers! Help!!

So my Pc corrupted and I had to fresh install windows on it, but now its missing 3 drivers and one of them is for the Ethernet controller! I've tried searching everywhere for the windows 7 drivers but all I seem to find are some dodgey programs saying they will install it for me. Problem is without the ethernet driver I can't bloody connect to the internet. I've been using a USB to try get some drivers on there, but they just end up being useless programmes . I'm also a bit of a noob at these things, I don't understand where to find the names of things in my PC, I've opened it up but I don't understand whats significant and what isnt. If someone has the drivers and can teach me how to install them I'd be very appreciative! Submitted April 29, 2018 at 02:47PM by darrilsteady https://ift.tt/2r76xMZ
Post a Comment
Read more