Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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

share|improve this question
    
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&f‌​b_aggregation_id=288381481237582 –  blade19899 Feb 17 '13 at 20:48
add comment

closed as off topic by DisgruntledGoat, John Conde Feb 18 '13 at 2:09

Questions on Webmasters Stack Exchange are expected to relate to webmastering within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

3 Answers

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.

share|improve this answer
    
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
show 1 more comment

In PHP:

<php
//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>
share|improve this answer
1  
Just to note, if you use REQUEST_URI, it will need to be parsed to extract the canonical URL. –  w3d Feb 16 '13 at 15:38
add comment

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:

<script>
document.write(window.location);
</script>

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

share|improve this answer
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). –  w3d 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. –  w3d 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. –  w3d Feb 17 '13 at 10:16
add comment

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