php - 社交图标不适用于 Wordpress 上的无限滚动

Question

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

每个帖子都应在末尾显示一个 block ，其中包含 G+、FB 和 Twitter 社交图标。它旨在在开始时显示大约 4 个帖子，然后当您滚动时它意味着加载下一组。

这些都有效，但不能一起使用。

当无限滚动加载下一个帖子 block 时，它只显示一个类似 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/扩展/插件/digg-digg/)

无限滚动插件确实能够添加 onLoad 事件，以便在抓取新的一组帖子后运行。那么我应该在这里添加什么？

提前感谢您提供的所有帮助!祝你有美好的一天。

---

更新:经过更多研究，我也修复了 Twitter。现在只剩下 Google Plus 可以修复了。推特所需的代码是:

!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代码:

(函数(){ var po = document.createElement('脚本'); po.type = '文本/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('脚本')[0]; s.parentNode.insertBefore(po, s); })();

我学到了什么？在 Stack Overflow 上询问之前多做一些谷歌搜索。至少这里是 future 遇到此问题的人的答案。

Answer 1

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

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 的上下文，但我相信他们计划添加它。