社交图标不使用Wordpress上的无限滚动

Question

我们正在为工作中的客户建立一个网站,可以在这里找到:http://ethercreative.net/studio_social/ 这是一个非常简单的wordpress主题,但是无限滚动插件和社交之间的冲突引发了复杂性图标.

每篇文章都是为了在最后显示一个块,里面有G +,FB和Twitter社交图标.这意味着在开始时显示约4个帖子,然后当你滚动时它意味着加载下一组.

这些事情中的每一个都有效,但不是在一起.

当无限滚动加载下一个帖子时,它只显示一个像facebook的按钮,而不是其他两个社交图标.

奇怪的是,它留下了代码块:

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

我知道问题是什么以及为什么会发生这种情况,但我对javascript并不是很了解,也不知道用什么来修复它.

我正在使用Wordpress 3.3.1,带有无限滚动插件(http://wordpress.org/extend/plugins/infinite-scroll/)和digg digg用于社交图标(http://wordpress.org/extend/plugins/Digg的-Digg的/)

无限滚动插件确实能够在抓取新的帖子集后添加onLoad事件.那么我应该在这里添加什么？

感谢您提前提供的所有帮助!祝你今天愉快.

---

更新:经过一些研究,我也修了推特.现在只需要Google Plus即可解决问题.twitter所需的代码是:

!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");

再次更新:找到Google Plus代码:

(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);})();

我学到了什么？在Stack Overflow上询问之前,请进行更多Google搜索.至少是未来人们对这个问题的回答.

Answer 1

您提出的解决方案基本上是重新加载脚本,这是非常低效的,因为您可能在第一组社交按钮的页面加载时加载它们.所有这三种服务都有一种方法来解析一部分或整个文档,以呈现任何新的社交窗口小部件.你想要的代码是这样的:

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(); }

在上面的例子中,el应该是容纳小部件的容器,或者可能只是document.body(会重新呈现所有小部件.)不确定您是否可以使用Twitter缩小上下文,但我相信他们计划添加那.