personalizado - plugin de pagina facebook

Actualización del botón Me gusta de Facebook después de cargar AJAX

Question

Esta pregunta ya tiene una respuesta aquí:

• Cómo agregar un botón "Me gusta" de Facebook a una página impulsada por AJAX 7 respuestas

Tengo que implementar un botón similar a Facebook donde la URL se toma de una solicitud ajax ... eso significa que configuro el atributo "href" después de la carga de la página. desafortunadamente, en este momento la url ya está configurada, así que cuando te guste, tomará la url de la página real como url ... ¿hay alguna manera de actualizar el botón like?

Answer 1

Si está utilizando XFBML, no conozco una forma de cambiar la URL. Sin embargo, si usa un iframe, este fragmento de código debería funcionar:

HTML

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.google.com&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true" id="theiframe"></iframe>
<br />
<input id="url" />
<input id="btn" value="Change" type="button">

jQuery

$(''#btn'').click(function(){
    url = "";

    url += ''http://www.facebook.com/plugins/like.php?'';
    url += ''href='' + $(''#url'').val() + ''&layout=standard&'';
    url += ''show_faces=true&width=450&action=like&'';
    url += ''font&colorscheme=light&height=80'';

    $(''#theiframe'').attr({''src'': url});
});

Answer 2

Si usa XFBML, entonces debe envolver su código de botón similar, ej.

<fb:like href="http://example.com" send="true" width="450" show_faces="true"></fb:like>

en un div o span, por ejemplo:

<span class="fb-like">    
  <fb:like href="http://example.com" send="true" width="450" show_faces="true"></fb:like>
</span>

Entonces, después de obtener una nueva URL a través de ajax, debes borrar el widget de Facebook ya generado y reemplazarlo con un nuevo código fb: like

jQuery(''.fb-like'').html(''<fb:like href="http://example.com" send="true" width="450" show_faces="true"></fb:like>'');

Y que tienes que inicializar el botón de me gusta de Facebook otra vez

FB.XFBML.parse();

El código final podría ser similar a este. Supongamos que la respuesta contiene una nueva URL pura

<span class="fb-like">    
  <fb:like send="true" width="450" show_faces="true"></fb:like>
</span>
<script type="text/javascript">
$.ajax({
  url: "getMeUrl.php",
  success: function(url){
    $(''.fb-like'').html(''<fb:like href="''+url+''" send="true" width="450" show_faces="true"></fb:like>'');
    FB.XFBML.parse();
  }
});
</script>

Resumen:

To refresh facebook like button (or any other facebook XFBML) you have to:
1) destroy existing initialized widget (clear the content of XFBML code wrapper)
2) add new XFBML code into wrapper
3) initialize new code via FB.XFBML.parse();

Answer 3

Si está utilizando jQuery, hay una solución realmente fácil y hábil para este problema:

$(document).ajaxComplete(function(){
    try{
        FB.XFBML.parse(); 
    }catch(ex){}
});

Answer 4

Si está utilizando fbml, puede crear y analizar el elemento sobre la marcha, vea esta respuesta para más detalles:

Cómo agregar un botón "Me gusta" de Facebook a una página controlada por AJAX

Si usa iframes, no necesita volver a crear la url, solo actualice el iframe. Por ejemplo, para actualizar todos los iframes en la página:

$("iframe").each(function(){
  $(this).attr(''src'', $(this).attr(''src''));
});