Share image using Social Sharing Plugin

  

Hello,

I´m trying to use the Social Sharing Plugin to share text and images in Facebook, Email, Instagram and so on.

The main idea is based on the worflow below. Convert the binary image to base64 and pass it to the URL (credits to Fábio Vaz on this post):

1)

2)

3)


I could notice some problems after this tentative:

  1. When I press the button "Share", it takes some time to open the IOS functionality with the sharing options (maybe due to the size of the string to pass, dont know for sure);
  2. Sometimes the app crashs when select  to share through Facebook;
  3. The image is not being generated, just the string, as you can see in the examples below:


Facebook:

Email:


What could be wrong with this? Is there any other way to do it with Outsystems for mobile apps?

Thank you!

Tip for beginners like me: These plugins, like this one, PrinterPlugin, etc, just work outside Outsystems now.

Solution

Hi Thiago,

From what I can see on the Cordova plugin's  page, it supports sharing images by passing the file location to the image (as you can see here). According to the post you used to get Fábio's solution, the OutSystems Social Sharing Plugin does not have this functionality exposed though... I didn't check exactly what Fábio's solution does, but he mentions a new action SocialSharingImage that I don't see you using.

From your screenshots, it seems you are trying to share with Facebook a file by using a Base64 encoded data-URL, which could explain why it takes a while to load... before displaying the sharing options it already had to load the entire image. This doesn't seem to be supported by the sharing window, as it is not decoding the URL and is just displaying it instead of the image/file it represents. Finally, be careful, you are hard-coding the data-URL to be a PNG file, but it is possible the image is in other formats (really depends whether you know the image will always be a PNG or not).

Solution

Jorge Martins wrote:

Hi Thiago,

From what I can see on the Cordova plugin's  page, it supports sharing images by passing the file location to the image (as you can see here). According to the post you used to get Fábio's solution, the OutSystems Social Sharing Plugin does not have this functionality exposed though... I didn't check exactly what Fábio's solution does, but he mentions a new action SocialSharingImage that I don't see you using.

From your screenshots, it seems you are trying to share with Facebook a file by using a Base64 encoded data-URL, which could explain why it takes a while to load... before displaying the sharing options it already had to load the entire image. This doesn't seem to be supported by the sharing window, as it is not decoding the URL and is just displaying it instead of the image/file it represents. Finally, be careful, you are hard-coding the data-URL to be a PNG file, but it is possible the image is in other formats (really depends whether you know the image will always be a PNG or not).

Jorge,

I inspected the extension that Fabio did with the Social Sharing Plugin before use the one I used.

It seems that work as the same, see:

Fabio´s flow:

The extension:

Js:


This is strange, it was suposed to work!!

About the time taken to load, I´m with you...makes sense.

Thiago Caixeta wrote:

Jorge Martins wrote:

Hi Thiago,

From what I can see on the Cordova plugin's  page, it supports sharing images by passing the file location to the image (as you can see here). According to the post you used to get Fábio's solution, the OutSystems Social Sharing Plugin does not have this functionality exposed though... I didn't check exactly what Fábio's solution does, but he mentions a new action SocialSharingImage that I don't see you using.

From your screenshots, it seems you are trying to share with Facebook a file by using a Base64 encoded data-URL, which could explain why it takes a while to load... before displaying the sharing options it already had to load the entire image. This doesn't seem to be supported by the sharing window, as it is not decoding the URL and is just displaying it instead of the image/file it represents. Finally, be careful, you are hard-coding the data-URL to be a PNG file, but it is possible the image is in other formats (really depends whether you know the image will always be a PNG or not).

Jorge,

I inspected the extension that Fabio did with the Social Sharing Plugin before use the one I used.

It seems that work as the same, see:

Fabio´s flow:

The extension:

Js:


This is strange, it was suposed to work!!

About the time taken to load, I´m with you...makes sense.

Something came out to my mind reading your reply carefully...

Let me try...


Jorge Martins wrote:

Hi Thiago,

From what I can see on the Cordova plugin's  page, it supports sharing images by passing the file location to the image (as you can see here). According to the post you used to get Fábio's solution, the OutSystems Social Sharing Plugin does not have this functionality exposed though... I didn't check exactly what Fábio's solution does, but he mentions a new action SocialSharingImage that I don't see you using.

From your screenshots, it seems you are trying to share with Facebook a file by using a Base64 encoded data-URL, which could explain why it takes a while to load... before displaying the sharing options it already had to load the entire image. This doesn't seem to be supported by the sharing window, as it is not decoding the URL and is just displaying it instead of the image/file it represents. Finally, be careful, you are hard-coding the data-URL to be a PNG file, but it is possible the image is in other formats (really depends whether you know the image will always be a PNG or not).

Jorge,

You were right.

The method is almost the same but the parameters were in wrong order, see:


Fabio´s solution

window.plugins.socialsharing.share(null, $parameters.Message, $parameters.URL, null,
 

Mine:

window.plugins.socialsharing.share($parameters.Message, null, null, $parameters.URL,


After fix that, the image is being displayed, but, when sharing to Facebook, the image still takes some time to load, and after 5 seconds loaded in the screen the sharing screen crashes and it returns to the app.

Is there other way to do that? I retrieving directly from local storage...


From what I read on the plugin's Github page, it is possible to share from a local folder, but I'm not sure how to achieve that on iOS using OutSystems.

By the way, where are you fetching your images from to begin with?

You may want to check this OutSystems plugin (I assume it's based on this Cordova plugin, but haven't checked). You could try and:

  • write the image locally;
  • share it;
  • delete the local copy of the image.

Jorge Martins wrote:

From what I read on the plugin's Github page, it is possible to share from a local folder, but I'm not sure how to achieve that on iOS using OutSystems.

By the way, where are you fetching your images from to begin with?

You may want to check this OutSystems plugin (I assume it's based on this Cordova plugin, but haven't checked). You could try and:

  • write the image locally;
  • share it;
  • delete the local copy of the image.

Jorge,

I tested this plugin. It seems that works fine.

I saved the file and than I was able to share the image faster and with no crahes.

Thank you very much again for your support.