CODEWITHSUNDEEP
iosshareios13navigator
Sijan Shrestha
Sijan Shrestha

Reputation: 2266

How to set thumbnail for iOS share sheet via website?

I am trying to figure out how I display a thumbnail for the share sheet in iPhone ( i have attached an image for the icon I am referring to). This feature seems to be available only from ios 13. I am not sure where the image/icon is picked up from. I have correctly set up a path for favicon and og:image on the website however the image is not getting picked up.

Currently, for the path I am using /assets/favicon.ico for icon and og:image. Should the image be www.domain-name.com//assests/favicon.ico?. I have not been able to find any documentation from the apple part on this.

For navigator.share, it does not have any specifics for sharing icons we can only pass text, URL, description, and files and I do believe navigator.share is not responsible for the image. The image/icon should be picked up from the icon or og:image.

Any suggestion or hint is much appreciated.

enter image description here

Upvotes: 1

Views: 2170

Answers (1)

Sijan Shrestha
Sijan Shrestha

Reputation: 2266

I figured out the solution after a bit of hit and try.

The problem:

I wanted to display a thumbnail (pick up from the website) for ios 13 devices while I use the native share feature.

Expectation:

Whenever I use the native share from the browser and display the title and text along with the image

Code:

const title = 'Website Name'
const text = 'Welcome to the website'
const url = 'beer_and_melons.com'
    
navigator.share ( {title,text,url});

Limitation: If I want to display the website logo, I cannot pass text field. i.e

navigator.share ({url})

This way the crawler will go through your site and pick up the icon (not og:image)

Conclusion:

You cannot use text and image together, you need to compormise !

The following is an image, note i have not added any text enter image description here

The following is an image with text field enter image description here

Hope this helps someone and doesnot waste's entire day trying to find a solution!

May the force be with you!

Upvotes: 3

Related Questions