I was recently working on a project involving the facebook “like” button and how it creates links back to the place of origin. For the vast majority of websites, simply implementing the code found in the facebook documentation is enough, however, I was dealing with a different sort of monster. The site I wanted to implement the like button on was self-replicating, using a url rewrite rule to handle replication. To prevent duplicate content, a canonical url tag was listed in the header. I noticed upon implementation of the facebook like button that the posted links were returning to the specified canonical url in the page header instead of the url I specified in my like tag. This caused me to want to investigate how facebook’s like button works. Below are my findings.
Upon clicking the “like” button, whether using the <iframe> or js SDK version of the like button, an AJAX call was sent out to facebook (of course). Facebook would search, in this order, for the first of the following:
- facebook’s own open graph protocol meta tag
- the canonical url meta tag
- a specified url in the actual like button
- the current page’s url
Once determining the URL based on the above, facebook would then crawl the correct page sniffing for (in this order):
- facebook’s own open graph protocol meta tags
- any other data it could glean to get what it needed (ie, a meta description, the title, etc)
It would use the gathered information to then build the post on the user’s wall correctly. However, in certain circumstances, specifying your own og tag was not enough.
In the event a user clicks the “like” button, but does not enter the optional comment, the link posted on the user’s wall actually linked back to the canonical URL. Interestingly, the fan page that facebook creates for your page is properly linked using the og:url you specify. We all know, however, that most users will click on the news feed link instead of the page’s. Below are the tests I ran to verify what was happening:
| canonical | OG tag |
comment | Finding | screenshot | Conclusion |
| YES | YES | YES | properly linked, extra info included |  |
Best case scenario but cannot force someone to comment. OG tags will create fan pages for any page someone “likes”. |
| YES | YES | NO | Improperly linked on feed, but properly linked in all extra info that is included (fig 1) Note: on page refresh, it appears facebook crawled the correct web page and added a link to the root of the site: (still improperly linked (fig 2) |
1.
2. |
Could get around with use of a rel param that would be sent in url. Would require framework change to support. |
| YES | NO | YES | improperly linked everywhere |  |
Current implementation on live. not acceptable |
| YES | NO | NO | Improperly linked (fig 1) Edit: on page refresh, it appears facebook crawled the canonical index page and picked up the extra info on it included in the canonical og tags: (still improperly linked, but extra info from canonical page included) (fig 2) |
1.
2. |
Current implementation on live. not acceptable |
| NO | YES | YES | Properly Linked, extra info included, more likely to appear in news feed. |
 |
cannot implement—canonical must be defined. |
| NO | YES | NO | Properly Linked, with extra info included |
 |
cannot implement—canonical must be defined. |
| NO | NO | YES | Properly linked, extra info gotten from other meta tags in header |
 |
cannot implement—canonical must be defined. |
| NO | NO | NO | Properly Linked |  |
cannot implement—canonical must be defined. |
All tests were run with the facebook javascript SDK Like button implementation method as comments are not
allowed with <iframe>s in the size we need.
Facebook has created a “rel” attribute that can be sent in with a like button, which is returned regardless of the url facebook chooses to show. Theoretically, the issue of what page facebook posts could be gotten around with a sniffer in your code that looks for a url param of “fb_rel” and redirects accordingly.