Recently facebook rolled out some changes which have apparently broken like button functionality on on pages I'm working on, particularly for urls that point to a photo (photoset) on facebook, e.g. a facebook button like
<fb:like href="http://www.facebook.com/photo.php?fbid=ID&set=SET" ....></fb:like>
The button renders, however when I click 'like' it immediately 'unlikes' itself afterwards. *Non-facebook URLs work fine with the like button, only URLs that point to photos/content on facebook cause the like button to immediately unlike itself after it's clicked. The buttons are generated via the JSSDK as iframes. Is there a solution to this problem? We're not using og metadata.
Facebook like buttons strips all the get parameters of urls, so although you have this
<fb:like href="http://www.facebook.com/photo.php?fbid=ID&set=SET" ....></fb:like>
The url retrieved by facebook is this
<fb:like href="http://www.facebook.com/photo.php" ....></fb:like>
EDIT
As you may have not noticed on the 10th of july one of the break changes is the url of the social plugins
Social plugins will require an absolute URL in the 'href' parameter
Social plugins, such as the Like Box and Like Button, will require an
absolute URL in the 'href' parameter.
https://developers.facebook.com/roadmap/#q4_2013
I've always encountered issues with using Facebook's developer tools with resources on its own domain and, for that reason, always recommended "proxying". In other words, you would create a unique resource on your web server to represent the Facebook photo, this resource would garner likes and shares, but when a user visited the page, they would be redirected to the real photo.
For example:
<fb:like href="http://www.example.com/fakeresources/photo.php?fbid=ID&set=SET" ....></fb:like>
When you load http://www.example.com/fakeresources/photo.php?fbid=ID&set=SET:
<meta property="og:title" content="The Rock" />
<script>top.location.href="http://www.facebook.com/photo.php?fbid=ID&set=SET";</script>
Unfortunately, for the og:image tag, you will also need to create a proxy, because the Facebook scraper will often not fetch from its own servers.
I've even encountered times when Facebook will not fetch from a URL because the URL has a query parameter which looks like a URL which is on its own servers, for example:
http://www.example.com/fakeresources?url=facebook.com/photo.php?fbid=ID&set=SET
(query parameter not url-encoded for readability)
For which, encoding the URL with rot-13 is sufficient.
Related
My team recently launched a Web app that makes heavy use of Facebook's Like Button. Most of them work fine, but several of the Like URLs aren't recognized correctly by Facebook or its URL Linter. These URLs are for a page on our app that redirects to a corresponding page in a Facebook app...
Example URL:
http://www.3mframeworks.com/pages/redirect?url=http%3A%2F%2Fapps.facebook.com%2Fcouplespeak%3Fv%3Dvideos%26id%3D17
Facebook's URL Linter returns data as if the "id" parameter isn't there:
https://developers.facebook.com/tools/lint?url=http%3A%2F%2Fwww.3mframeworks.com%2Fpages%2Fredirect%3Furl%3Dhttp%253A%252F%252Fapps.facebook.com%252Fcouplespeak%253Fv%253Dvideos%2526id%253D17
Other Open Graph parsers return the correct data:
og:it: http://ogit.heroku.com/inspect?url=www.3mframeworks.com%2Fpages%2Fredirect%3Furl%3Dhttp%253A%252F%252Fapps.facebook.com%252Fcouplespeak%253Fv%253Dvideos%2526id%253D34
OpenGraph.In: http://www.opengraph.in/?url=www.3mframeworks.com%2Fpages%2Fredirect%3Furl%3Dhttp%253A%252F%252Fapps.facebook.com%252Fcouplespeak%253Fv%253Dvideos%2526id%253D34&format=html
I've spent hours searching for an explanation...
Facebook's documentation, under Editing Meta Tags, states:
"Note that og:title and og:type are only editable initially - after your page receives 50 likes the title becomes fixed, and after your page receives 10,000 likes the type becomes fixed." My Like counts are nowhere near these numbers.
"For the changes to be reflected on Facebook, you must force your page to be scraped. The page is scraped when an admin for the page clicks the Like button or when the URL is entered into the Facebook URL Linter. You can programmatically force your page to be scraped by cURL'ing the linter." I have tried all three of these methods without success.
Facebook Like button - fetches "wrong" image suggests that linting an URL doesn't reset the cache as Facebook claims.
Facebook Open Graph not clearing cache suggests this may be Facebook caching that will fix itself after an unknown period of time.
facebook like button liking wrong url suggests waiting 24-32 hours for Facebook's cache to be reset. It has been 64+ hours since my Open Graph tags were last set.
Why is Facebook returning the wrong page (affects Facebook Like and Share URL)? suggests that any URL provided to Facebook (e.g. via a Like Button) before being published should be changed. I tried changing the URL, renaming the id parameter, without success.
The most likely culprit seems to be Facebook caching, but it's already been suspiciously long and since this site is part of a currently live campaign that emphasizes Like activity, I'm hoping someone knows a trick to get this working ASAP. Thanks!
Some piece in Facebook's Graph API and URL Linter drops all but the first of multiple URL parameters.
Graph API
When the parameter string is "?v=videos&id=17", "id" is lost:
https://graph.facebook.com/http%3A%2F%2Fapps.facebook.com%2Fcouplespeak%3Fv%3Dvideos%26id%3D17
When the parameter string is "?id=17&v=videos", "v" is lost:
https://graph.facebook.com/http%3A%2F%2Fapps.facebook.com%2Fcouplespeak%3Fid%3D17%26v%3Dvideos
This doesn't happen if the Graph "id" parameter is declared explicitly: https://graph.facebook.com/?id=http%3A%2F%2Fapps.facebook.com%2Fcouplespeak%3Fv%3Dvideos%26id%3D17
Unfortunately that third point doesn't help my situation: I'm not accessing the Graph directly, so I can't just insert "?id=".
URL Linter
For my app, all parameters are needed to render the correct Open Graph meta tags, and the results support my discovery:
When the nested, encoded parameter string is "?v=videos&id=17", Open Graph tags are rendered for "3M Couple Speak Video Contest". This is the expected behavior when the "id" param is absent:
https://developers.facebook.com/tools/lint?url=http%3A%2F%2Fwww.3mframeworks.com%2Fpages%2Fredirect%3Furl%3Dhttp%253A%252F%252Fapps.facebook.com%252Fcouplespeak%253Fv%253Dvideos%2526id%253D17
When the nested, encoded parameter string is "?id=17&v=videos", Open Graph tags are rendered for "3M Couple Speak Translation Contest". This is the expected behavior when "v=videos" is absent:
https://developers.facebook.com/tools/lint?url=http%3A%2F%2Fwww.3mframeworks.com%2Fpages%2Fredirect%3Furl%3Dhttp%253A%252F%252Fapps.facebook.com%252Fcouplespeak%253Fid%253D17%2526v%253Dvideos
This doesn't happen with non-nested, non-encoded parameter strings:
https://developers.facebook.com/tools/lint?url=http%3A%2F%2Fapps.facebook.com%2Fcouplespeak%3Fv%3Dvideos%26id%3D17
For other Open Graph parsers, switching the order of nested, encoded parameters yields the same data, which is correct:
http://ogit.heroku.com/inspect?url=www.3mframeworks.com%2Fpages%2Fredirect%3Furl%3Dhttp%253A%252F%252Fapps.facebook.com%252Fcouplespeak%253Fv%253Dvideos%2526id%253D17
http://ogit.heroku.com/inspect?url=www.3mframeworks.com%2Fpages%2Fredirect%3Furl%3Dhttp%253A%252F%252Fapps.facebook.com%252Fcouplespeak%253Fid%253D17%2526v%253Dvideos
Unfortunately, again, that third point doesn't help my situation: we need to nest and encode the URL.
This explains the bad data I'm seeing, and why it only happens to the URLs with multiple parameters. I submitted a bug report to Facebook.
The iframe source on that Facebook page is at this url it seems:
couplespeak-3m-production.heroku.com/videos
and that page contains the tags that show up in the Facebook Linter.
<meta content='3M Couple Speak Video Contest' property='og:site_name' />
<meta content="3M Couple Speak Video Contest" property="og:title" />
<meta content="website" property="og:type" />
<meta content="http://apps.facebook.com/couplespeak?v=videos" property="og:url" />
<meta content="http://www.3mframeworks.com/images/video_background.jpg" property="og:image" />
<meta content="100001154487117" property="fb:admins" />
I have a website at http://www.mydomain.com which has a corresponding facebook page at https://www.facebook.com/pages/mydomain/123456789.
I am looking for a way to integrate this facebook page URL into the open graph headers so that when someone shares my page, it actually shares the Facebook page instead of the site's URL.
Is this possible?
You can now do this by setting the og:url meta tag to the url of your Facebook page. Keep in mind that if you do this, other networks that use Open Graph tags will probably share your Facebook page instead of the site's url, so make sure that's what you want.
<meta property="og:url" content="http://www.facebook.com/your-page"/>
Perhaps you already figured this out as this is an old question, but since I stumbled upon it... If I understand your question correctly, you do not even need the ogp meta tags to accomplish what you want to do. All you need to do is go to http://developers.facebook.com/docs/reference/plugins/like/ and input your facebook page url in "url to like", https://www.facebook.com/pages/mydomain/123456789 from your example. Then select the options you want including the "send" button. Then get the code and paste it where you want it in your website. Now whenever someone clicks "like" on your website or clicks "send" to share your website, they will actually be liking or sending the url to your Facebook page and not your website. Is that what you were looking for?
I cannot get the Like button to work on one site. http://www.room13canada.ca/test.html
When the button is clicked it fires off to facebook but the callback then undoes the call? I have stripped all code to make sure there is no js or css or whatever breaking the button.
please look at the pagesource - it makes no sense why it doesn't work.
if I change
<fb:like href="www.room13canada.ca"
to
<fb:like href="www.cnn.com"
it works like a charm??
any help would be great
Have you considered trying with the iframe method?
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.room13canada.ca%2Ftest.html&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
Well, I was also having problems with the facebook like plugins and also heard from people that it is a facebook bug. After searching a lot on gOOgle .... I found a good result and don't think that this is a fb bug.
You will have to add this file into the header of your website:
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
Property of Meta Tags (facebook likes Meta Tags) ==> og:image - An image URL which should represent your object within the graph.
Replace "http://ia.media-imdb.com/images/rock.jpg" with real path to image.
For Wordpress Users:
Add the following code in the head of your header file ==>
<?php $img= get_post_meta($post->ID, 'image', true); if ($img): ?>
<meta property="og:image" content="<?=$img ?>"/>
<? endif; ?>
That's all... Hope this will work for you all !! Share your experience ...
First, I'll give my hypothesis: If the Facebook URL Scraper has tried to scrape your page, and was unable to access it (e.g., if it was pending moderation and the Facebook Scraper bot got redirected to a "login" page), Social Plugins like the Like button and Comments won't work because Facebook thinks the URL is "inaccessible." It takes 24 hours for Facebook to try scraping the page again--until then, Facebook will assume it's still inaccessible.
Here's what Facebook says about how often pages are scraped and how to force a scrape:
Facebook scrapes your page every 24 hours to ensure the properties are up to date. The page is also scraped when an admin for the Open Graph page clicks the Like button and when the URL is entered into the Facebook URL Linter. Facebook observes cache headers on your URLs - it will look at "Expires" and "Cache-Control" in order of preference. However, even if you specify a longer time, Facebook will scrape your page every 24 hours.
Note that the Facebook URL Linter has been renamed the Facebook Object Debugger.
I could be wrong about the underlying issue. I'll give you my experiences, and you can decide.
Our site is a collection of blogs, and all blog posts have a "like" button, generated with identical code (except for the URL being liked). By default, all blog posts are saved to a "draft" state, and not available unless you are logged in. If an anonymous user attempts to visit a "draft" blog post, he will be redirected to the login page.
Months ago, we experienced a "Like" button problem, although the error manifested slightly differently: we got "URL inaccessible" when clicking the Like button. This only happened on posts that had "Like" buttons and also were not immediately published (e.g., they were saved to a "Draft" state). I thought this was fixed when I changed the "Draft" view to not display Facebook social plugins.
However, I've noticed that, from time to time, if you click the "Like" button on a particular post, the "Like" flyout flashes on the screen for a moment and then disappears, with no "like" action taking place. Different behavior, same problem: "Like" button doesn't work.
At the same time, the "Like" buttons on every other post worked just fine! I tested this, and then came back to the one post I couldn't "Like". Same behavior: flyout appears and disappears, no "Like" happens.
I used Chrome's developer tools to see what HTTP requests were being made, comparing the request/response for a working "like" to the "like" that wasn't working. The "Like" button JavaScript makes an HTTP POST request to http://www.facebook.com/plugins/like/connect and gets some JavaScript back. As best I could tell, the HTTP POST request was identical between the working and non-working like buttons, but the response was different. Below is the JavaScript response for a working like, followed by the JavaScript response for a like that wasn’t working:
for (;;);{"__ar":1,"payload":null,"jsmods":{"require":[["Plugin","connect",[],["http:\/\/www.hslda.org\/cms\/?q=blog\u00252Fpeeking-through-fence","10151028997762924"]]]}}
for (;;);{"__ar":1,"payload":null,"jsmods":{"require":[["Plugin","disconnect",[],["http:\/\/www.hslda.org\/cms\/?q=blog\u00252Fpoem-just-you"]]]}}
I note two distinctions: the working version “connect” whereas the non-working version has “disconnect”, and the working version has an additional parameter that looks like an ID. I’m guessing it’s the ID of this particular “like” event.
I did some Googling and couldn’t find a definitive answer. Trying to debug this, I used the Facebook Object Debugger. It found some “Like Button Warnings” and “Open Graph Warnings” that are worth fixing, but I don’t think they are the problem—because they were the same for URLs with working like buttons and for the URL with the like button that wasn’t working.
So then I decided to go to the Facebook Social Plugin page for the Like Button. I dropped in the URL of the non-likeable blog post, and tried liking it. It worked. I wondered, “is the like button on the page still broken?” I couldn’t like it because I’d already liked it. So I asked a coworker try and like the post, and it worked for him. I then had my coworker unlike the post, I unliked it (so we were back to no likes), and then I tried liking it again, using the like button on the blog post. It worked.
So, it seems like once I "forced" the page to be scraped again, it started working. But it's also possible that "forcing" a like through the Like button page broke something loose as well... not sure.
for tracking purposes, I want that the URL, which appears on the facebook stream after an "like-action", is slightly different from the URL the user actually liked.
Example:
I use <link rel="canonical" href="http://example.com/test.html"> in my head section to tell facebook to which URL a like-action on this website refers to.
Further down on the website I have <fb:like href="http://example.com/test.html?param=144141"> with the same URL, just with an additional parameter.
My intention: If someone clicks on the like button, facebook puts him to the "group who like http://example.com/test.html" in order to appear next the like button. But when another user sees his like-action on the facebook stream and clicks on it, he should be redirected to http://example.com/test.html?param=144141.
The problem is that this doesn't work, because the canonical declaration in the head section kind of overwrites the href attribute of my <fb:like> tag. Anyone knows how to solve this problem or does it simply not work?
You can't do exactly what you have requested, but you can still add an arbitrary tracking parameter (especially useful for analytics purposes). Facebook recently added a ref parameter to the fb:like element for this purpose. It's up to you to decide how you want to stuff various bits of information into that single parameter and then parse fb_ref whenever it's included in an incoming URLs.
Example
Place the following element on your HTML page:
<fb:like href="http://example.com/test.html" ref="144141"></fb:like>
Users clicking the link from Facebook should be directed to:
http://example.com/test.html?fb_ref=144141&fb_source=home_multiline
Documentation
"Adding More Features to the Like Button" blog post
fb:like button documentation
I have a problem with the Facebook like button. I want the note on user's profile to look something like this: 'User likes page on site'.
Site's URL it suppose to be 'http://www.example.com/myapp/' and the page URL it's 'http://www.example.com/myapp/page.html'.
I added <meta property="og:site_name" content="..."/> in the of any page and added the like button using <iframe>.
I know that there's a solution to specify the canonical URL, but for the page that user likes, not for the site (that is by using og:url on the header). Does anyone know how you can specify the site's URL? It somehow automatically points to the domain name, which it's wrong in my case because i need 'http://www.example.com/myapp/', not 'http://www.example.com'.
I want the following result: User likes 'http://www.example.com/myapp/page.html' on 'http://www.example.com/myapp', not User likes 'http://www.example.com/myapp/page.html' on 'http://www.example.com'.
Thank you very much for a possible answer.
We've been running into similar problems and in lieu of a og:site_url tag have had to get a little hacky. Our solution is to have our base URL (http://www.example.com in your example) redirect to the FB page.
As we add more FB pages, we'll need multiple subdomains to support this, so it's not really sustainable, but may solve your problem at least temporarily.