Allowing blocks to easily share images via SMS, email, etc

I am trying to build an app that allows people to share images easily with friends in different states (Florida, North Carolina, etc).

You can view it here: https://voterguide.softr.app

Right now, I used the Inventory Tracker template as a start (excuse the header) and have made the blocks have the images that I want to be able to be shared.

Next, I’d like someone to be able to tap on the image, and be able to share it via:

  • SMS
  • WhatsApp
  • Email

I am not sure if this is possible or if a “Made With Softr” exists that has pulled something like this off?

A few use cases I was thinking could work:

  • On mobile: The ability for the image block to initiate the native sharing options on a phone (similar to how you can share via email, whatsapp, text when you have a photo open, etc)
  • On desktop: Perhaps you can just right click and copy the image, then paste it into Messages or Gmail?
  • Alternatively to the above: Buttons below the image cards could somehow load texts or emails that include the image

Any ideas welcome. Thank you!

Good news and bad news. The good news is that there is a relatively new browser API called web-share that does exactly what you want. The bad news is that it is still experimental, and not actually enabled in all browsers. From a quick test it appears that it works by default in Safari (desktop and mobile), Edge (desktop), and Chrome (mobile), but crucially not yet in Chrome desktop. I enabled it from chrome://flags and tested it on Chrome desktop and it seemed to work.

Here’s what I tested it with in a custom code block:

<script>
function doShare() {
    if (navigator.canShare) {
      navigator.share({
        title: 'web.dev',
        text: 'Check out web.dev.',
        url: 'https://web.dev/',
      })
        .then(() => console.log('Successful share'))
        .catch((error) => console.log('Error sharing', error));
    } else {
        console.log('navigator.canShare returned false')
    }
}
</script>
<input type="button" value="share" onclick='doShare()'>

1 Like

This could be easily done if you only share the link to your image; like most apps do in order to drain more traffic. Then you can format a lovely list details with the image and other details (like public comments ) for users to visit and comment.

Then if the link was shared via whastapp for example, you can format a nice whatsapp preview for your content by entering the right information into the page-settings/Social, however the big trouble is that right now, these social fields, can not be dynamic. Am I right @artur.

This was also the case for page-settings/SEO but eventually the team found a a way to make this SEO inputs dynamic.

1 Like

@acjnas social can be dynamic too: List Details - Softr Docs

1 Like

This is fantastic! (I have to stop by the docs a little more often)
Then @CaliHoya is more than ready to start with the first beta of the sharing image app.

1 Like

Am I getting this right?

And how do I set social media image to “Social:Image”?

Another option could be to actually embed tweets or instagram posts that already have the image and social sharing buttons, such as this:

Is this type of social media embedding possible on Softr?

Hi @CaliHoya the setup should be done on your Airtable. Just leave the setup on your softr blank. By default if it’s blank, then Softr will pull the title and desc from your setup on Airtable. Social media image is same.

Please see my attached sample of dynamic page title and description.
this is my website using that setup: Pet Friendly Cafe in Kembangan, Jakarta Barat, DKI Jakarta you can test it out.