I've been trying to figure out how to open an URL that you open within the Instagram app, in an external browser (Safari, Chrome) rather than the in-build Instagram-browser.
i want that link in website part of instagram asks to leave Instagram app and opens external browser visiting website.
I tried a lot of things, like using window.open with _blank, _system, etc. Also tried these within a
This is not possible, as it is a deliberate choice of the Instagram developers to use their own browser control.
You can detect Instagram in-app browser
navigator.userAgent.includes("Instagram")
and put link like that
<a href={location.href} target='_blank' download>Open in browser</a>
All magic in 'download' key word. When user clicks the link it will be redirected to the native browser. It work perfect in android. I haven't tested it on iOS
I found an interesting article that talks about it, try to work around with this bit of code to make the Instagram’s in-app browser redirect to your website
<script>
if(navigator.userAgent.includes("Instagram")){
window.location.href = "https://mywebsite.com/DummyBytes";
}
</script>
For more information have a look at the article: https://medium.com/@sasan.salem/opening-of-your-website-in-the-viewers-external-browser-automatically-instead-of-instagram-s-8aca5ee7e22f
You can add this script to head to redirect to chrome:
<script>
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
var str = navigator.userAgent;
var instagram = str.indexOf("Instagram");
var facebook = str.indexOf("FB");
if (/android/i.test(userAgent) && (instagram != -1 || facebook != -1) ) {
document.write("<a target=\"_blank\" href=\"https://yourdomain.com\" download id=\"open-browser-url\">Please wait. Proceed to Chrome</a>");
window.stop();
let input = document.getElementById('open-browser-url');
if (input) {
input.click();
}
}
</script>
You can solve it by acting as a file to be downloaded, then the in-app browser will redirect you to the mobile browser.
not working on iPhone. :(
<?php
$userAgent = $_SERVER['HTTP_USER_AGENT'];
if (strpos($userAgent, 'Instagram')) {
header('Content-type: application/pdf');
header('Content-Disposition: inline; filename= blablabla');
header('Content-Transfer-Encoding: binary');
header('Accept-Ranges: bytes');
@readfile($file);
die();
}
?>
namespace DotNet.Controller
{
public class DummyBytesController : ApiController
{
[HttpGet]
public HttpResponseMessage Get()
{
HttpResponseMessage Response;
string UserAgent = HttpContext.Current.Request.UserAgent;
if(UserAgent.Contains("Instagram"))
{
Response = new HttpResponseMessage(HttpStatusCode.OK);
Response.Content = new ByteArrayContent(new byte[50]);
Response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
return Response;
}
else
{
Response = Request.CreateResponse(HttpStatusCode.Redirect);
Response.Headers.Location = new Uri("https://mywebsite.com");
return Response;
}
}
}
}
It can be written more elegantly but the solution as of 21.04.2023 is:
var ua = navigator.userAgent || navigator.vendor;
var isInstagram = (ua.indexOf('Instagram') > -1) ? true : false;
var str = navigator.userAgent;
var i = str.indexOf("Instagram");
if (isInstagram) {
if (/iPad|iPhone|iPod/.test(ua)) {
window.location.href = 'googlechrome://example.com';
return;
}
window.location.href = 'intent:https://example.com#Intent;end';
return;
}
The only drawback is that on IOS, Safari which is the default browser does not have a URL Scheme that you can use, thus you have to resort to using chrome. It will fail if the user does not have Chrome installed.
Actually, there is a possibility. You first access the link with the in-app browser, then you click on the 3-dots button on the right top of the page and select "open in Chrome".
