Many blogging platforms or the CMSs they are based on offer an API for fetching articles, making it possible to integrate them into websites. So if you have been publishing interesting content on Google’s blogger.com, medium.com, on HubSpot, a WordPress-based website, etc., here’s how to retrieve your articles and display them on your Scrivito-powered site.

The main goal of this tutorial is to illustrate the general working principle of consuming content from a platform: Fetch the data using the provided API, store and process this data, and render it so that it becomes useful to the visitor.

We will use HubSpot’s API to fetch articles that were created using their blogging tool. For displaying previews of them, we will build a blogpost overview widget, and link the articles individually to a dedicated page on which a blogpost widget then renders the full post.

Like with HubSpot, you might need an API key for your source platform in order to fetch the desired data. For natural reasons, you would never expose such a key in your app but use, for example, an AWS Lambda function as a proxy instead.

Are you ready? Let’s start.

As usual, we will provide you with the widget class, component, and editing configuration for the new widget.

All the widget needs to know (and the editor will be enabled to specify) is the number of posts to retrieve so the widget class is simple:

Our widget component fetches the specified number of posts when the component has mounted or updated. Our API call for this is asynchronous, and we store the response (delivered in JSON format) in a state variable, making it available to the rendering function. To prevent an infinite loop when updating state, we only fetch the posts if their specified number has changed.

The API request format for fetching your blogposts from HubSpot is
https://api.hubapi.com/content/api/v2/blog-posts/?hapikey=your-api-key. The maximum number of posts to retrieve can be limited using the limit URL parameter (the default is 20). We’ll use the value of our widget’s numberOfPosts attribute for this.

In essence, we iterate the articles and render some of their properties: featured_image, page_title, author_name, author_at, and meta.post_summary. The page title is linked to the page whose permalink is “blogpost”, and the post’s analytics_page_id is added as a parameter to the URL. The latter will be used by our second widget below, the blog post widget, to request the article with this specific ID.

To finalize our widget, let’s add the editing configuration to it. It simply provides the numberOfPosts attibute’s title and description, and sets the initial number of posts to 3.

As indicated above, clicking one of the previews in the overview causes the “blogpost” page to be opened and the post’s ID to be passed in as a URL parameter, id. So the first thing to do would be to create a regular page and assign it the “blogpost” permalink.

Next, let’s create the widget.

This, again, is standard. We want editors to be able to specify the page elements to be displayed. For this, we provide a corresponding attribute, elements:

Like with our overview widget above, the blogpost widget fetches the article asynchronously when the component has mounted. HubSpot’s API request format for fetching a single article by its ID is https://api.hubapi.com/content/api/v2/blog-posts/1234567?hapikey=your-api-key.

After the requested article has become available, i.e. has been stored in the article state variable, its properties are rendered according to the selected page elements mentioned above.

That’s all there is to it.

Now, add this widget to your “blogpost” page, and click an article’s headline on the overview page. You should then see the full article on a new browser tab. :) If you don’t, just add the widget’s editing configuration and set the desired elements in its properties.

For completeness, here’s the widget’s editing configuration:

Integrating third-party services like HubSpot blogposts is not a single-use exercise. What we’ve expanded on here is representative of many other applications in which external data is made available via an API. Whether it’s about supplementing content or points of data from other sources, or integrating remote functionality – the steps are the same.

Regarding our above use case, consider changing the layout, making further blogpost properties selectable and rendering them, for example. Happy coding!