13 Dec 2016
Don't let an emoji trip you up! The trials and tribulations of embedding HTML with special characters in it.
There are times when you want to use your audiences voice, for example to showcase the audience reaction to a show. One way of doing that is to repurpose social content and shape it into a timeline. What better way to demonstrate the brilliance of a show and validate how good your offer is, than by collating and broadcasting all the praise for a given show all in one place on your site in a curated Twitter timeline.
Here's a good example:
All well and good but there are a few tips to embedding social into pages and a few things you (as a content editor) need to be sure to check if for whatever reason it doesn't work.
For example, there are several different ways you can embed a Twitter timeline on a page on your site, one of the most common (and easiest) is to grab the embed code of all the Tweets you want and insert them into the relevant field in the backend of CMS. However, rather than the default 'HTML' format, you (as an editor) need to make sure to change the field setting to be RawHTML format.
Assuming you've got that right, ghosts in the machine can still frustrate you and cause other editorial issues.
One recent discovery is that it looks like some characters - e.g. the odd smiley emoji smiley - still get passed into RawHTML and break not just the whole timeline but the page itself.
These emojis need to be stripped out from the embed code. If they're not then the editor might get an unhelpful (and misleading) error message aka: (it's a red herring which might cause confusion etc)
Temporarily UnavailableThe website that you're trying to reach is having technical difficulties and is currently unavailable.
We are aware of the issue and are working hard to fix it. Thank you for your patience.---
So how do you fix this?
Here's the offending embed code:
Strip out that smiley emoji and you get this:
And it works :-)
It would be perfectly reasonable to ask 'Isn't the CMS, Drupal, having the issue in this scenario? I.e not being able to save the content due to that character?'
And yep, you'd be partly right but not entirely. In these instances, with these emojis, no matter what you paste the embed code into (e.g. a plaintext app such as Notes, Skype, your email client that's config'ed to be plaintext, ASCII only), it displays the emoji. It's a gremlin, displaying the emoji in whatever plain text, RawHTML field or plain text editor you're using and as a consequence it doesn't get parsed properly and so it 'breaks' the page.
Now, we're good at what we do but we're not responsible for or own Twitter and whilst we can report an anomaly like this and support clients if and when they encoutner an issue similar to the one described above, we're not about to fix Twitter. So the long and short of it is, as an editor a) you need to be careful with embedding (sic RawHTML); and b) if you encounter an issue like the above, you need to strip the offending emoji from the embed code (or obviously decide not to embed the offending Tweet).