Search code examples
dynamichreffacebook-widgets

Dynamically setting the href of a Facebook widget

I have a little web app that uses the Facebook like widget. This page also uses querrystrings to load content dynamically. I need the href assigned to the Facebook widget to be determined dynamically based on the querrystring. Here is an example of how I define the widget:

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=186609524720286&amp;xfbml=1"></script>
<fb:like id="fbLike" href="http://apps.facebook.com/inflatableicons/image_preview.html" send="true" width="450" show_faces="true" font="">
</fb:like>

But what I really need is something like this:

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=186609524720286&amp;xfbml=1"></script>
<fb:like id="fbLike" href="http://apps.facebook.com/inflatableicons/image_preview.html?y=119" send="true" width="450" show_faces="true" font="">
</fb:like>

Notice that href in the second example ends with with ?y=119 but the first one does not. My problem is that I will not know which value to put as the querrystring for the widget till I see which querrystring is passed to the html page. Can anyone explain how I could insert a dynamic value into the href? I first tried to do set the href after the fact like this:

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=186609524720286&amp;xfbml=1"></script>
<fb:like id="fbLike" href="#" send="true" width="450" show_faces="true" font="">
</fb:like>
<script>
  var url = 'http://apps.facebook.com/inflatableicons/image_preview.html?y=120';
  document.getElementById('fbLike').setAttribute('href', url);
  console.log(document.getElementById('fbLike'));
</script>

but when I do this the widget complains that href is not set, strangely when I print the value of getElementById it shows the href that I set with setAttrbibute, even though the widget does not think it was set correctly and gives an error. I believe that for some reason the widget will not allow me to set the href after the fact.

EDIT:

I also tried using the jQuery example that ferni descried in his answer but this did not seem to work:

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=186609524720286&amp;xfbml=1"></script>
<fb:like id="fbLike" href="#" send="true" width="450" show_faces="true" font="">
</fb:like> 
<script>
    var url = 'http://apps.facebook.com/inflatableicons/image_preview.html?y=120';
    jQuery("#fblikeblock").html('<fb:like id="fbLike" href="'+url+'" send="true" width="450" show_faces="true" font=""></fb:like>');
    FB.XFBML.parse(document.getElementById('fblikeblock'));
    console.log(document.getElementById('fblikeblock'));
  </script>

I added the console.log to the end of the script to print the value of fblikeblock and that returned null so this may be part of the problem.

Solution

  • You'll need to add the fb:like button to the page and then call the XFBML processor on it. So something like this (I'm assuming jQuery is the library in use: you'll have to change it if you're using something else):

    var url = "http://apps.facebook.com/inflatableicons/image_preview.html?y=119";
jQuery("#fblikeblock").html('<fb:like id="fbLike" href="'+url+'" send="true" width="450" show_faces="true" font=""></fb:like>');
FB.XFBML.parse(document.getElementById('fblikeblock'));

    EDIT: a potential implementation of this solution would be this.

    <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=186609524720286&amp;xfbml=1"></script>
<div id="fblikeblock"></div>
<script>
    var url = 'http://apps.facebook.com/inflatableicons/image_preview.html?y=120';
    jQuery("#fblikeblock").html('<fb:like id="fbLike" href="'+url+'" send="true" width="450" show_faces="true" font=""></fb:like>');
    FB.XFBML.parse(document.getElementById('fblikeblock'));
    console.log(document.getElementById('fblikeblock'));
  </script>