Comment ajouter un Facebook bouton “j'Aime” à AJAX page dynamique

J'ai parcouraient le net et de Débordement de Pile et n'ont pas trouvé une réponse adéquate à cette question. Avant de commencer le processus de tâtonnement et de trouver ma propre solution, j'ai pensé me tourner vers le Dépassement de Pile braintrust et de voir s'il y a déjà une mise en œuvre réussie.

J'ai un AJAX alimenté page qui se dégrade correctement pour les non-javascript des navigateurs et de RÉFÉRENCEMENT. Chaque clic de l'AJAX version peut être représenté par une URL unique.

Ce que je veux faire est de changer dynamiquement le HREF du bouton. Je comprends que cette balise est converti au format HTML standard au moment de l'exécution (à savoir dans une méchante table /iframe mise en page).

Je me demandais juste si quelqu'un a des idées quant à la manière de mettre en œuvre ce FB comme bouton sur AJAX alimenté les pages?

Acclamations à l'avance 🙂

EDIT:

Que pensez-vous de cette méthode, j'ai juste bidouillé? Voir toutes les énormes problèmes avec elle?

<!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 runat="server">
    <title></title>

    <script src="JS/jquery/jquery.js" type="text/javascript"></script>
    <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

    <script language="javascript" type="text/javascript">
        $("document").ready
        (
            function ()
            {
                CreateNewLikeButton("http://www.yahoo.com")

                $("a#ChangeToGoogle").click
                (
                    function (e)
                    {
                        e.preventDefault();
                        CreateNewLikeButton("http://www.google.ca")
                    }
                );

            }
        );

        function CreateNewLikeButton(url)
        {
            var elem = $(document.createElement("fb:like"));
            elem.attr("href", url);
            $("div#Container").empty().append(elem);
            FB.XFBML.parse($("div#Container").get(0));
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <a id="ChangeToGoogle" href="#">Change To Google</a>
    <div id="Container">
        <fb:like href="http://www.NEVER_LINK_TO_THIS_12345.com"></fb:like>
    </div>
    </form>
</body>

</html>

Vous dites que vous l'utilisez XFBML version le bouton j'aime? Pourquoi ne pas simplement utiliser l'iframe un?
Il semble juste lourd d'avoir à analyser le DOM de modifier dynamiquement le HREF du bouton. Je voulais juste voir si il y avait un moyen de le changer à l'aide de XFBML.
Votre solution m'a beaucoup aidé, merci!
pour info, cela fonctionne aussi pour un html5 facebook bouton ( d'où son un div avec un id/classe )

InformationsquelleAutor nokturnal | 2010-11-18

136

SOLUTION SIMPLE

Juste parse déclencher la fonction d'analyse lorsque la charge complète.

Si vous utilisez jQuery, il y a un réel facile et nappe la solution à ce problème:
```
$(document).ajaxComplete(function(){
    try{
        FB.XFBML.parse(); 
    }catch(ex){}
});
```
http://developers.facebook.com/docs/reference/plugins/like/
- très simple ^_^
- Sweet! Devrait être la solution retenue!
- +1 parce que c'est simple, petit et fonctionne parfaitement!
- +1 awesome solution fonctionne parfaitement.
- +1 Merci!!!!!!
- Merci, fonctionne très bien!
- +1 super merci!!!
- thx!!!!!!!!!!!!
- Nice, Thankx!!!!
- Travaillant toujours, merci!
- Toujours génial de travailler. Initialiser le bouton partager (dans mon cas) après un partiel à jour de page avec AJAx! Super!
- Il est possible de spécifier le conteneur pour les widgets de l'initialisation: FB.XFBML.parse(document.getElementById("containerId"));
- Excellente solution!
InformationsquelleAutor Zorox

C'est la solution que j'ai fini par aller avec:

<!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 runat="server">
    <title></title>

    <script src="JS/jquery/jquery.js" type="text/javascript"></script>
    <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

    <script language="javascript" type="text/javascript">
        $("document").ready
        (
            function ()
            {
                CreateNewLikeButton("http://www.yahoo.com")

                $("#ChangeToGoogle").click
                (
                    function (e)
                    {
                        e.preventDefault();
                        CreateNewLikeButton("http://www.google.ca")
                    }
                );

            }
        );

        function CreateNewLikeButton(url)
        {
            var elem = $(document.createElement("fb:like"));
            elem.attr("href", url);
            $("#Container").empty().append(elem);
            FB.XFBML.parse($("#Container").get(0));
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <a id="ChangeToGoogle" href="#">Change To Google</a>
    <div id="Container">
        <fb:like href="http://www.NEVER_LINK_TO_THIS_12345.com"></fb:like>
    </div>
    </form>
</body>

</html>

Merci pour cette solution. Pour la plupart, il fonctionne bien, mais il ne semble pas causer de problèmes de fuite de mémoire dans Firefox (testé uniquement dans la version 3.6 à ce jour). Faire des dizaines de fois et vous verrez l'empreinte mémoire de Firefox en flèche et il ne revient pas vers le bas. Chrome est assez bonne. J'ai aussi vu certains de fuite de mémoire avec IE8, mais pas aussi mauvais que Firefox.
Vous pouvez améliorer votre sélecteurs par se débarrasser de l'étiquette d'eux. Par exemple, un#ChangeToGoogle doit être juste #ChangeToGoogle que des ID unique. Il n'y a pas besoin de chercher tous les tags première, la même chose avec des divs.
J'ai mis en œuvre ces modifications.
Depuis, j'ai déménagé ce problème, mais va certainement regarder les fuites de mémoire bientôt.
L'empreinte mémoire de FF 3.6 monte en flèche, peu importe ce que vous faites.

InformationsquelleAutor nokturnal

Vous faites ce dur sur vous-même - il suffit de rendre une nouvelle iframe un.

<html>
<head>
  <title>Test Page</title>

  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">  

  $(function()
  {
    $( '#ChangeToGoogle' ).click( function( event )
    {
      event.preventDefault();

      $( '#Container' ).empty().append( $('<iframe />')
        .attr( 'src', 'http://www.facebook.com/plugins/like.php?href=www.google.com&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80' )
        .attr( 'scrolling', 'no' )
        .attr( 'frameborder', 'no' )
        .attr( 'style', 'border:none; overflow:hidden; width:450px; height:80px;' )
        .attr( 'allowTransparency', 'true' )        
      );            
    });
  });

  </script>
</head>

<body>
    <form id="form1" runat="server">
    <a id="ChangeToGoogle" href="#">Change To Google</a>
    <div id="Container">
      <iframe src="http://www.facebook.com/plugins/like.php?href=www.yahoo.com&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80"
        scrolling="no" frameborder="0"
        style="border:none; overflow:hidden; width:450px; height:80px;"
        allowTransparency="true">
      </iframe>
    </div>
    </form>
</body>

L'ajout d'une iFrame fonctionne, mais l'iframe bouton de Facebook est assez buggé. Les meilleures options sont à placer le HTML5 , suivie par la XFBML.

InformationsquelleAutor Peter Bailey

C'est la façon dont j'ai géré cette situation quand j'ai couru en - semble bien fonctionner.

//Set Facebook Like Button with jQuery
setFBLikeButtons = function (container,url,send,layout,width,show_faces,font) {
  //Set Default Args
  if(!send) { send = "false"; }
  if(!layout) { layout = "button_count"; }
  if(!width) { width = "100"; }
  if(!show_faces) { show_faces = "false"; }
  if(!font) { font = "arial"; }

  $(container).empty(); //Remove current like button
  $(container).html('<fb:like href="'+url+'" send="'+send+'" 
       layout="'+layout+'" width="'+width+'" show_faces="'+show_faces+'" 
       font="'+font+'"></fb:like>');
  FB.XFBML.parse(); //This is the magical syrup
}

InformationsquelleAutor rycaps

créer comme le bouton

<head>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script>
window.onload = function(){
var divs = document.getElementsByTagName("span");
for(var i=0; i<divs.length i++){
if(divs[i].className == "likes"){
if(divs[i].title){ var Href = divs[i].title; }else{ var Href = window.location; }
var fb_like = document.createElement("fb:like");
fb_like.setAttribute("href", Href);
fb_like.setAttribute("layout", "box_count");
fb_like.setAttribute("show_faces", "false");
fb_like.setAttribute("width", "55");
document.getElementById("likes2").appendChild(fb_like);
}
}
}
</script>
</head>
<body>
<span class="likes" title="www.bzzs.me"></span>
</body>

InformationsquelleAutor Csáky Attila

Charge après la fenêtre de charges, c'est ce qui fonctionne pour moi:

$(window).load(function(){
     $.getScript('http://connect.facebook.net/en_US/all.js', function() {
          try{
                FB.XFBML.parse();
            } catch(ex) {}
      });
});

InformationsquelleAutor Devin Walker

0

Si vous êtes à l'aide de la framework jQuery Mobile vous pouvez exécuter le même code que l'on a accepté la réponse dans la pagecontainershow événement jQuery Mobile utilise lors de l'affichage d'une nouvelle page.
```
//initialize new pages
$(document).on("pagecontainershow", (e, ui) =>
{
    try
    {
        FB.XFBML.parse();
    } catch (ex) { }
});
```
InformationsquelleAutor Simon_Weaver

Vous devez vous connecter pour publier un commentaire.