Social Icons no funciona con Infinite Scrolling en Wordpress

Question

Estamos haciendo un sitio web para un cliente en el trabajo, que se puede encontrar aquí: http://ethercreative.net/studio_social/ Es un tema de WordPress muy simple, pero las complicaciones surgen con conflictos entre el plugin de desplazamiento infinito y los íconos sociales

Cada publicación está destinada a mostrar un bloque al final con los iconos sociales G +, FB y Twitter dentro. Está destinado a mostrar ~ 4 publicaciones más o menos al inicio, y luego a medida que se desplaza está destinado a cargar el siguiente conjunto.

Cada una de estas cosas funciona, pero no juntas.

Cuando el desplazamiento infinito carga el siguiente bloque de publicaciones, solo muestra un botón de Facebook y ninguno de los otros dos íconos sociales.

Lo extraño es, sin embargo, que deja tras de bloques de código:

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

sé cuál es el problema y por qué está sucediendo, pero realmente no soy muy bueno con javascript y no sabe lo que llama a usar para arreglarlo.

Estoy usando Wordpress 3.3.1, con el plugin infinite scroll (http://wordpress.org/extend/plugins/infinite-scroll/) y digg digg para los íconos sociales (http://wordpress.org)/extender/plugins/digg-digg /)

El plugin infinite scroll tiene la capacidad de agregar eventos onLoad para ejecutar después de que ha capturado el nuevo conjunto de mensajes. Entonces, ¿qué debo agregar aquí?

¡Gracias por toda la ayuda con anticipación! Que tengas un buen día.

---

Actualización: Después de algunas investigaciones adicionales, también he corregido el twitter. Ahora solo queda Google Plus para reparar. El código necesario para Twitter fue:

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

Update de nuevo: Encontrado el código de Google Plus también:

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

¿Qué he aprendido? Haga más google antes de preguntar sobre Stack Overflow. Al menos aquí está la respuesta para las personas con este problema en el futuro.

Answer 1

La solución que presentó básicamente es volver a cargar los scripts, lo que es bastante ineficiente, ya que probablemente los cargó en la carga de la página para el primer conjunto de botones sociales. Todos los 3 servicios tienen una forma de analizar una sección del documento, o la totalidad, para representar nuevos widgets sociales. El código que desea sería algo como esto:

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

En los casos anteriores, el debería ser el recipiente que contiene los widgets o probablemente puede ser document.body No está seguro (que volver a hacer todos los widgets.) si puede reducir el contexto con Twitter actualmente, pero creo que planean agregar eso.

Answer 2

Como lo sugiere LocalPCGuy, está haciendo mucho más trabajo de lo necesario para lograrlo. Idealmente, tendría que hacer parte de la devolución de llamada de carga asíncrona para incrustar estos botones solo en los elementos que lo requieren. O, mejor aún, agréguelos del lado del servidor (si es posible) para que el cliente no tenga que trabajar para preparar la página. Al menos con su solución, los archivos de script se almacenarán en caché, lo que debería hacer que el tiempo de carga sea mejor. El problema es que todavía estás haciendo que la página trabaje más de lo necesario. A medida que la página infinita se desplaza y se hace más y más grande, este trabajo adicional será cada vez más significativo.

El flujo ideal sería algo así como:

1. carga la página inicial
2. ejecutar la JS requeridos. En este paso, asegúrese de tener una función que incruste los widgets sociales en un nodo DOM determinado.
3. Deje que la página de desplazamiento infinito, gatillo y solicitud asincrónica
4. En la carga asíncrona, tienen la devolución de llamada de carga asíncrona analizar la respuesta y luego iterar sobre el DOM crea pasando cada una de las entradas a su función de widget de decisiones.

De esta manera, usted está haciendo el menor trabajo requerido para obtener el efecto que desea.

Answer 3

agregue el código en archivos JS ...

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

Funciona perfectamente.