Social Icons not working with Infinite Scrolling on Wordpress

Question

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.

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.

Answer 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.