14

我们正在为工作中的客户制作一个网站，可以在这里找到：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 /挖掘挖掘/）

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

感谢您提前提供的所有帮助！祝你今天过得愉快。

更新：经过更多研究，我也修复了推特。现在只剩下 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 代码：

(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 上提问之前做更多的谷歌搜索。至少这是未来有这个问题的人的答案。

4

3 回答 3

7

您提出的解决方案基本上是重新加载脚本，这是非常低效的，因为您可能会在第一组社交按钮的页面加载时加载它们。所有 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 的上下文，但我相信他们计划添加那。

于 2012-05-05T02:03:57.617 回答
0

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

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

它完美地工作。

于 2014-02-21T12:17:48.647 回答
0

Like LocalPCGuy suggests, you're doing a lot more work than necessary to achieve this. Ideally you'd have part of the asynchronous load callback do the work to embed these buttons in just the elements that require them. Or, even better, add them on the server side (if that's possible) so that the client has to do no work to make the page ready. At least with your solution, the script files will be cached which should make the load time better. The problem is that you're still making the page work harder than it needs to. As the page infinite scrolls and gets bigger and bigger, this extra work will be more and more significant.

The ideal flow would be something like:

  1. Load the initial page
  2. Execute the required JS. In this step, make sure you have a function that will embed the social widgets in a given DOM node.
  3. 让页面无限滚动、触发和异步请求
  4. 在异步加载时，让异步加载回调解析响应，然后遍历它创建的 DOM，将每个条目传递给您的小部件制作函数。

这样，您只需做最少的工作即可获得所需的效果。

于 2012-05-07T15:42:40.253 回答