I have a webpage that, if the user is on mobile, enabled the sharing option (story and post). As Instagram API is not letting share directly story or post when is not a mobile app, I want to call the instagram app through the web browser and let the app show the share story/post option. How can I do that?
You can use the navigator's navigator.share() to call the OS' default sharing panel on the client device. If the user has the instagram app installed then the option to share the image shall be available in the default share panel which the user can choose share to. navigator.share() is not available on desktops.
A sample code snippet that explains you how you can prompt the user to share the image on instagram below.
if (!navigator.canShare) {
alert(`Your browser doesn't support the Web Share API.`);
}
else{
try{
await navigator.share({
title: "Images",
text: "Beautiful images",
});
alert("Shared!");
} catch (error) {
alert(`Error: ${error.message}`);
}
}
A drawback of this method however is that you cannot have the control of the options which the user can see n the share panel, Hence, You also do not exactly have the control if the image was successfully shared on instagram by the user.
You can read more about the MDN docs for the browser compatibility.
https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share