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" />
Related
I have a Wordpress page that needs a GET parameter in URL.
Depending on the id, it shows a different flipbook.
The problem is, when I share the link on Facebook, it crops the GET parameters (I checked with the Open Graph Debugger), so the page doesn't receive any parameter, thus there's no thumb showed.
I already tried encoding the URL with PHP.
So, two questions:
Is it possible to make Facebook recognize the GET parameters in URL?
If not, can I work out something with the .htaccess file, to make them appear like subpages? E.g. www.page.com/flipbook/?id=7 would become www.page.com/flipbook/7/
The problem was SEO Yoast was automatically writing the tag:
<meta property="og:url" content="www.page.com/flipbook/">
So Facebook was reading this and not the parameter.
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.
I'm having trouble understanding canonical URLs with regards to how search engines and Facebook seem to handle them.
My Google maps powered site allows visitors to use social media to request a gig in their country. One of the pages in question can be found at: http://izzy.nogig.in/
When a user clicks on their countries marker it gives them sharing options (twitter/facebook/etc), which when shared will share the URL specifically for that country, eg: izzy.nogig.in/usa? or izzy.nogig.in/spain? etc.
All of these countries in the URL amount to a lot of duplicate content so I use the following to point search engines to the page I want ranked:-
<link rel="canonical" href="http://izzy.nogig.in/_?"/>
For Facebook Likes to count towards each individual country I've set my Open Graph "og:url" as follows, eg:
<meta property="og:url" content="http://izzy.nogig.in/australia?" />
Now when I run a country-specific URL through the Facebook Object Debugger (eg. http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fizzy.nogig.in%2Faustralia%3F) it shows the following:-
Response Code: 206
Fetched URL: http://izzy.nogig.in/australia
Canonical URL: http://izzy.nogig.in/australia
Mismatch og:url and canonical url:
og:url tag in the header is not the same URL as rel='canonical' link in the html.
The above error is what's confusing me. I know they're mismatched, but I thought this was the correct way to do this.
Everything in the debugger looks good to me (correct link, description, image etc for each country), and I can't change the rel="canonical" value to match my og:url as I need it pointing to a single page (country-less) for search engines.
I believe it is all working correctly. Should I just ignore the error from the debugger, or have I set this up incorrectly? I don't want "likes" for each country all disappearing and counting towards the rel="canonical" URL.
Many Thanks - Will
link rel="canonical" will be used by search engines where as og:url will be used by facebook
og:url basically tells the FB scraper "ignore anything on this page, and scrape this url instead"
More for Canonical link element: http://en.wikipedia.org/wiki/Canonical_link_element
Canonical urls refer to page content.
The target (canonical) IRI MUST identify content that is either
duplicative or a superset of the content at the context (referring)
IRI. rfc6596#3
Opengraph url refers to "object".
The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "http://www.imdb.com/title/tt0117500/". ogp.me
So they may be different. For example, for multi-language websites, page for each language should have distinct canonical url, because content is different, but usually the same og:url for all languages, because they refer to the same object described in multiple languages.
On one of the sites I've developed I serve the page in more than one language, and provide links to allow the user to switch between one language and the other. So, my rel="canonical" will have the URL http://www.example.com/, whereas, within the code I update the og:url so that it is either http://en.example.com/ or http://fr.example.com/. That way when the user shares the page on Facebook, everything will appear on Facebook in the language they were viewing the page, which makes sense since most of the visitor's friends will likely speak the same language.
Regards.
I see no reason why og:url and canonical should be different. In both circumstances you're saying to either the search engine or Facebook what page you want to index or be displayed.
When clicked on the fb like button on i.e. http://www.joanieart.com/collection.php?ix=15 I want to control the image posted to FB.
Im having a hard time getting this to work. Read tons of postings but no succes.
I tried meta property="og:image" and meta rel="image_src" but still it picks the wrong image.
Thanks for helping.
I am not sure, but I think the metadata
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
is the right solution. If you have already tried this, try to force to refresh metadatas inserting page link here https://developers.facebook.com/tools/debug
It's the officially documentation
You can update the attributes of your page by updating your page's tags. 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. These properties are fixed to avoid surprising users who have liked the page already. Changing the title or type tags after these limits are reached does nothing, your page retains the original title and type. 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.
Is there a special url for sharing to Facebook and Twitter for mobile?
Or are they the same as those from websites?
Using
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
Twitter
for Twitter and
<script>
function fbs_click()
{
u='www.something';
t='title';
window.open('http://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');
return false;
}
</script>
<a rel="nofollow" href="http://www.facebook.com/sharer/sharer.php?u=someurl" onclick="return fbs_click()" target="_blank" class="">Facebook</a>
for Facebook.
Your sharing implementation should be the same and should work so long as your mobile users have devices capable or rendering JavaScript. Otherwise you can use each platforms' API url to share inside a link, the only problem is the callback redirects them either to Twitter or Facebook and they'll have to manually return to your site. The links are as below:
Sharing on Facebook:
http://m.facebook.com/sharer.php?u=<urlencoded url>t=<urlencoded title>
For example:
http://m.facebook.com/sharer.php?u=http://www.google.com
Updating status on Twitter:
http://mobile.twitter.com/home?status=<urlencoded status>
A couple of notes regarding Simpleton's answer.
The http://m.facebook.com/sharer.php URL may not be what you want. The site that you provide in the u query parameter needs to have some tags in the page in order for the share
page to be at all interesting. Just try putting another URL in there other than Google to see what I mean. I was never really able to figure out what it is looking for in the page of the site in order to show anything useful in your share page. I did not see any way to provide extra information about the site you are sharing.
The t query parameter is no longer read by facebook as far as I could tell
I found that the Facebook feed dialog was a better sharing alternative (https://developers.facebook.com/docs/reference/dialogs/feed/). See the example at the bottom of that page for the information you can share. Paste that example URL in to your browser to see what it looks like. You can play around with the parameters to see what each parameter controls in the post. For example, if you don't provide the caption parameter, it seems that the base URL of the link parameter is used in it's place. To use the feed dialog approach, you need to register your app in Facebook to get an app_id that you will need to include in the feed dialog URL. You also associate your app with a web site URL, which you also use in the feed dialog URL. If you want Facebook to serve you a mobile-friendly page, append &display=touch to the end of the feed dialog URL. Lastly, you must provide redirect_uri parameter where the user will be redirected (with the post ID included as a query parameter), so you have to have something at that URL to handle the response.
Regarding the http://mobile.twitter.com/home?status URL, I learned a couple of things: first, any URL's in include in the status will not be shortened (bummer); second, if your status includes any single quotes, they will be encoded as ' (HTML entity code) but will not get decoded when your post the tweet. However, this doesn't happen if you are posting via the desktop, using the same URL. You can see what I mean by trying the following URL from both your iPhone (I was using Safari on iPhone) and then from your desktop (I was using Safari):
http://mobile.twitter.com/home?status=Wayne's%20World
Note, I do an javascript encodeURI on the status, but single quotes are not generally encodable characters by most URL/I encoders. There are some that will replace the single quote with a %27, but I tried inserting that manually and it still didn't get decoded in the status text.
I hope this information helps someone comes here looking for simple Facebook and Twitter sharing options.
Twitter - This is how I solved the tweet by url for all devices/browsers issue:
http://twitter.com/intent/tweet?text= + encodeURIComponent(tweet);
encodeURIComponent - is a built in javascript function, explained here.
The 'http://mobile.twitter.com/home?status=' is not supported, and you will get encoding issues when twitter requests a login.
Facebook - For facebook sharing I used Facebook API example
The url is ok, but you need to do some work on your server to get Facebook to really make it look decent. Facebook now uses "Open Graph", which allows you to add special tags to your web page that Facebook understands. You can define what types of media are on the page, even add your own objects with definitions you create inside your Facebook app. The link to the developer Open Graph objects page is Here.
A sample of Open Graph on a detail page might look like this:
<meta property="fb:app_id" content="YOUR FACEBOOK_APP_ID }}" />
<meta property="og:url" content="The URL that this page is on" />
<meta property="og:site_name" content="Your domain" />
<meta property="og:title" content="Title of your page" />
<meta property="og:type" content="This is very important - it is how
Facebook refers to your post. Image, video, text, etc. Even custom stuff is
possible" />
<meta property="og:image" content="image url for facebook to display on
the user's wall" />
<meta property="og:determiner" content="auto" />
<meta property="og:description" content="A description you want with this
content" />
And so on. This all goes in the <head> of the page of the actual url you are supplying to Facebook. Then Facebook will translate this into the appropriate post. In addition, you need to set up the Open Graph on your apps developer page, so that Facebook knows to look for the og: tags. It's complicated, but it does work.
Good luck!