DEV Community: Albert Soriano

How to create a list of random articles in Hubspot

Albert Soriano — Thu, 24 Mar 2022 15:53:10 +0000

If you are developing a new Blog using Hubspot CMS, you will probably need to create a blog listing page. While the "default" behaviour of these listing pages is to display the latest articles in order, you can actually play around and create different listing "logic".

In this article I would like to show you how to create a listing of random articles in Hubspot. This could be useful if you want to have some kind of blog collection somewhere in your page to display different articles for each page visit.

First of all, we need to get our blog posts. To achieve this, we could use the following two functions:

To be honest, since we will be showing random posts, it doesn't really matter which function we use. Just keep in mind the difference between them in case you want to add some extra logic to this "randomness". Also, remember these functions will return maximum 200 articles.

Let's go ahead and set a variable articles that will include 30 blog posts.

{% set articles = blog_recent_posts("default", 30) %}

Now it's time to loop through our articles.
But here's the catch! Instead of looping through our article's array as it is, we will use the shuffle filter to randomize the order of iteration through the sequence.

{% set articles = blog_recent_posts("default", 30) %}

{% for article in articles|shuffle %}
    <a href="{{ article.absolute_url }}">{{ article.name }}</a>
{% endfor %}

The previous code will display all our 30 articles in random order, but what if we want to display only 5 articles for example?

In this case, we will use the variable loop.index to make sure we only display content during the 5 first loop iterations.

{% set articles = blog_recent_posts("default", 30) %}

{% for article in articles|shuffle %}
    {% if loop.index <= 5 %}
        <a href="{{ article.absolute_url }}">{{ article.name }}</a>
    {% endif %}
{% endfor %}

And that's it! Easy, right?

Here are some takeaways you should keep in mind:

Always get more articles in your articles variable than the number of articles you want to display. Otherwise you would always show the same content.
If you want to use this random functionality in your main listing page, you can use the variable contents instead of getting articles using the two functions mentioned before.
Remember to read Hubspot's documentation when using a function or filter as some of them have limitations.
The filter |shuffle will affect your prerendering. To avoid it, it's recommended to use Javascript.

How to have multiple Blog post templates in Hubspot

Albert Soriano — Sun, 19 Dec 2021 20:32:00 +0000

2025 UPDATE: I've simplified this solution! To see the updated version, please visit the 7bits blog.

If you want to create a Blog in Hubspot, you will notice that it requires you to have two templates, one for listing pages and the other one for blog posts.

While it is great to have two templates for different types of pages, what if you want to have more than one template for your blog posts?

Imagine you want to have two different types of blog posts, one for company related news and another one for industry related news. And now imagine you want to have a different template for each type, so they look a bit different and include different elements.

While Hubspot doesn't allow you to choose the template for each blog post, this is something we can achieve using custom modules.

Create a template selector custom module

The first thing you need to do is create a module that will allow you to select what blog post template you want.

This will allow content authors to easily select the template they want for their blog posts, all they will need to do is select the template from a dropdown list that will appear in the modules sidebar.

There are different ways to create a module, but we will do it through the Design Manager as I think it's the easiest way to do it.

Go to the Design Manager, find/create a folder where you want to store your modules, right click on it and create a new file. Then select Module.

It's important to note that we will need a Local Module because the module's value has to be different for each blog post (or landing page as this can be applied to landing pages as well if needed). Your module settings should look like this:

Once you've created the module, we will add the options for all the blog templates you want to have in your page.

To be honest, we just need one field here, which in our case will be a Choice field as in my opinion is the clearest way for content authors to choose the blog template.

Let's keep it simple by adding just 2 template options. You can modify this module to add as many template options as you want, together with more module options if needed.

I will call the module "Blog template selector" (blog_template_selector) and it looks like this:

Since we will use this module just for "logic", we will not add any HTML, CSS or JS to it.

Create your main and partial templates##

The template logic will work like this:

We will have a main template for Blog posts that will automatically be assigned to each new article. This template will include our template selector module.
We will have two (or as many as needed) partial templates that will be loaded into the main template according to the selected template in the module.

To visually explain all of this, I've created a main global template (main_template.html) and two partial templates (blog_template_one.html & blog_template_two.html).

Add the template selector to your template

Our next step is to add the module we've created to our main template (main_template.html).
In order to add a module to a template, go to the module's options, scroll to the bottom and copy the code in Template Usage section. It should look like this:

{% module "module_16399418628793" path="/blog_template_selector/blog_template_selector", label="blog_template_selector" %}

The next step is to add this code to our main template.

Load partial templates based on the module

Now that our module is added to the main template, it's time to add the logic that will load our partial templates.

This logic is as simple as an IF statement. Our main template should look like this:

<!--
    templateType: blog
    isAvailableForNewContent: true
-->
{% module "blog_template_selector" path="/blog_template_selector/blog_template_selector", label="blog_template_selector", export_to_template_context=True %}


<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ content.html_title }}</title>
    <meta name="description" content="{{ content.meta_description }}">
    {{ standard_header_includes }}
  </head>
  <body>
    {% if widget_data.blog_template_selector.template == 'template_1' %}
      {% include '/blog_template_selector/blog_template_one.html' %}
    {% else %}
      {% include '/blog_template_selector/blog_template_two.html' %}
    {% endif %}
    {{ standard_footer_includes }}
  </body>
</html>

Some important things to mention here:

It's important that your templateType is 'blog'
Make sure your module has the export_to_template_context=True field
Since 'module_16399418628793' is not an ideal name for a module in our code, I've renamed it to 'blog_template_selector'

Select the template for your blog post

Everything should be ready! Now content authors should be able to select the template while editing an article. It's as simple as selecting the template in our module as you can see below.

Update tags using Hubspot API

Albert Soriano — Thu, 19 Aug 2021 10:13:35 +0000

Hello Dev.to community!

My name is Albert Soriano, I'm a Web Developer at Avast Software and this is my first Dev.to post. I hope some of you find it useful!

Today I'm going to talk about Hubspot tags and how to automatically tag articles by using Hubspot's API.

For those who don't know what Hubspot tags are, here's what the documentation says:

Tags allow you to manage your blog posts by subject. Once you've added tags to your posts, you can customize your templates to link to a feed of all posts by tag. You can also add a post filter module so visitors can filter posts by tag.

Adding tags is usually a manual process where content authors manually tag articles with a tag or with multiple tags. It's a very simple process in Hubspot, but what if you need to tag several articles at once?

Tagging hundreds of articles manually is extremely time consuming, but luckily we can use Hubspot's API to help us tagging articles automatically.

The first thing you need to do is find the ID of your new tag. This is a bit tricky since Hubspot doesn't provide a clear way to get the tag ID, but you can find it using the API to list all your tags and their information (name, ID, etc.).

To get the tag ID we will use Hubspot's API test calls to retrieve data from our tags.

Go to the API documentation and run a test call

Test calls will require your API key. To get the API key, go to Hubspot, Settings, API key.

Now that you have the API key, go to Hubspot's API documentation (here), find the "Get all Blog Tags" function and run it.

The response should look like this:

All you have to do is find your tag and copy the ID.

Retrieve all blog posts from your Blog

There are many ways to approach this, but our second step in this process will be to retrieve all blog posts from our Blog and store them in an array. We will then update the tags of each blog and will call the API to update the information in Hubspot.

To retrieve all blog posts and store them in our code, we will use the following code (all code can be found in this repository):

function callApi(){


  var options = {
  method: 'GET',
    url: 'https://api.hubapi.com/cms/v3/blogs/posts',
    qs: {hapikey: accountKey, limit: limit, offset: offset},
    headers: {accept: 'application/json'}
  };


  request(options, function (error, response, body) {
    if (error) throw new Error(error);

    const res = JSON.parse(response.body)
    const posts = res.results

    isEnd = posts.length === 300 ? false : true

    posts.forEach(element => {
      offset++
      //Add here any filtering options you want. For example, now I select the blogs to update based on the URL as I have different domains in my account. Feel free to change this logic to something that suits better your needs
      if(element.url.includes(domainURL)){
        blogs.push(element)
      }
    });

    checkIfFurtherNeeded();

  });
}

The previous code will store our all blog posts into the blogs array. Then it will run the function checkIfFurtherNeeded() that will check if there are still blogs to process or if it can start updating tags.

It's important to mention that in this example I'm filtering the blogs by URL as I have different domains in my account. The API will return all blog posts in my account, but it doesn't mean that I have to update them all, I can filter the blogs according to some logic and update only the ones I need.

Update tags in blog posts

Once we have all our blog posts, it's time to add the new tag to the tag list. To do that, we can use the following code:

/**
 * updateHubTags Evaluates is a blog post includes the tag to be added and calls the function to do it
 */
function updateHubTags() {
  blogs.forEach(post =>{
    if(!post.tagIds.includes(newTagId)){
      UpdateTag(post)
    } 
  }) 
}


/**
 * UpdateTag Executes a call to Hubspot's API en processes the data
 * @param  {Object} blog This object includes the information of the blog post where we will add the tag
 */
function UpdateTag(blog){

  //Update a blog post
  var request = require("request");

  blog.tagIds.push(newTagId) //Add new tag to the array of tag

  var options = {
    method: 'PATCH',
    url: `https://api.hubapi.com/cms/v3/blogs/posts/${blog.id}`,
    qs: {hapikey: accountKey},
    headers: {accept: 'application/json', 'content-type': 'application/json'},
    body: {
      tagIds: blog.tagIds
    },
    json: true
  };

  request(options, function (error, response, body) {
    if (error) throw new Error(error);

    console.log(`Article ${blog.htmlTitle} updated`);
  });
}

And that's all! With the code above you will be able to automatically tag your blog posts with a specific tag, saving a lot of time to content authors.

Here are some things to keep in mind:

The variable accountKey should include your API key.
Keep in mind that Hubspot's requests return only 300 elements (but code above solves it by doing a request several times until all blog posts are obtained).
You can filter the blogs as you want. In the example above I filter the blogs by URL because I have different domains in the same account.

All the code can be found in my Github account:

albertsg / hubspot-api-scripts

JS scripts to perform different operations in Hubspot using their API

Hubspot API scripts

The scripts contained in the scripts folder will help you doing different tasks with Hubspot's API

Requirements

To be able to use the script, you will need:

NodeJS installed. You can install it from this link.
A Hubspot account.
An API key from your Hubspot account. Follow this link for more information.

How to run a script

In order to run a script, access to your terminal and run node script-name.js. Please note that the script might take some time to run, depending on the number of calls and data required.

Scripts

Add a tag to a blog post

If you need to add a tag to multiple blog post, you can use the script tag-update.js.

This script will call the API as many times as needed to retireve ALL blog posts from your account (API is limited to 300 posts per call) and…

View on GitHub

Feel free to contribute to the code, I'm sure it can be optimized in many different ways!