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&locale=&layout=button_count&action=like&width=92&height=20&colorscheme=light" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:92px; height:20px;" allowtransparency="true"></iframe>
<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.