web-dev-qa-db-fra.com

Comment ajouter un bouton Facebook "J'aime" à une page générée par AJAX

J'ai chaluté le filet et le débordement de pile et je n'ai pas trouvé de réponse adéquate à cette question. Avant de commencer le processus d'essais et d'erreurs pour trouver ma propre solution, j'ai pensé que je me tournerais vers la réflexion de Stack Overflow et voir s'il y avait déjà une implémentation réussie.

J'ai une page alimentée AJAX qui se dégrade correctement pour les navigateurs non javascript et le référencement. Chaque clic dans la version AJAX peut être représenté par une URL unique).

Ce que je veux faire, c'est changer dynamiquement le HREF du bouton. Je comprends que cette balise est convertie en HTML standard lors de l'exécution (à savoir dans une présentation de table/iframe désagréable).

Je me demandais simplement si quelqu'un avait une idée de la façon d'implémenter ce bouton FB like sur les pages propulsées par AJAX?

Bravo à l'avance :)

MODIFIER:

Que pensez-vous de cette méthode que je viens de pirater ensemble? Vous voyez d'énormes problèmes avec ça?

<!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>
javascriptjqueryajaxfacebook
67
nokturnal

SOLUTION SIMPLE

Il suffit de déclencher la fonction d'analyse syntaxique lorsque le chargement est terminé.

Si vous utilisez jQuery, il existe une solution vraiment simple et simple à ce problème:

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

http://developers.facebook.com/docs/reference/plugins/like/

136
Zorox

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

<!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>
23
nokturnal

Vous vous compliquez la tâche - rendez-en simplement un nouveau basé sur une iframe.

<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>
2
Peter Bailey

C'est ainsi que j'ai géré cette situation lorsque je l'ai rencontrée - 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
}
2
rycaps

créer comme 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>
0
Csáky Attila

Chargez-le après le chargement de la fenêtre, voici ce qui fonctionne pour moi:

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

Si vous utilisez framework jQuery Mobile vous pouvez exécuter le même code que la réponse acceptée dans l'événement pagecontainershow que jQuery Mobile utilise lorsqu'il affiche une nouvelle page.

// initialize new pages
$(document).on("pagecontainershow", (e, ui) =>
{
    try
    {
        FB.XFBML.parse();
    } catch (ex) { }
});
0
Simon_Weaver