I have a facebook like button on my website, but the data-href attribute needs a link to like:

<div class="fb-like share-button fbbutton" data-href="htp://www.example.com/article/1.html" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>

I have a lot of pages, and would like to copy the code on all my pages, and the code would automatically detect the url it's in. Example: data-href="$link$" so that i don't need to change the link to that of my pages.

Question: How do i make script, that detects its URL and displays it?

note: Website is written in html5

  • Are you looking for a server side solution? If so what programming language are you using to build your site. Or is your site static html and you need some javascript to do this client side? – Stephen Ostermiller Feb 16 '13 at 0:23
  • I wrote my website in html4, but i am currently working on a html5 website, I am writing it by hand(Because i can). i would like to have a simple script that can do that like i posted on my question - $link$ – blade19899 Feb 16 '13 at 0:33
  • If the website is plain HTML, why can't you just put the URL of the page in there? Though it sounds like you are manually copy-pasting to every HTML file. What are you expecting to do when you want to change some other part of the code? – DisgruntledGoat Feb 17 '13 at 19:37
  • @DisgruntledGoat As i posted on my question, "I have a lot of pages" and i want to be able to copy a new page, and the fb button detects the url. Just like the Google+, Twitter, Reddit button's. But i don't really understand how to copy/paste the code from @Itai. I eventually got it working, the link is displayed correctly , but the thumbnail isn't display and everything in the <meta name="description" content="**">. Also when i click on the link, this code is displayed behind it ?fb_action_ids=218073591669795&fb_action_types=og.likes&fb_source=aggregation&fb_aggregation_id=288381481237582 – blade19899 Feb 17 '13 at 20:48

According to the Facebook developers guide, the Like button defaults to the current URL. So all you should need to do is remove the data-href attribute and it the same code will always use whatever page the user is on.

On the above page, just leave the URL box blank then click the "Get Code" button and follow the instructions.

  • It worked but with same errors: thumbnail isn't display and everything in the <meta name="description" content="**">. Also when i click on the link, this code is displayed behind it ?fb_action_ids=218073591669795&fb_action_types=og.likes&fb_source=aggregation&f‌​b_aggregation_id=288381481237582 – blade19899 Feb 17 '13 at 21:50
  • Can you provide URL you are using this on? – DisgruntledGoat Feb 17 '13 at 21:51
  • eurobytes.nl/v2/tutorials/steam-for-linux(beta).html : The webpage is still a work in progress! :) – blade19899 Feb 17 '13 at 21:59
  • Looks like you are missing the first part of the sharing code, the bit with the "fb-root" element. – DisgruntledGoat Feb 18 '13 at 1:29
  • this is the exact code i have on the page<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/nl_NL/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div> but i get the same error? – blade19899 Feb 18 '13 at 10:03


//pull this using whatever method you like like a DB or URL-parser
//$url = 'http://'.$_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI]; //or some derivative
$url = "http://www.example.com/page.html"

<div class="fb-like share-button fbbutton" data-href="<?php echo $url;?>" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>
  • 1
    Just to note, if you use REQUEST_URI, it will need to be parsed to extract the canonical URL. – MrWhite Feb 16 '13 at 15:38

Normally, I would suggest this be done server-side instead of by scripting, as suggested by @ionFish.

If you want to do this on the client-side, then you can simply use the Javascript Location object. The all you need is to invoke window.location to get the URL.

In the simplest form you just need:


Where you want to output the URL. There are probably better ways to write this, depending on how you generate the surrounding code.

  • 1
    As with the REQUEST_URI (PHP) suggestion above, window.location contains the entire URL as entered by the user. So this will need to be parsed to extract the canonical URL (to prevent XSS or your FB likes from being messed up). – MrWhite Feb 16 '13 at 15:45
  • The Location object actually contains all the parsed components, so you can window.location.origin + window.location.pathname if you like. See the linked documentation for details. – Itai Feb 16 '13 at 17:00
  • 1
    But the location object contains information about the URL that was used to access the page, which is not necessarily the canonical URL that you want in your FB like button. Yes, this could probably be retrieved from the location object (as with REQUEST_URI) but could need additional processing. eg. /path/to/file.php and /path/to/file.php/something are different URLs that access the same resource, but only the first (canonical) URL should be used in both cases. JavaScript itself does not know what the canonical URL is. – MrWhite Feb 17 '13 at 0:17
  • @w3d - I know that and, as I said, I would prefer doing things server side but that is not the question asked here. On the server side one knows which page it should be without looking at any header information. – Itai Feb 17 '13 at 3:18
  • 1
    You have the same problems server-side unless you apply additional logic. I'm not criticising your answer, your answer is perfectly valid and I'm sure you already "know that". All I'm saying is that additional steps are required in order to safely get a canonical URL suitable for a FB like button. – MrWhite Feb 17 '13 at 10:16

Not the answer you're looking for? Browse other questions tagged or ask your own question.