Flutter open facebook link in facebook app android & ios

Question

In my app i have stored Facebook url's. I want to open them in facebook app not in browser. I tried using flutter_url_launcher package but it open the link in default browser ... What i want is to open the link directly into the facebook app . Can anyone suggest any solution or package to help me out of this situation?

Leak

Too late, but I found this: reddit.com/r/FlutterDev/comments/aowu6c/… – Cable

Check this answer, it is a simple and straight forward way to do it. – Maidinwaiting

Answer 1

I also used the solution from the link @ruelluna mentioned.

Per current version, the below code worked for me:

String fbProtocolUrl;
if (Platform.isIOS) {
  fbProtocolUrl = 'fb://profile/page_id';
} else {
  fbProtocolUrl = 'fb://page/page_id';
}

String fallbackUrl = 'https://www.facebook.com/page_name';

try {
  bool launched = await launch(fbProtocolUrl, forceSafariVC: false);

  if (!launched) {
    await launch(fallbackUrl, forceSafariVC: false);
  }
} catch (e) {
  await launch(fallbackUrl, forceSafariVC: false);
}

Also, make sure Info.plist file contains the following:

 <array> 
        <dict>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>fb[your_page_id]</string>
            </array>
        </dict>
    </array>

You can take your_page_id from: https://findmyfbid.com/

Exuviae

This code just open by browser but owner question wants to open by Facebook app – Eldredge

I just tried this on my Android phone with Facebook app installed and worked properly. On what kind of phone is this not working for you ? – Exuviae

I tried in my iphone and simulator too and they just open safari :((( – Eldredge

I tried the same code on my iPhone 7 and worked as expected: opened Facebook app if installed or the web browser if not. – Exuviae

Thanks a lot. I forgot Info.plist part. I tried again and it worked perfectly. But is there any way that we don't need to add page_id in Info.plist? This doesn't seem optimal. – Eldredge

After the first run, I remove code in info.plist and it still work. Can you explain more about this? – Eldredge

I'm happy is working for you. I do have Facebook share integrated as well, which requires the above change in Info.plist (check pub.dev/packages/social_share_plugin). Why didn't worked for you before ? – Exuviae

Running it in Android, only opens the facebook app but doesn't redirect to the page. When i remove the facebook app, it opens the fb page in browser just right. – Fullscale

for me it just opens the facebook app, but not the correct page/profile – Hyperostosis

+1 for the hint to use different protocol urls for ios and android, I kept failing on ios with fb://page/page_idprior to reading this. But does anyone know how to do the equivalent for a FB group? fb://groups/<group_id> doesn't work for me on ios. – Dhaulagiri

Answer 2

My working function:

 void launchUrl2() async{
   var url = 'fb://facewebmodal/f?href=https://www.facebook.com/al.mamun.me12';
   if (await canLaunch(url)) {
     await launch( url, universalLinksOnly: true, );
   } else { throw 'There was a problem to open the url: $url'; }

 }

Salvage

Answer 3

I struggled with this for a couple hours and found an updated solution.
First of all, if you add

<array> 
        <dict>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>fb[your_page_id]</string>
            </array>
        </dict>
    </array>

To your Info.plist file as stated by @Al Manum, method canOpenUrl will always return true, even if Facebook app is not installed.
+1 to this answer for giving me the hint.

Add the following instead:

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>fb</string>
</array>

The following code will open Facebook native app if installed on device, else it will open the browser

Future<void> _openFacebook() async {
    String fbProtocolUrl;
    if (Platform.isIOS) {
      fbProtocolUrl = 'fb://profile/{your-page-id}';
    } else {
      fbProtocolUrl = 'fb://page/{your-page-id}';
    }

    String fallbackUrl = 'https://www.facebook.com/{your-page-uri}';

    try {
      Uri fbBundleUri = Uri.parse(fbProtocolUrl);
      var canLaunchNatively = await canLaunchUrl(fbBundleUri);

      if (canLaunchNatively) {
        launchUrl(fbBundleUri);
      } else {
        await launchUrl(Uri.parse(fallbackUrl),
            mode: LaunchMode.externalApplication);
      }
    } catch (e, st) {
      // Handle this as you prefer
    }
  }

Tested on iOS 15.5, Android 11 and Flutter 3.

Federico

Answer 4

I set Mode property to externalApplication then it worked fine

Future<void> _launchUrl(String url) async {
  try {
    if (!await launchUrl(Uri.parse(url), mode: LaunchMode.externalApplication)) {
      throw Exception('Could not launch');
    }
  } catch (e) {
    Fluttertoast.showToast(msg: "$e");
  }
}

Excite

Answer 5

I used this approach:

  Future<bool> openInFacebook({
    required bool isIOS,
    required String linkSection,
  }) async {
    final fbProtocolUri = isIOS
        ? Uri(
            scheme: 'fb',
            host: 'profile',
            path: '/$linkSection',
          )
        : Uri(
            scheme: 'fb',
            host: 'page',
            path: '/$linkSection',
          );

    final fallbackUri = Uri(
      scheme: 'https',
      host: 'www.facebook.com',
      path: '/$linkSection',
    );

    return _launchUrlSafe(fbProtocolUri, fallback: fallbackUri);
  }

  Future<bool> _launchUrlSafe(
    Uri url, {
    Uri? fallback,
  }) async {
    var success = false;
    try {
      success = await launchUrl(url);
    } catch (e, st) {
      success = false;
    }
    if (!success) {
      try {
        if (fallback != null) {
          success = await launchUrl(fallback);
        }
      } catch (e, st) {
        success = false;
      }
    }
    return success;
  }

It's recommended to use launchUrl to check if the URI can be launched https://pub.dev/packages/url_launcher#checking-supported-schemes

Footstone

Answer 6

added new one which uses the new launchUrl

onTap: () {
_launchSocial('fb://page/109225061600007', 'https://www.facebook.com/Username');
},

void _launchSocial(String url, String fallbackUrl) async {
    try {
      final Uri uri = Uri.parse(url);
      await launchUrl(uri, mode: LaunchMode.platformDefault);
    } catch (e) {
      final Uri fallbackUri = Uri.parse(fallbackUrl);
      await launchUrl(fallbackUri, mode: LaunchMode.externalApplication);
    }
  }

Sanalda

Answer 7

You can open it as web

final url =
      "web://$**Your_Profile_Page**";
  if (await UrlLauncher.canLaunch(url)) {
    await UrlLauncher.launch(url,forceSafariVC: false);
  } else {
    throw 'Could not launch $url';
  }

Drandell

Read the question again. – Bailable