Insert social media posts into articles

Is this page helpful?

Martina Farkasova

5 minutes

Components

To embed content like social media posts into your articles, you define the structure of the embedded content and then insert components based on that structure into your articles.See how it all works on the example of social media posts like tweets inside articles.

Create a content type for posts

The first step is to create a content type that will define the basic elements of the social media posts. Generally, the one element all social media posts have in common is the URL. Use a text element for posts’ URLs. Set it as required and add validation rules to prevent common mistakes that might break your app, like leaving out https://.

Define display options

Besides URLs, you can add network-specific elements that would give your content creators some control over the rendering of the embedded content. To pick the most common examples:

Dark or light color theme?
Display or hide replies to the post?
Include media from the post, like video or image?

For these options, use mutliple choice elements. Here’s an example of a content type for tweets with options to select a color theme and show or hide replies to the linked post:

We also suggest you divide the URL text element and the control elements into separate groups to make your content type clearly arranged.

Embed posts into articles

Once you have the content type ready, you can start enriching the content by embedding social media posts. You will most likely want to embed the posts into rich text:

In Content & assets, open an article for editing.
Place the cursor into a rich text element where you want to add a post.
In the editor toolbar, click and then .
Select the content type for social media posts.
Fill in the elements.

Here’s an example of how you can display a tweet inserted into an article on your website:

What's next?

Insert code samples into articles

To embed code samples into your articles, you define the structure of the embedded content and then insert components based on that structure into your articles.