[SOLUCIONADO] FB.XFBML.parse No me funciona, no sé donde puede estar el fallo

Luisa29 · #1 (**permalink**) 30/07/2015, 13:06

Hola amigos, resulta que quiero cargar contenido dinámico en un determinado div con ajax, esto funciona bien, pero el contenido que quiero cargar incluye el botón Like y un box de comentarios de facebook, al cargar el contenido nuevo nada de esto funciona, he intentado implementar el FB.XFBML.parse (); pero sin éxito, no sé donde puede estar el fallo, os dejo el código:

index.php

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>prueba parse</title>
<link href="estilo.php" rel="stylesheet" type="text/css" />

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/></script>

    <script>


     function nuevoAjax(){
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}

// Función para cargar los contenidos de forma asíncrona.
// + pagina: fichero cuyo contenido queremos cargar.
// + identidicador del elemento en el que se cargará el nuevo contenido.
function cargarbio(pagina,destino){
var contenedor;
var ajax;

contenedor = document.getElementById(destino);
ajax = nuevoAjax();
ajax.open("GET", pagina, true);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
contenedor.innerHTML = ajax.responseText;
}
}
ajax.send(null);
}

    </script>
<script>
content.load(this.href, function () {
    FB.XFBML.parse();
});
</script>



    </head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/es_ES/sdk.js#xfbml=1&version=v2.4&appId=578756808801583";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>



<div id="centro">
    <div id="botonera">
<div id="botonera-superior">
 <div class="contenedormenu"><ul class="menu-galeria">
<li><a href="#" onClick="cargarbio('comentarios.php','contenido-texto')" _gaq.push(['_trackEvent', 'biografia','ver-biografia'>INICIO</a></li>
     <li><a href="#" onClick="cargarbio('ficha.php','contenido-texto')" _gaq.push(['_trackEvent', 'biografia','ver-biografia'>BIOGRAFIA</a></li>

</ul>

 

</div>
</div>
    </div>
       

 
    <div id="contenido-texto"> <div class="redes-radio"><div class="facb-radio"><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.example.com&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=21&amp;appId=578756808801583" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe></div></div>

<div id="para-comentarios-radio">
          <div class="fb-comments" data-href="http://www.example.com/" data-width="662" data-num-posts="30"></div>
</div>
</div>


  </div>

  </div>
</body>
</html>

Esto son los ficheros que se cargan mediante ajax:

ficha.php

Código HTML:

<div id="para-descripcion">
<div class="redes-radio"><div class="facb-radio"><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2www.example.com&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=21&amp;appId=578756808801583" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe></div></div>

<div id="para-comentarios-radio">
          <div class="fb-comments" data-href="http://www.example.com/" data-width="662" data-num-posts="36"></div>
</div>

comentarios.php

Código:

<div class="facb-radio"><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fhttp://www.example.com&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=21&amp;appId=578756808801583" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe></div>

<div id="para-comentarios-radio">
          <div class="fb-comments" data-href="http://www.example.com/" data-width="662" data-num-posts="36"></div>
</div>

A ver quien me puede echar un cable.

Luisa29 · #2 (**permalink**) 30/07/2015, 14:49

Ya di con el fallo !!!!!!

Había que cargar FB.XFBML.parse(); luego de actualizar la InnerHTML y yo lo colocaba aparte. El código ajax quedaría así:

Código:

   function nuevoAjax(){
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}

function cargarbio(pagina,destino){
var contenedor;
var ajax;

contenedor = document.getElementById(destino);
ajax = nuevoAjax();
ajax.open("GET", pagina, true);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
contenedor.innerHTML = ajax.responseText;




FB.XFBML.parse(document.getElementById('contenido-texto'), function() {        
    document.getElementById('yourContent').innerHTML += document.getElementById('contenido-texto').innerHTML;
});



}
}
ajax.send(null);
}

Marco como solucionado.