APIs & Integrations

Babak
Contributor

Fetching blog posts via api

SOLVE

Hello,

I'm trying to fetch my blog posts via api so I can make infinite scroll effect on the article page (I want when user scroll at the end of the article, it shows the next article automatically)

I studied this article and follow the steps

https://developers.hubspot.com/docs/api/cms/blog-post

 

The API is working and I can see the data, but when I want to fetch it like this:

 

 

fetch('https://api.hubapi.com/cms/v3/blogs/posts?hapikey=....')
.then(response => response.json())
.then(data => console.log(data));

 

 

It said:

 

No 'Access-Control-Allow-Origin' header is present on the requested resource.

 

 

I know this is because of CORS policy, but I am trying to fetch the data from my own hubspot blog and it seems hubapi.com is not in the allowlist and even with "/" I couldn't access to api.

 

 

fetch('/cms/v3/blogs/posts?hapikey=....')

 

 

Do you have any idea how I can fetch the blog posts via api in my hubspot panel?

 

 

 

0 Upvotes
1 Accepted solution
Babak
Solution
Contributor

Fetching blog posts via api

SOLVE

@dennisedson  Thank you Denis, yes you are right, since I'm not using nodejs and it's a built-in module in hubspot it's better if I avoid using API.

 

@stefen Thank you Stefen, I tried using content.next_post_slug    but since it just retrieve URL/Title/Image I've stop putting more time on it.

 

But I solved my problem in another way, I will put it here so in case in future anyone need it:

I used  blog_recent_posts function, then add pagination for it with help of part of this code , then I used Infinite Scroll js library, and problem solved. 

However, in my case, showing the most recent article on scroll was ok too, but if someone wants to retrieve exactly the next article probably he/she needs to stick to Stefen's plan. 

 

View solution in original post

0 Upvotes
3 Replies 3
Babak
Solution
Contributor

Fetching blog posts via api

SOLVE

@dennisedson  Thank you Denis, yes you are right, since I'm not using nodejs and it's a built-in module in hubspot it's better if I avoid using API.

 

@stefen Thank you Stefen, I tried using content.next_post_slug    but since it just retrieve URL/Title/Image I've stop putting more time on it.

 

But I solved my problem in another way, I will put it here so in case in future anyone need it:

I used  blog_recent_posts function, then add pagination for it with help of part of this code , then I used Infinite Scroll js library, and problem solved. 

However, in my case, showing the most recent article on scroll was ok too, but if someone wants to retrieve exactly the next article probably he/she needs to stick to Stefen's plan. 

 

0 Upvotes
stefen
Key Advisor | Partner
Key Advisor | Partner

Fetching blog posts via api

SOLVE

@Babak @dennisedson you could use the  content.next_post_slug HubL variable in your blog post template then use intersection observer and fetch to get the content from the next page and load it when scrolled to the bottom of the page.

You may want to use jQuery's Load function instead of the vanilla fetch function because it has the ability to load page fragments instead of the entire page: https://api.jquery.com/load/

Stefen Phelps, Community Champion, Kelp Web Developer
dennisedson
Community Manager
Community Manager

Fetching blog posts via api

SOLVE

@stefen , what is your typical strategy for this?

Also, @Babak , be careful with that hapikey.  You don't want that exposed on your front end and I tend to want to avoid it altogether these days.

Thanks,

Dennis




HubSpot Community Developer ShowMake sure to subscribe to our YouTube channel
where you can find the HubSpot Community Developer Show