Dynamic Facebook Like button

Question

I have various pages like so:

www.mysite/directory/title?title=$title

So you can see that each page will be dynamic. As has been asked many times before I want to have my facebook like buttons generated for the dynamic url. I have notied that there were some changes to the like button at the end of last year and so have been trying to find recent posts about this.

The problem I have is either the Facebook error where it states it requires an absolute url or it simply refers the like button to what is setup with Facebook, in this case my login page.

I have tried the following:

  // Load the SDK's source Asynchronously // Note that the debug version is being actively developed and might // contain some type checks that are overly strict. // Please report such bugs using the bugs tool. (function(d, debug){ var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0]; if (d.getElementById(id)) {return;} js = d.createElement('script'); js.id = id; js.async = true; js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js"; ref.parentNode.insertBefore(js, ref); }(document, /*debug*/ false)); </script> <script type="text/javascript"> var sUrl = "http://www.mysite.com/"; document.getElementById('fb').setAttribute('href', sUrl); </script> <div class="fb-like" id="fb" data-send="true" data-layout="button_count" data-width="60" data-show-faces="true"></div> 

and:

<?php $url = basename($_SERVER['REQUEST_URI']);?>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>

along with:

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

and not forgetting:

<fb:like></fb:like>

after invoking FB.XFBML.parse.

I am having no success, but as you can see have tried it with many methods now and am quite stuck. Any ideas?

Thanks!

EDITED:

The url is encoded, so today I tried the following - still the same result. Everywhere I have looked on Stack states that any of these ways should be working, but I am getting nowhere:

<div class="fb-like" id="fb" data-href="<?php urlencode($url);?>" data-send="true" data-width="450" data-show-faces="true"></div>

Any ideas?

Answer 1

use data-href for the like url. https://developers.facebook.com/docs/reference/plugins/like/