How to send emojis in a button message?

[bramski]

I am really struggling with an encoding problem, and I'm not sure if the library is doing everything correct...

I am posting the following message data:

{
  "message": {
    "attachment": {
      "payload": {
        "buttons": [
          {
            "payload": "true",
            "title": "👍",
            "type": "postback"
          },
          {
            "payload": "false",
            "title": "👎",
            "type": "postback"
          }
        ],
        "template_type": "button",
        "text": "Did you like that?"
      },
      "type": "template"
    }
  },
  "recipient": {
    "id": 1254337357941736
  }
}

which contains thumbs up emojis. Supposedly, the graph API understands this.
I'm calling the api as follows:

fb.api('/me/messages', 'post', messageData, function (response) {
    if (response.error) {
      console.error("Unable to send message.");
      console.error(response.error);
    } else {
      console.log("Sent message:", JSON.stringify(messageData));
    }
  });

but on facebook they just come out like...

[dantman]

I can't test this part of the API in the explorer so I won't be able to debug this.

request is responsible for building the form encoding the form data and the Content-Type header.

The only possibility I can think of might be either request's Content-Type header could use an extra charset or it does something strange with that extended plane of unicode characters.

[dantman]

It's unlikely the Content-Type, request doesn't send the raw unicode data, it's encoded. And the data seems to be encoded fine.

POST /v2.1/me/messages HTTP/1.1
User-Agent: thuzi_nodejssdk/2.0.0-alpha1
host: ...
content-type: application/x-www-form-urlencoded
content-length: 440
Connection: keep-alive

message=%7B%22attachment%22%3A%7B%22payload%22%3A%7B%22buttons%22%3A%5B%7B%22payload%22%3A%22true%22%2C%22title%22%3A%22%F0%9F%91%8D%22%2C%22type%22%3A%22postback%22%7D%2C%7B%22payload%22%3A%22false%22%2C%22title%22%3A%22%F0%9F%91%8E%22%2C%22type%22%3A%22postback%22%7D%5D%2C%22template_type%22%3A%22button%22%2C%22text%22%3A%22Did%20you%20like%20that%3F%22%7D%2C%22type%22%3A%22template%22%7D%7D&recipient=%7B%22id%22%3A1254337357941736%7D 

'%7B%22attachment%22%3A%7B%22payload%22%3A%7B%22buttons%22%3A%5B%7B%22payload%22%3A%22true%22%2C%22title%22%3A%22%F0%9F%91%8D%22%2C%22type%22%3A%22postback%22%7D%2C%7B%22payload%22%3A%22false%22%2C%22title%22%3A%22%F0%9F%91%8E%22%2C%22type%22%3A%22postback%22%7D%5D%2C%22template_type%22%3A%22button%22%2C%22text%22%3A%22Did%20you%20like%20that%3F%22%7D%2C%22type%22%3A%22template%22%7D%7D'

> decodeURIComponent(_)
'{"attachment":{"payload":{"buttons":[{"payload":"true","title":"👍","type":"postback"},{"payload":"false","title":"👎","type":"postback"}],"template_type":"button","text":"Did you like that?"},"type":"template"}}'

[bramski]

Hmmm... so the solution on my side ended up looking like this:

function sendChoices(recipientId, text, choices) {
  let messageData = {
    recipient: {
      id: parseInt(recipientId)
    },
    message: encodeNonAscii(JSON.stringify({
      attachment: {
        type: "template",
        payload: {
          template_type: "button",
          text: text,
          buttons: transformChoicesToButtons(choices)
        }
      }
    }))
  };
  postMessage(messageData);
}

function encodeNonAscii(string) {
  return string.replace(/[\u0080-\uffff]/g, function (match) {
    return "\\u" + match.charCodeAt(0).toString(16)}
  );
}

[bramski]

That manages to get the unicode escape characters in there properly. Has to be done after JSON stringification though as the JSON stringifier would double escape the backslashes.

[dantman]

That is ultimately a hack to work around the issue; the cause of the issue is somewhere else in request or Facebook's api and will have to be fixed correctly.