Social Icons not working with Infinite Scrolling on WordPress

1 Views

We are making a website for a client at work, which can be found here: http://ethercreative.net/studio_social/
It’s a very simple wordpress theme, but the complications are arising with conflicts between the infinite scrolling plugin, and the social icons.

Each post is meant to display a block at the end with G+, FB and Twitter social icons inside. It is meant to display ~4 posts or so at start, and then as you scroll it is meant to load the next set.

Read More

Each of these things work, but not together.

When the infinite scroll loads the next block of posts, it only shows a facebook like button, and neither of the other two social icons.

The strange thing is though, it leaves behind blocks of the code: 

<span class="icons">
                    <g:plusone size="medium" href="http://ethercreative.net/studio_social/?p=1"></g:plusone>                <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fethercreative.net%2Fstudio_social%2F%3Fp%3D1&amp;locale=&amp;layout=button_count&amp;action=like&amp;width=92&amp;height=20&amp;colorscheme=light" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:92px; height:20px;" allowtransparency="true"></iframe>&nbsp;&nbsp;&nbsp;
                    <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://ethercreative.net/studio_social/?p=1" data-count="horizontal" data-text="Hello world!" data-via="twitter_username"></a></span>
</div>

I know what the issue is and why it’s happening, but I’m really not very good with javascript and do not know what calls to use to fix it.

I am using WordPress 3.3.1, with the infinite scroll plugin (http://wordpress.org/extend/plugins/infinite-scroll/) and digg digg for the social icons (http://wordpress.org/extend/plugins/digg-digg/)

The infinite scroll plugin does have the ability to add onLoad events to run after it has grabbed the new set of posts. So what should I add here?

Thanks for any and all help in advance!
Have a nice day.

Update: After some more research, I have fixed twitter too. Now it is just Google Plus left to fix.
The code required for twitter was: 

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

Update again: Found the Google Plus code too:

(function() {
var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;
po.src = ‘https://apis.google.com/js/plusone.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);
})();

What have I learnt? Do more googling before asking on Stack Overflow. At least heres the answer for people with this issue in future.

Post Views: 1

Related posts

Leave a Reply

3 comments

  1. The solution you presented basically is reloading the scripts, which is pretty inefficient, since you likely loaded them on page load for the first set of social buttons. All 3 of the services have a way to parse a section of the, or the entire, document to render any new social widgets. The code you want would be something like this:

    var el = document.body; 

//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 the above cases, el should be the container that holds the widgets or can probably just be document.body (would re-render all widgets.) Not sure if you can narrow the context with Twitter currently, but I believe they plan to add that.

  2. Like LocalPCGuy suggests, you’re doing a lot more work than necessary to achieve this. Ideally you’d have part of the asynchronous load callback do the work to embed these buttons in just the elements that require them. Or, even better, add them on the server side (if that’s possible) so that the client has to do no work to make the page ready. At least with your solution, the script files will be cached which should make the load time better. The problem is that you’re still making the page work harder than it needs to. As the page infinite scrolls and gets bigger and bigger, this extra work will be more and more significant.

    The ideal flow would be something like:

    1. Load the initial page
    2. Execute the required JS. In this step, make sure you have a function that will embed the social widgets in a given DOM node.
    3. Let the page infinite scroll, trigger and asynchronous request
    4. On async load, have the asynchronous load callback parse the response and then iterate over the DOM it creates passing each of the entries to your widget making function.

    That way, you’re doing the least required work to get the effect you want.