Load Posts Dynamically using Ghost's API


Note: The API is currently in beta. Some things in the post may change as Ghost solidifies how the API will function.

In this post we are going to show how to load posts dynamically. We are going to be using the default Casper theme, and when a "Load more posts" button is clicked, add more posts to the current page.

First, make sure the public API is enabled.

Basically the way this is going to work is that when the button is clicked, we use AJAX to go grab the next set of posts and build the HTML structure and then append everything to what is currently shown on the page.

If you are not using the default theme there are some things you will need to change, but we will walk you through it. Here is the full code first and then we will walk you through each part of it so you can know how to get it to work for you.

Load more posts button:

Script to load the posts:

I made a bunch of comments in the script, but lets also go through it so you know what to change to make it fork for you.

Below is the first part, we set the variables. apiURL is the url for the blog. You may need to change it, but window.location.href will grab the current root url (ex. https://ghostforbeginners.com) and then append the api url behind it. clientId and clientSecret are for the api, you shouldn't have to change those. nextPage is set to 2 because it assumes that since you loaded the page, it already has the first page of posts and doesn't want duplicates. pagination needs to match the current pagination of your blog so the page is correct. So, pagination being set to 1 means it will load 1 post at a time.

This next part is the function that is going to insert the post. Basically what happens is the function needs to have the post data and the author data passed to it. From there, you start manually building the HTML into a variable. It is annoying, but its the way it has to be done. For each part of the data that is dynamic you add in the postData.title or whatever you need.

You can see in the middle of the function that I stop a few times to check and see if stuff exists before building onto the HTML. At the very end you append the variable to the content ($('#content').append(postInfo);), and then add 1 to the page so if the button gets hit again it loads the next set of posts.

The part above is probably what is going to be the most different for everyone. The HTML for every theme and blog is probably different. So, you may be changing a lot of that to fit your blog's needs

Lastly, we need to actually do the AJAX calls and then when we have the data, send it to the function above. We have to do two different ajax calls. One to get the posts, and the other to get the author data for each post. Some important things to not are that in the post AJAX url, include=tags needs to be there so you can get all the tags for the post, and the clientId and clientSecret do need to be appended to the url.

After the first AJAX call, the script goes through each result it got back and performs another AJAX call to go get the data for the author of the post. Then, once it has the author data, it sends both the post data and author data to the function we showed earlier. It does this for each post sent back and fills in the HTML.

This is a little more complicated than most other posts on this site, but we hope you can take what is shown and adapt it to fit your needs. The full example theme can be viewed at the very top of this post. Let us know if you have any questions in the comments below and we will be happy to help you out!

Script to load the posts: I made a bunch of comments in the script, but lets also go through it so you know what to change to make it fork for you. Below is the first part, we set the variables. `apiURL` is the url for the blog. You may need to change it, but `window.location.href` will grab the current root url (ex. `https://ghostforbeginners.com`) and then append the api url behind it. `clientId` and `clientSecret` are for the api, you shouldn't have to change those. `nextPage` is set to 2 because it assumes that since you loaded the page, it already has the first page of posts and doesn't want duplicates. `pagination` needs to match the current pagination of your blog so the page is correct. So, `pagination` being set to 1 means it will load 1 post at a time. This next part is the function that is going to insert the post. Basically what happens is the function needs to have the post data and the author data passed to it. From there, you start manually building the HTML into a variable. It is annoying, but its the way it has to be done. For each part of the data that is dynamic you add in the `postData.title` or whatever you need. You can see in the middle of the function that I stop a few times to check and see if stuff exists before building onto the HTML. At the very end you append the variable to the content (`$('#content').append(postInfo);`), and then add 1 to the page so if the button gets hit again it loads the next set of posts. > The part above is probably what is going to be the most different for everyone. The HTML for every theme and blog is probably different. So, you may be changing a lot of that to fit your blog's needs Lastly, we need to actually do the AJAX calls and then when we have the data, send it to the function above. We have to do two different ajax calls. One to get the posts, and the other to get the author data for each post. Some important things to not are that in the post AJAX url, `include=tags` needs to be there so you can get all the tags for the post, and the clientId and clientSecret do need to be appended to the url. After the first AJAX call, the script goes through each result it got back and performs another AJAX call to go get the data for the author of the post. Then, once it has the author data, it sends both the post data and author data to the function we showed earlier. It does this for each post sent back and fills in the HTML. This is a little more complicated than most other posts on this site, but we hope you can take what is shown and adapt it to fit your needs. The full example theme can be viewed at the very top of this post. Let us know if you have any questions in the comments below and we will be happy to help you out!