2Aug/127

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 div.post
  • 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); }
 
//Facebook
if (typeof FB !== "undefined") { FB.XFBML.parse(el); }
 
//Twitter
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 ;) .

Posted by Veit Guna

Tagged as: infinite scroll, lightword

Recent search terms: infinite scroll not rendering facebook

  • Dopefish

    Hey there,

    I’ve just run into this exact problem, but I can’t figure out where or how to edit the selectors. Since it’s not mentioned in your post, nor does it seem like google gives any good advice, I suspect it’s something super-simple.

    Also, did you use the Jetpack Infinite-Scroll or the standalone one? (Maybe there’s no difference…)

    • https://plus.google.com/u/0/102270807358639831457?rel=author Veit Guna

      Actually, I can remember having the same problem back then ;) .
      Just take a look at Settings/Infinite Scroll. Then besides the General tab, there is a Selectors tab. One can overlook that because it looks disabled/grey :) .
      Let me know if that works for you. I’ll update the post accordingly.

  • Dopefish

    Yes, it’s working perfectly, thank you! :)

    I was trying to get it to work with the Jetpack plugin (which has infinite scroll in it) to lower plugin imprint, but it seems that the two plugins were quite different after all.

    • https://plus.google.com/u/0/102270807358639831457?rel=author Veit Guna

      I’m glad to here that :) ! Thanks for reporting back.

  • Dopefish

    If you don’t mind me asking, how did you implement that social share to have a fixed float position as that, aswell as make it disappear if it goes outside of the screen? :)

    • https://plus.google.com/u/0/102270807358639831457?rel=author Veit Guna

      I’m simply using the plain vanilly diggdigg plugin. Almost default configuration. It automatically disappears when you scroll out of article scope towards the comments. nothing special there.

  • Dopefish

    Ahh, I see. Thanks again for taking the time to respond. I thought you were still using the plugin mentioned in this post ;)