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/延伸/插件/ 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缩小上下文，但我相信它们计划添加。

Answer 2

就像LocalPCGuy建议的那样，为了达到这个目的，你所做的工作远远超过必要的工作。理想情况下，您需要部分异步加载回调才能将这些按钮嵌入到需要它们的元素中。或者，更好的是，在服务器端添加它们（如果可能的话），以便客户端不必做任何工作来使页面准备好。至少在您的解决方案中，脚本文件将被缓存，这将使加载时间更好。问题是你仍然使页面的工作比它需要的更难。随着页面无限滚动并变得越来越大，这项额外的工作将越来越重要。

理想的流程如下：

加载初始页面
执行所需的JS。在此步骤中，确保您具有将社交窗口小部件嵌入给定DOM节点的功能。
让页面无限滚动，触发和异步请求
在异步加载时，让异步加载回调解析响应，然后遍历它创建的DOM，将每个条目传递给您的小部件制作函数。

这样，你正在做最少的工作来获得你想要的效果。

Answer 3

在JS文件中添加代码......

addthis.toolbox('.addthis_toolbox');
addthis.counter('.addthis_counter');

效果很好。

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

3 个答案: