How to bypass opengraph tags for Facebook like buttons and use data-href instead

问题

I have the javascript code with the fb-root div installed right after my <body> tag.

There's a like button in the header of my website to like the website.

But there's more buttons on the website, for every article. Sometimes there's more than one on the same page.

So following facebook's docs instructions I added a data-href="" attribute to my fb-like tag. Didn't worked. Then I added a ref="" attribute with the article's slug inside it. Thought it would help.

The button with both data-href and ref attributes shows the same amount of likes as the website header's one. And when I click on them they both like the same url, not the url I specified in data-href. Any button ALWAYS uses data from the opengraph tags and completely ignores what I specify in the tag. (Which should be the opposite)

So the question is: Is there a way to bypass OG tags and force the URL from data-href to be used for a button? (It should work that way but I totally ignore why it doesn't).

Here's the code I use:

Right after :

<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/en_US/all.js#xfbml=1&appId=MY_API_KEY>";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Then in the header:

<div class="fb-like" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false" data-font="arial" data-colorscheme="light"></div>

And then in an article:

<div class="fb-like" data-href="URL_OF_THE_ARTICLE" data-send="false" data-layout="button_count" data-width="175" data-show-faces="false" data-font="arial" data-colorscheme="light"></div>

I tried using both fb: and div tags by the way. This should be really simple, as it has been for Twitter and Google+.

Anyone has an idea of what's wrong with that?

Thanks!

回答1:

The like button's data-href param should point to the URL of the content you want to like/share -

That URL should contain the meta tags telling facebook what title, etc to display and return these tags to Facebook's crawler

You can see what facebook detects at that url with Facebook's Debug Tool - double-check you're not redirecting the crawler by changing the og:url tag, using a canonical meta tag, etc

来源：https://stackoverflow.com/questions/14865388/how-to-bypass-opengraph-tags-for-facebook-like-buttons-and-use-data-href-instead

标签

facebook

facebook-like