2010-05-04 14 views
11

Vorrei modificare l'URL a piacere di un FB : come il pulsante in modo dinamico utilizzando javascript.: URL simile utilizzando JavaScript

in questo momento sono stato solo in grado di modificare l'attributo href del tag fb:like (ho incollato il codice di seguito). ma semplicemente cambiare l'href non sembra funzionare. forse devo ri-avviare la FB: pulsante Like, ma finora io non riesco a capire come ..

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

qualsiasi aiuto sarebbe apprezzato. thx ..

risposta

23

Funziona per me per il tag XFBML così senza usare FB iframe e funziona anche con più FB come le chiamate per AJAX

Hai solo bisogno di avvolgere l'intero codice XFBML in JS/jQuery e analizzare come mostrato di seguito :

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

codice HTML:

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

Burbero questo sta per essere utile per più ragazzi :)

+2

I ho testato questa soluzione e funziona bene. Grazie. – Curlas

+0

I tuoi graditi ospiti! –

+1

Ottima risposta!Grazie Mohammed! – bestfriendsforever

2

Penso che tu abbia alcune opzioni ...

  1. Rimuovere l'elemento, costruire e aggiungere una stringa di XFBML e quindi analizzare il genitore oggetto una chiamata XFBML.parse.

  2. Rimuovere l'elemento o il suo contenitore, costruire e aggiungere un oggetto reale XFBML utilizzando

  3. Costruire un contenitore iframe viene passato nell'URL come (con un GET) dalla pagina padre. Puoi farlo senza nemmeno usare un vero backend se puoi ottenere la stringa di query in JS. Quindi crea il markup prima di avviare l'SDK di Facebook e il pulsante Mi piace renderizzato. Facebook iframes tutte le loro cose comunque, quindi questo metodo non è così clunky come sembra. Ho provato questo, funziona bene.

8

altre soluzioni:

al posto del tuo FB: oggetto come, scrivere un iframe FB nel tuo html come questo:

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

e ora si possono cambiare con javascript con questa funzione:

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

quando si modifica lo src, l'ifbile FB viene aggiornato.

8

Per REINIT pulsanti Faccio uso di questo codice:

//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 il codice HTML simile a questo:

<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

sai come fare lo stesso per i pulsanti Linkedin? Questo è molto utile codice – tsukimi

+0

Ho trovato qualcosa [qui] (https://developer.linkedin.com/documents/creating-member-profile-plugin) per chiunque sia interessato – tsukimi

+0

No, non lo faccio. Ma penso che sia simile, hai solo bisogno di invstigare il processo di rendering del pulsante. Inoltre puoi provare a usare ShareThis, hanno una buona API. http://sharethis.com/ –