Friday, September 16, 2011

Apostrophes in Facebook Likes

When coding the html for a Like for Facebook we wanted to put an apostrophe in the text that would be displayed to go along with the Like. Unfortunately we kept on running into the issue of Facebook replacing the apostrophe with a little box with some funny characters in it.

Now this happened in all of the browsers we tested in so we figured this had to be a Facebook issue. After a couple of hours of searching I couldn't find anything and had to turn to my coworker Dan and here was his response:

There are a couple of issues:
  1. Word processors generally change any quotes to right or left quotes (if there is a non-space character before, it changes to right quote, otherwise left). The normal single quote is ASCII 39, right single quote is 146, left is 145. Codes above 127 are not defined in HTML 4.
  2. When you copy the text to Dreamweaver, it keeps the same ASCII code, but displays the normal single quote, like most browsers will eventually do unless the page uses a "Strict" doctype. A slightly more sane approach would have been to replace characters over 127 it with the corresponding HTML code, but apparently it doesn't.
  3. When you click the button to share the page with Facebook, it downloads the page, gets the text from the description meta tag, and caches it so it doesn't have to keep reloading the page. Then it displays it's page using an HTML4 strict doctype, so any browsers that actually follow the HTML standards (anything except Internet Explorer) are supposed to not "fix" things like extended ASCII characters. Instead it show the box with the ASCII code in hexadecimal.
  4. Since the description text is cached, if you make any changes (like replacing the ' with ’) and try to share again, it won't update it, it'll keep showing the same incorrect text. You can force Facebook to reload the page by using the Debugger: developers.facebook.com/tools/debug
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)