Emoji in Embedded Tweets

ThatMattBarker · 2014-10-22T20:57:14.748Z

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.

JakeHarding · 2014-10-23T05:01:47.832Z

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.

ThatMattBarker · 2014-10-23T23:41:11.776Z

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

Matt

ThatMattBarker · 2014-10-23T23:42:16.737Z

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

Matt

JakeHarding · 2014-10-24T00:35:57.623Z

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

ThatMattBarker · 2014-10-24T02:30:59.575Z

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

Matt

JakeHarding · 2014-10-24T19:16:28.625Z

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>

ThatMattBarker · 2014-10-24T19:38:24.617Z

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.

ThatMattBarker · 2014-11-05T16:03:47.543Z

Still having the same problems.

This:

twitter1.JPG818x91 26 KB

Gets this:

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

andypiper · 2014-11-05T16:27:28.070Z

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?

ThatMattBarker · 2014-11-05T16:41:28.236Z

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

JakeHarding · 2014-11-05T19:18:52.337Z

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.

ThatMattBarker · 2014-11-05T19:56:44.729Z

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

andypiper · 2014-11-05T22:59:41.153Z