2010-05-04 9 views
11

me gustaría cambiar la URL a me gusta de un FB: Me gusta botón dinámicamente con javascript.Actualizar FB: Me gusta URL dinámicamente usando JavaScript

ahora solo he podido cambiar el atributo href de la etiqueta fb:like (he pegado el código a continuación). pero simplemente cambiar el href no parece funcionar. Tal vez tenga que volver a iniciar el FB: Como el botón, pero hasta ahora no puedo encontrar la manera ..

function update_share(container, url) { 
    // update fb:like href value 
    var container = container[0] || document.body; 
    var button = container.getElementsByTagName('fb:like'); 
    button[0].setAttribute('href', url); 
} 

cualquier ayuda se agradece. THX ..

Respuesta

23

Funciona para mí para la etiqueta XFBML así sin usar iframe FB e incluso funciona con múltiples FB como las llamadas de AJAX

Sólo se necesita para envolver todo el código XFBML en JS/jQuery y analizar como se muestra a continuación :

$('#like').html('<fb:like href="' + url + '" layout="button_count" show_faces="false" width="65" action="like" font="segoe ui" colorscheme="light" />'); 
if (typeof FB !== 'undefined') { 
    FB.XFBML.parse(document.getElementById('like')); 
} 

código HTML:

<span id="like"></span> 

Surley esto va a ser útil para más chicos :)

+2

I ha probado esta solución y funciona bien. Gracias. – Curlas

+0

¡Bienvenido Curlas! –

+1

¡Excelente respuesta!¡Gracias, Mohammed! – bestfriendsforever

2

yo creo que hay algunas opciones ...

  1. Retire el elemento, construir y añadir una cadena de XFBML y luego analizar el padre objeto una llamada XFBML.parse.

  2. Retire el elemento o contenedor Es decir, construir y añadir un objeto real utilizando XFBML

  3. construir un contenedor de marco flotante se pasa en la url como (con un GET) de la página principal. Puede hacer esto sin usar un back-end real si puede obtener la cadena de consulta en JS. A continuación, cree el marcado antes de iniciar el SDK de Facebook y se mostrará un botón similar. Facebook iframes todas sus cosas de todos modos, por lo que este método no es tan torpe como parece. Intenté esto, funciona bien.

8

otras soluciones:

en lugar de su FB: objeto como, escribir iframe FB en su html así:

<iframe id="face" name="face" src="http://www.facebook.com/plugins/like.php?href=http://www.google.fr&layout=button_count&show_faces=false&width=400&action=like&font=arial&colorscheme=light" allowtransparency="true" style="border: medium none; overflow: hidden; width: 400px; height: 21px;" frameborder="0"scrolling="no"></iframe> 

y ahora se puede cambiar con javascript con esta función:

function setUrl(url) 
{ 
    sUrl = url; 
    url = "http://www.facebook.com/plugins/like.php?href="+sUrl+"&layout=button_count&show_faces=false&width=400&action=like&font=arial&colorscheme=light"; 
    document.getElementById('face').setAttribute('src', url); 
    //alert("url : "+url); 
} 

cuando se cambia el src, el iframe FB se actualiza.

8

Para REINIT botones sociales utilizo este código:

//Facebook like 
if(typeof(FB) !== 'undefined') 
    FB.XFBML.parse(document.getElementById('fblike')); 

//Google plus one 
if(typeof(gapi) !== 'undefined') { 
    gapi.plusone.render(document.getElementById('gplus'),{ 
     'href':location.href, 
     'annotation':'bubble', 
     'width': 90, 
     'align': 'left', 
     'size': 'medium' 
    }); 
} 

//Twitter tweet button 
if(typeof(twttr) !== 'undefined') { 
    $('.twitter-share-button').attr('data-url',location.href); 
    twttr.widgets.load(); 
} 

Con el código HTML siguiente manera:

<div style="float:left;margin-top: 5px;width:80px;"> 
    <div id="gplus" class="g-plusone" data-size="medium"></div> 
</div> 
<div style="float:left;margin-top:5px;width:90px;"> 
    <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a> 
</div> 
<div style="float:left;margin-top:5px;width:80px;" id="fblike"> 
    <fb:like send="false" layout="button_count" width="100" show_faces="false"></fb:like> 
</div> 
+0

¿sabes cómo hacer lo mismo con los botones de Linkedin? Este es un código muy útil – tsukimi

+0

Encontré algo [aquí] (https://developer.linkedin.com/documents/creating-member-profile-plugin) para cualquier persona interesada – tsukimi

+0

No, no lo hago. Pero creo que es similar, solo necesitas invstigate el proceso de renderizado del botón. También puedes intentar usar los botones ShareThis, tienen una buena API. http://sharethis.com/ –

Cuestiones relacionadas