社交图标不使用Wordpress上的无限滚动 [英] Social Icons not working with Infinite Scrolling on Wordpress

问题描述

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

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.

每个帖子都是为了最后用G +，FB和Twitter社交图标显示一个块。它的意思是在开始时显示约4个帖子，然后当你滚动时它意味着加载下一组。

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.

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

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&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的态度真的不太好并且不知道用什么来修复它。

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.

我使用的是Wordpress 3.3.1，带有无限滚动插件（http://wordpress.org/extend / plugins / infinite-scroll /）和digg digg用于社交图标（http://wordpress.org/extend/plugins/digg-digg/）

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

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

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.

更新：经过一些研究后，我也修了一下twitter。现在只需要Google Plus即可解决问题。
twitter所需的代码是：

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

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

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）;
}）（）;

(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搜索。至少是未来人们对这个问题的回答。

What have I learnt? Do more googling before asking on Stack Overflow. At least heres the answer for people with this issue in future.

推荐答案

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

The solution you presented basically is reloading the scripts, which is pretty inefficient, since you likely loaded them on page load for the first set of social buttons. All 3 of the services have a way to parse a section of the, or the entire, document to render any new social widgets. The code you want would be something like this:

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应该是容纳小部件的容器，或者可能只是文档.body（会重新渲染所有小部件。）不确定你是否可以缩小当前Twitter的上下文，但我相信他们计划添加它。

In the above cases, el should be the container that holds the widgets or can probably just be document.body (would re-render all widgets.) Not sure if you can narrow the context with Twitter currently, but I believe they plan to add that.

这篇关于社交图标不使用Wordpress上的无限滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！