How to add a Facebook "Like" button to an AJAX driven page

Question

I have trawled the net and Stack Overflow and have not found an adequate answer to this question. Before I start the trial and error process of finding my own solution, I thought I would turn to the Stack Overflow braintrust and see if there was already a successful implementation.

I have an AJAX powered page that degrades properly for non-javascript browsers and SEO. Each click in the AJAX version can be represented by a unique URL.

What I want to do is to dynamically change the HREF of the button. I do understand that this tag is converted to standard HTML at runtime (namely into a nasty table / iframe layout).

I was just wondering if anyone had any insight as to how to implement this FB like button onto AJAX powered pages?

Cheers in advance :)

EDIT:

What do you think of this method I just hacked together? See any huge problems with it?

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

Are you saying you're using XFBML version of the like button? Why not just use the iframe one? — Peter Bailey, Nov 18 '10 at 21:32
It just seems cumbersome to have to parse the DOM of that to dynamically change the HREF of the button. I just wanted to see if there was a way to change it using XFBML. — nokturnal, Nov 18 '10 at 21:51
fyi, this also works for an html5 facebook button ( where its a div with an id/class ) — Jonathan Vanasco, Aug 27 '12 at 15:43

score 135 · Accepted Answer · answered Sep 17 '11 at 22:14

135

SIMPLE SOLUTION

Just parse trigger the parse function when load complete.

If you’re using jQuery, there’s a real easy and slick solution to this problem:

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

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

answered Sep 17 '11 at 22:14

Zorox

2,040
2
21
28

1

Still working great. Initialize the share button (in my situation) after a partial page update with AJAx! Great! – Youp Bernoulli Apr 13 '15 at 08:58
1

It's possible to specify the container for widgets initialization: FB.XFBML.parse(document.getElementById("containerId")); – BotanMan Oct 16 '15 at 07:44

nokturnal · Answer 2 · 2011-09-21T19:03:04.267

This is the solution I ended up going with:

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

Thanks for this solution. For the most part, it works well, but it does seem to cause memory leak issues in Firefox (tested only in version 3.6 so far). Do this dozens of times and you'll see the memory footprint of Firefox skyrocket and it doesn't come back down. Chrome is pretty good. I also saw some memory leak with IE8, but not nearly as bad as Firefox. — Johnny Oshika, Jul 09 '11 at 15:28
You can improve your selectors by getting rid of the tag from them. For example a#ChangeToGoogle should be just #ChangeToGoogle as ID's a unique. There is no need to look up all the a tags first, the same with the divs. — Ric, Jul 22 '11 at 09:05
@JohnnyO: I have since moved off this issue, but will definitely look at the memory leaks soon. — nokturnal, Sep 21 '11 at 19:07
@JohnnyO: The memory footprint of FF 3.6 skyrockets no matter what you do. — Robusto, Feb 09 '12 at 12:06

score 2 · Answer 3 · answered Nov 18 '10 at 22:23

You're making this hard on yourself - just render a new iframe-based one.

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

Adding an iFrame works, but the iframe button from Facebook is pretty buggy. The best options are to place the HTML5 , followed by the XFBML. — Jonathan Vanasco, Aug 27 '12 at 15:45

score 2 · Answer 4 · edited Nov 16 '12 at 11:48

This is how I handled this situation when I ran into it - seems to work well.

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

score 0 · Answer 5 · answered May 31 '14 at 20:42

If you're using the jQuery Mobile framework you can run the same code as the accepted answer in the pagecontainershow event which jQuery Mobile uses when it displays a new page.

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

Csáky Attila · Answer 6 · 2011-10-29T06:28:11.110

create like button

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

score 0 · Answer 7 · answered Nov 29 '11 at 22:02

0

Load it after the window loads, this is what works for me:

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

answered Nov 29 '11 at 22:02

Devin Walker

540
3
8

How to add a Facebook "Like" button to an AJAX driven page

7 Answers7

Linked

Related