ajax - trata - video viral de la moto

integra el botón "me gusta" de facebook con contenido cargado dinámicamente

Question

El sitio web en el que estoy trabajando consiste en una lista de elementos cargados dinámicamente a través de AJAX. A medida que se desplaza por la página, se cargan más elementos.

Ahora mi cliente desea agregar un botón de "Me gusta" de Facebook (y el número de personas a quienes les gustó esto) a cada uno de estos elementos.

Integrar el botón "me gusta" predeterminado no es un problema, pero ¿cómo agrego el botón "me gusta" a los elementos cargados a través de AJAX? Si se carga un nuevo elemento, ¿cómo sabe la API de Facebook que hay un nuevo botón de "me gusta" en el árbol DOM para el que necesita obtener el recuento de cuántas personas les gustó esto?

¿Alguien tiene experiencia en cómo hacer esto? ¿Hay algún ejemplo disponible? Mi búsqueda no encontró nada útil, excepto la integración del botón estándar.

Answer 1

Última respuesta tardía pero por si alguien la necesita.

Acabo de terminar mi proyecto casi igual al descrito. Mi página recibe publicaciones a través de ajax en formato json, y yo crea elementos dom, incluido el botón Me gusta de Facebook, el botón de tweet y el botón de Google más uno. He tenido muchos problemas hasta que lo hago bien. El principal problema fue que los botones similares no funcionaron como se esperaba una y otra vez ... Después de un tiempo encontré una solución funcional.

Estoy usando facebook js sdk (puede encontrar información útil here )

<div id="fb-root"></div>
<script>
var isFBLoaded = false;
window.fbAsyncInit = function() {
FB.init({
appId: '' your api key'',
status: true,
cookie: true,
xfbml: false
});
isFBLoaded = true;
...
renderFBqueue(); // i ll explain this later
};
(function() {
var e = document.createElement(''script'');
e.async = true;
e.src = document.location.protocol + ''//connect.facebook.net/en_US/all.js'';
document.getElementById(''fb-root'').appendChild(e);
}());
</script>

Parece que hay un problema con el contenido de ajax y el método FB.XFBML.parse() o algo así. Encontré una solución en el foro de desarrolladores de fb y la modifiqué para adaptarla a mis necesidades. Entonces, después de recibir el contenido json (varias publicaciones) de la llamada ajax, creo todos los elementos con jquery, excepto los botones "me gusta". Puse la URL de la publicación (y algunos otros datos relacionados) en la función de cola y llamada con tiempo de espera para crear / analizar esos botones.

var fb_queue = [];
...
function getMorePosts(){
$.get(''moreposts.php'', params, function(response){
if (response) createPosts(response);
}, ''json'');
}
...
function createPosts(data){
...
for (var key in data.posts) {
...
fb_queue.push({ id : data.posts[key].id , url : data.posts[key].url });
}
... // elements are created
}

y finalmente crear y analizar fb como botones

function parseFBqueue(){
if(isFBLoaded){
if (fb_queue.length==0) return false;
$.each(fb_queue, function (j, data) {
window.setTimeout(function () {
renderFBLike(fb_queue.shift());
}, (j + 1) * 300);
});
};
}
function renderFBLike(data){
var fblike = ''<fb:like href="''+data.url+''" layout="button_count" ... ></fb:like>''
$(''#fbdiv-''+data.id).append(fblike);
FB.XFBML.parse(document.getElementById(''fbdiv-''+data.id''));
}

Espero que a alguien le resulte útil, sé que lo haría hace una semana :)

Answer 2

El botón Me gusta de Facebook es solo un <iframe> en la página. No hay ninguna "API de Facebook" en ejecución, como tal. La cuenta similar es parte del contenido dentro del <iframe> , y se carga con el resto del contenido cuando el navegador carga la URL src . El código para un botón me gusta es como:

<iframe src="http://www.facebook.com/plugins/like.php?href=YOUR_URL"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"></iframe>

Entonces, en esencia, todo lo que debe hacer es agregar un nuevo <iframe> a la página en la ubicación correcta y con la URL src correcta, y todo el resto se manejará automáticamente para usted.

Answer 3

Respuesta tardía, pero podría usar la función de análisis de la API de Facebook en una devolución de llamada de su función que carga los nuevos elementos para representar los nuevos botones me gusta:

FB.XFBML.parse();

También puede dirigir el analizador a los elementos que desea renderizar, para que no vuelva a renderizar los botones similares ya existentes:

FB.XFBML.parse(document.getElementById(''foo''));

Esto es directamente de los documentos: https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

Answer 4

llame a esta función javascript después de completar ajax;)

fb_sharepro_render()