Inserting tweets into blog posts
Embedding content inside rich text is a matter of defining a structure for your content and then filling that structure in with specific content. See how it all works through the example of tweets inside articles.
You will first create a Tweet content model and then add a tweet to a blog post as a component. Once you have everything set up in Kentico Cloud, in your app you'll need to deal with structure in rich text so you can see the Tweets.
Table of contents
Creating a content type for the tweet
The first step is to create a content type that will define the basic content blocks of the tweet:
- From the app menu, choose Content models .
- Click Create new.
- Type Tweet in Content type name.
- Add a Text element for the tweet link and set the element as required.
- Add a Multiple choice element for the display options.
- Set the element to show as Checkboxes.
- Add two options named Hide thread and Hide media.
- (Optional) Add another Multiple choice element for selecting a theme.
- Set the element to show as Radio buttons.
- Add two options named Dark and Light.
- Click Save changes.
The finished Tweet content type can look similar to what you see in the picture.
Inserting a tweet into a Rich text element
Once you have the content type for the tweet created, you can insert it as component into the Rich text element of the Coffee Beverages Explained article. To do this, follow these steps:
- From the app menu, choose Content & Assets .
- Using the filters on the left, select the Article content type to view only articles.
- Open the Coffee Beverages Explained article for editing.
- In the rich-text editor, position the cursor to where you want to add the tweet.
- In the toolbar, click Insert... and then Insert new component .
- Choose Tweet from the list of the content types.
You're now creating a specific component based on the Tweet content type. Make sure to name the item, insert the tweet link and select from the options in the Multiple choice elements.
After you finish, you can continue editing the Coffee Beverages Explained article. Changes made to the tweet are saved automatically.
Tip: To change the position of the tweet within the Rich text element, drag & drop the component as needed.
In the Coffee Beverages Explained article, a tile representing the included component will appear, showing its contents. There are no restrictions on the type of components you can include in the Rich text element.
The final result, as implemented on our Kentico Cloud sample site.
- See how to render your tweets in your rich text.
- Learn when it's best to use components instead of content items in rich text.
- Add code snippets to your blog post using components.
- Learn how to use Linked items elements to create the Related articles section.
- And just to give you some more ideas, the described scenario can also be applied when, for example, inserting a YouTube video to the blog post.