Generic template image_url does not load in Messenger - Facebook Messenger Platform

user_3798942 0
Viewed 1950

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?

messenger ngrok facebook templates
2 Answers

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.

user_87213910

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.

user_8930990
Related