How to create a content model for a page with social embeds

Sample design

Here's a page that embeds Instagram posts that we'll use as a reference:

The content model: what's dynamic, what's static

Static Fields
Dynamic Zone

Title

We will use a Text field for this.

1 of 6
< PreviousNext >

Publication Date

We will use a Date field to allow the content authors to control the date that will appear.

2 of 6
< PreviousNext >

Author

For this, we will use a Text field to enter the author's name.

3 of 6
< PreviousNext >

Text block

This content block will consist of a Text field to allow the authors to add their text content.

4 of 6
< PreviousNext >

Instagram embed block

This content block will consist of an Embed Field to add an Instagram post to your page.

5 of 6
< PreviousNext >

Twitter embed block

This content block will consist of an Embed Field to add a Twitter post to your page.

6 of 6
< PreviousNext >

The content model

In the static section of the article we will need the following elements:

  • Page title
  • Release date
  • Author's name

In the Dynamic Zone of the article, there are 3 major content blocks:

  1. Text block
  2. Instagram embed block
  3. Twitter embed block

These 3 blocks will be setup in the dynamic section so that they can be freely mixed and matched to build your stories.

See the introduction to content modeling for more context on dynamic and static sections.

Why is it like that

Selected approach: content blocks, everything dynamic. Given that this you will likely be creating many rich social story articles, we will compose our pages with reusable blocks. This way, the order of the content blocks can vary from page to page, and some of these sections can appear as many times as needed for each story.

Alternative approach: a single Rich Text field. Many content management systems provide a Rich Text field that allows you to add all your text and images in a single field. For some simple article designs, this might be enough!

Possible consequences of the single Rich Text approach. If you choose to take this approach, you'll be at the mercy of the elements provided in the Rich Text field. For example, you would have no way to add videos to your page if this isn't an option in the Rich Text field.

The content model: the fields

Choosing the fields for each section is rather straightforward:

Static Section

  • Text field for the page title
  • Date field for the article release date
  • Text field for the author's name

Dynamic Section

  • Text block consisting of a Text field
  • Instagram embed block consisting of an Embed field
  • Twitter embed block consisting of an Embed field

How to set it up in Prismic

Set up a new custom type

  • Add the fields for the static zone
  • For each of the 3 content blocks, create a separate slice
  • Add the field(s) for each slice as defined above

If you want to try this model in Prismic, copy this JSON instead of setting up the model manually:

CopyExpand/Collapse

What editors will see

When an editor creates a document based on the rich social story custom type created above, they can add any of these slices and fill the placeholders with content.

Special Note for Instagram Embeds

To get the instagram post to display in the correct format you will need to add this to the beginning of the post's url:

Copy
https://api.instagram.com/oembed/?url=

So if the url for your post is the following:

Copy
https://www.instagram.com/p/Bb46nrcFvnI/?taken-by=katsuburger

Then you would need to paste the following into the Embed field:

Copy
https://api.instagram.com/oembed/?url=https://www.instagram.com/p/Bb46nrcFvnI/?taken-by=katsuburger

Note that this applies only for the Instagram posts. For a Twitter post, you only need to paste the post URL.

How to model content for your project Nathan will be glad to help you come up with a solid content model for your project. (It’s free.) Schedule a call