Emoji in Embedded Tweets


#1

Hello,

Earlier today I was having trouble embedding a tweet on my website. Turns out, there were two emoji in the text area that I eventually had to delete to have the tweet appear as it should.

Is this something I’m always going to have to do?

Thanks.


#2

By “text area”, do you mean a textarea element or are you referring to something else?

Also, if you could provide an example (a quick jsbin/jsfiddle usually does the trick), that’ll make it much easier for me to help debug the issue.


#3

When I said text area, I meant the what’s inside of the “P” “/P” of the tweet.

Matt


#4

I was trying to post the embedded tweet on here, but it’s not letting me.

Matt


#5

Can you share the link to the tweet that’s giving you trouble?


#6

Here is the link: http://buckeyebanter.com/?p=29504

Matt


#7

What exactly was the problem you were experiencing? Was the embedded tweet not rendering correctly or were you having trouble saving your post on whatever content management system you use for buckeyebanter.com? The reason I ask is because the presence of emojis in the tweet text should not prevent an embedded tweet from rendering. Here’s a simple example of it working as expected with the source coding being:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
   <blockquote class="twitter-tweet" lang="en"><p>I am officially flipping my commitment from Florida to THE Ohio State University. Thanks for all your support. 🅾🙌 <a href="http://t.co/WxrvliX74Y">pic.twitter.com/WxrvliX74Y</a></p>&mdash; Baker Inc. (@Lastname_Baker) <a href="https://twitter.com/Lastname_Baker/status/524720617434533888">October 22, 2014</a></blockquote>

  <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</body>
</html>

#8

When I was trying to post the tweet as is, it would not render properly. Instead, I would get:

I am officially flipping my commitment from Florida to THE Ohio State University. Thanks for all your support.

It was just in blockqoute form. Nothing else. Not until I deleted those two emoji. Then it fully rendered as it is now. Oh, and the blockquote tag wasn’t closed, either.

Matt

PS - I tried to add a screenshot, but wasn’t allow to add that.


#9

Still having the same problems.

This:

Gets this:

Nothing more. And the blockquote tag is still not closed.


#10

Which browser are you using? I wonder if this could be related to some browsers not correctly rendering emoji? (saying that, I just tested Jake’s sample in Chrome and Firefox successfully).

I’ll leave @JakeHarding to comment on the web source side of this. Could anything be overriding the CSS, for example your CMS?


#11

So far I’ve tried both Chrome and Opera. Both do the same thing.


#12

My best guess based on the current symptoms is that this problem is originating from your CMS. It seems like when your CMS encounters an emoji character, it drops the rest of the line.

One way you could verify this would be to insert the blockquote without the twitter-tweet class into your page i.e.

  <blockquote><p>I am officially flipping my commitment from Florida to THE Ohio State University. Thanks for all your support. 🅾🙌 <a href="http://t.co/WxrvliX74Y">pic.twitter.com/WxrvliX74Y</a></p>&mdash; Baker Inc. (@Lastname_Baker) <a href="https://twitter.com/Lastname_Baker/status/524720617434533888">October 22, 2014</a></blockquote>

If that renders as…

I am officially flipping my commitment from Florida to THE Ohio State University. Thanks for all your support.

…then I think it’s safe to say the problem isn’t with the Twitter code.


#13

OK, then it’s not Twitter, it’s WordPress. The solution if anyone has the problem: https://core.trac.wordpress.org/ticket/27961


#14