How to add infinite scrolling to Blogger blogs

One nice thing I like about Blogger’s Dynamic Views is that they remove older posts/newer posts links from your blog and load more posts as you scroll to the end of a page.  (This is commonly referred to as infinite scrolling.)  Adding infinite scrolling to your Blogger blog with a traditional template is not that hard.

If you don’t care about the details and you only want to enable the feature on your blog, click on the button below and add the code to your blog.  Infinite scrolling should just work on your blog, in most cases.  If you have a custom template, though, you may need to tweak the code a little.  (Scroll down to “Frequently asked question” section for details.)

If clicking on this button does nothing, or it doesn’t work for some reason, you can add this code manually:

• Add a HTML/JavaScript gadget to your blog.
• Leave the gadget’s title empty.
• Paste the following code as the gadget’s content:

  <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
  <script type='text/javascript' src='//m-misc.appspot.com/js/blogger-infinite-scrolling.js'></script>

• Save the gadget, and you’re done.

The code for the widget is available on GitHub.  Feel free to copy or adapt the code.  A few points worth mentioning:

• This code uses jQuery library, so don’t forget to include it.
• Custom template blogs may have to change the value of postContainerSelector variable in the code.
• I have manually added +1 buttons to my blog.  Dynamically loaded posts won’t have the +1 buttons initialised; to fix that issue, I had to call gapi.plusone.go() every time new posts are added to the page.
• _WidgetManager is a JavaScript object present in Blogger blogs.  You can query this object to find some page metadata.  This code uses _WidgetManager to determine if the current page is showing a single post.  Infinite scrolling is not meaningful when only a single post needs to be displayed.

Frequently asked question

• Q: My blog uses a script/widget that adds post thumbnails or related posts.  When I add infinite scrolling, only the first few posts have thumbnails/related posts.  How to fix that?
  A: Simple answer is that this script doesn’t work well with other scripts that add content to posts.  But if you are willing to change the code, you can get both scripts to work together.  Right after new posts have been added — which is the line after $(postContainerSelector).append(newPosts); in the script — add the JavaScript that will make your other widget update itself.
• Q: The script doesn’t work on my blog.  Can you help me debug it?
  A: While I really wish I could help everyone use this script, it’s practically not possible for me to look at everyone’s blog and see what’s wrong.  If I don’t respond to your comment quickly (or at all), it’s because I am just too busy with things like my day job.  I’m sorry I couldn’t help you with your blog.
• Q: Why can’t I post a comment?
  A: Contact me through Google+ if you need to ask me anything. I believe you can send me a message even if you don’t have a Google+ profile yourself.

Change log

• Mar 9, 2013: Moved the script to m-misc.appspot.com because Google Code is not setting the right content type.  This disabled the script completely in Google Chrome.
• Nov 19, 2012: Version 1.6 was released with support for Automatic Thumbnail and Read More.
• Oct 17, 2012: Version 1.5 was released with support for Facebook buttons and a fix for Disqus integration bug.  Thanks to Alex for sharing Facebook support code in a comment.
• Oct 11, 2012: Version 1.4 was released with support for Disqus comments.  Do not use this version; Disqus integration is broken in this version.
• Sep 20, 2012: Version 1.3 was released with support for Google Analytics.  If a blog uses Google Analytics, the script will register all automatic post loading as pageviews.  To Google Analytics, it will look like the reader clicked on the Older Posts link every time the script autoloads posts.
• May 30, 2012: Version 1.2 was released with fixes for all known bugs.
• Versions up to (and including) 1.1 have known bugs.