Infinite Scroll with Lightword and working social buttons

[Update]It seems that there is a problem with the latest version of the plugin. So keep in mind, that the following steps only work with the 2.0b2 version![/Update]

Today I’ve tried to use the very nice Infinite Scroll Plugin that allows automatic loading of additional posts as soon as the user reaches the last post on the blog. So there’s no need for paging to old posts anymore – sweet. Although the developer says it should work out of the box for most of the themes, it didn’t work for mine – Lightword :).

First, you have to configure the so called Selectors that will target the html elements that will be modified by Infinite Scroll. Without correctly configured Selectors, lazy loading won’t work. For the Lightword theme, the following Selectors worked for me:

  • Content Selector: #content-body
  • Posts Selector: #content
  • Navigation Selector: div.newer_older
  • Next Page Selector: div.newer_older span.older a

You can configure those Selectors under Settings/Infinite Scroll. Besides the Generel tab, there is the Selector tab. After that, on-demand loading should work when you reach the last post on the blog.

Another problem was, that the social share buttons, created by the Twitter Facebook Social Share Plugin that I use, didn’t get rendered correctly. Only the Facebook widget appeared (Google Plus and Twitter were missing). I tried two other social share plugins – but these had the same problems. I found out, that this is a common problem and can be fixed with a piece of simple javascript to re-render the widgets.

Luckily Infinite Scroll offers an option in the General settings to execute javascript after the next posts have been loaded. The following code did the trick for me:

var el = document.getElementById('buttoncontainerBox');
//Google Plus
if (typeof gapi !== "undefined") { gapi.plusone.go(el); }
if (typeof FB !== "undefined") { FB.XFBML.parse(el); }
if (typeof twttr !== "undefined") { twttr.widgets.load(); }

In this case, buttoncontainerBox is the id of div that contains the widgets. Only the widgets within the div will be re-rendered. If you have problems finding the container div for your social share plugin, you can also use

var el = document.body;

Here, the whole html body will be re-rendered instead – but with a performance penalty. After that, the social share buttons should appear as in the posts that were loaded initially.

If you found this useful, please let me and others know ;).