An infinite scrolling blog is infinitely better than a regular blog (pun intended). While a regular blog needs to load all of the data for every single blog post, an infinite scrolling blog just loads the data once, which gives a faster experience for all your users. Is this something you want to get your hands on? Well let's get to it then!

In this blogpost we will teach you how to create a HubSpot blog template where the blog pagination automatically loads more posts as the page is scrolled. More commonly known as an infinite scrolling blog.

*This blog was originally published by Erik Rorstrom on 26 February 2016

Infinite scrolling blog

How to create an infinite scrolling blog in Hubspot

We'll start off by creating a simple HubSpot blog-listing using their templating "language" - HUBL.

 

First, do you remember your HUBL basics?
{% Statement %} - Your basic if's and for's etc.
{{ Output }} - The "echo" to your PHP, the "print" to your Python.
{# Comment #} - You know, the stuff that didn't work, that you were to lazy to delete.

 



<div class="post-container">
	{% for content in contents %}
		<div class="blog-post">
			<div class="blog-post-header">
				<h2 class="post-title">{{ content.name }}</h2>
				<div class="post-date">{{ content.publish_date_localized }}</div>
				<div class="post-author">{{ content.blog_author.display_name }}</div>
			</div>
			<div class="post-summary">{{ content.post_summary }}</div>
		</div>
	{% endfor %}
</div>

 

This is your basic Hubspot blog. Use the globally accessable variable "contents", which is a list of the paginated blog posts loaded for this view.


Using a for-loop, we're looping through it, and for each item we display a <div> consisting of some of the post information. To see a full list of available properties see the Hubspot desigers documentation.

 

Now let's turn this mess into a work of art. 

 


.post-container {
	margin-bottom: 30px;
	margin-left: -15px;
	margin-right: -15px;
}

.post-container:after {
	content: '';
	display: block;
	clear: both;
}

.blog-post {
	width: 33.33%;
	float: left;
	padding: 15px;
	margin-bottom: 15px;
}

.blog-post:nth-of-type(3n+1){
	clear:both;
}

 

Your everyday, basic, stolen-from-twitter-bootstrap-grid. The negative margin of the .post-container is there to make sure the .blog-post's are correctly aligned with it's container on the left and right side. We're also making sure every third post-item is located on a new line, regardless of the previous height.

 

Ok - we've done the necessary setup. If you load this in your browser, you'll see your new blog template. But we're not quite there yet. Let's get started on your infinite scroll - as you might have guessed, we'll use javascript to achieve this.

 

How to code the scrolling blog in Hubspot

 

By default HubSpot will provide you with jQuery, with it we'll do an AJAX request to the server requesting the next pages blog posts. As of writing this, Hubspot does not provide the page content in JSON or XML form, which would've been optimal. We'll have to load the full page, and render just the pieces we need.

 

 

// We need to keep track of the last loaded page.
// We'll declare the variable to start at page 2,
// because the first load of posts will be of the second page
var currentPage = 2;
 
// We also need to make sure that we have a variable
// telling us if the last page we loaded was empty
var blogOutOfPosts = false;

// We need to know if we're already fetching
// so that we dont load duplicate content
var fetching = false;

// Using jQuery we'll save the containing element for future reference
var postContainer = $(".post-container");

// We add an event listener for when the page is scrolled
$(window).scroll(function()
{
  // If we're out of posts or already fetching,
  // escape this function and do nothing
  if(blogOutOfPosts || fetching)
    return;
 
 
  // The current offset scrolled from the top
  var windowScroll = $(this).scrollTop();
 
  // The browser window height
  var windowHeight = $(this).height();
 
 
  // The offset of the post container
  var postContainerOffset = postContainer.offset().top;
 
  // The height of the post container
  var postContainerHeight = postContainer.height();
 
  // This line is the bottom of the browser window when scrolled
  var scrollLine = windowScroll + windowHeight;
 
  // The bottom line of the blog listing
  var scrollTarget = postContainerOffset + postContainerHeight;
 
  // If the scrolling line is bigger than the target
  if(scrollLine >= scrollTarget)
  {
    // Set fetching to true to ensure that we pause the ajax
    fetching = true;
    var ajaxUrl = "/blog-url/page/"+currentPage;
    $.get(ajaxUrl, function(data)
    {
      // Create a jQuery element of the response
      var page = $(data);
 
      // Extract the blog posts
      var posts = page.find('.blog-post');
 
      // There were no posts
      if(posts.length == 0)
      {
        blogOutOfPosts = true;
        return;
      }
 
      posts.each(function()
      {
        var blogPost = $(this);
        postContainer.append(blogPost);
      });
      
      setTimeout(function(){
        currentPage += 1;
        fetching = false;
      }, 100);
 
    });
  }
});

 

To improve the UX of this you could also add an animation to the .blog-post, could look something like this:

@keyframes fadeScaleIn {
    from {
		opacity:0;
		transform:scale(0);
	}
	to {
		opacity:1;
		transform:scale(1);
	}
}

.blog-post {
	animation: fadeScaleIn .3s ease;
}

 

Another improvement could be delaying each post's entrence, by adding a timeout to the posts loop:

...
posts.each(function()
{
	var blogPost = $(this);
	setTimeout(function(){
		postContainer.append(blogPost);
	}, 100);
});

...

 

Congratulations! If you have followed all the steps correctly you should have created a template for an inifinite scrolling blog. Bye bye slow loading times, hello great user experience. If you found this post helpful, do me a favour and please leave a comment and share your result. Learn how we can help you with hubspot development here. 

 

Written by Ulrika Alm