14

I am using the Facebook Messenger Platform to create a generic template. I am currently using ngrok to test locally, and the image_url I input for the generic template never shows in Messenger. The generic template is sent, and the image is just blank. Using Inspect, I can see that the CSS for the image is:

background-image: url("https://external.xx.fbcdn.net/safe_image.php?d=AQA1nM3pKJnllzq0&url=https%3A%2F%2Fdc3858ef.ngrok.io%2Fassets%2Fimages%2Fvideo_image.jpg&_nc_hash=AQAlBOE-vbT8cl-i");

If I open this URL, it is just a black screen with one white pixel in the middle. Here is the message data that I use:

 messageData = {
              recipient: {
                id: senderID
              },
              message:{
                attachment:{
                  type: "template",
                  payload: {
                    template_type: "generic",
                    elements: [
                      {
                        title:"Test Video Link",
                        image_url: MY-NGROK_DOMAIN + "/assets/images/video_image.jpg",
                        subtitle: "Check out this video!",
                        default_action: {
                          type: "web_url",
                          url: "www.google.com"
                        }
                      }
                    ]
                  }
                }
              }
            };

This image_url works fine if I open it in a browser. Similarly, if I create an 'image' type message data rather than 'template', this image is loaded in Messenger.

How can I get my image_url to load properly for a generic template?

userwithquestions
  • 153
  • 1
  • 9
  • I am having the exact same issue. The exact same image displays from a non-ngrok domain. – Ceebs Sep 29 '17 at 08:55

2 Answers2

5

I have the same issue. I and the problem appears when the webhook domain is the same as the image url. If you use an image on a different server, it works.

Leon Lahoud
  • 66
  • 1
  • Thank you! That's exactly what was happening – userwithquestions Oct 05 '17 at 19:52
  • make sure you are sending the end in your node reply. This seems to have fixed it for me. – Leon Lahoud Nov 28 '17 at 20:23
  • @LeonLahoud What do you mean by "the end"? – Amio.io Apr 27 '18 at 12:40
  • @userwithquestions when you started serving your images from a different domain, you did so also using ngrok? – jhenriquez May 06 '18 at 03:33
  • Having the same issue, serving the image up with a Java web app. In browser the image loads fine, when requested via safe_image.php I get a blank image. – Christophe Geers May 15 '18 at 12:29
  • Actually, this isn't the problem. Facebook will not accept resources links, for example images, etc., from any *.ngrok.io subdomains. The reasoning is that most developers use random one time user ngrok.io domains that expire. Facebook has issues with this because of the high number of broken links. You must use ngrok with reserved domains for retrieving images. – code5 Oct 05 '18 at 22:33
5

I had the same issue. I've put my local web application behind ngrok. Requesting the image directly in the browser worked fine, but when it's loaded via Facebook's safe_image.php script it would show a blank image. After a lot of debugging it turned out to be the tunnelling service itself. I switched to another service (localtunnel) and there it worked fine.

More information can also be found on this issue registered on FB:

https://developers.facebook.com/support/bugs/2151860088174161/

Update

Contacted ngrok about this and got a quick reply, this is due to Facebook blocking ngrok for this script.

Christophe Geers
  • 8,564
  • 3
  • 37
  • 53