sharing via facebook messenger doesn't work on mobile devices

[achraf-boussaada]

I implemented the facebook messenger share button as follows :

<FacebookMessengerShareButton
            url={"https://www.google.com"}
            title={"please click me"}
            appId="521270401588372"
          >
            <FacebookMessengerIcon size={64} round />
          </FacebookMessengerShareButton>

and tried it with different mobile devices. It always gives the following error :

This dialog is not available on this device

Also i think it's safe to say to assume that since the component's name is FacebookMessengerShareButton the messenger app will open on your mobile device and if you're on browser then the normal facebook site will open. Instead when clicking on the button with a mobile device a new page will open with the facebook mobile version. I couldn't find any open issue about this, so is this a bug or the expected behavior ?

[achraf-boussaada]

with the following i was able to reach my goal :

        <button
          onClick={messengerOnClick}
          style={{
            backgroundColor: "transparent",
            border: "none",
            font: "inherit",
            color: "inherit",
            cursor: "pointer"
          }}
        >
          <FacebookMessengerIcon size={64} round />
        </button>

  const messengerOnClick = (
    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
  ) => {
    window.open(
      "fb-messenger://share?link=" +
        encodeURIComponent("https://www.google.com") +
        "&app_id=" +
        encodeURIComponent("521270401588372")
    );
  };

source : https://developers.facebook.com/docs/sharing/messenger/web/ Maybe this is a feature to add, to allow sharind directly to facebook messenger on mobile

[stiwwelll]

But like this it will only work on mobile and throw an error on desktop, no?

[bfintal]

I can confirm that the solution of @achraf-boussaada works in mobile (in my case I needed to change window.location.href and not open a new window), but doesn't work in desktops.

[stiwwelll]

@bfintal Did it work on Chrome for iOS for you? Somehow I can't get it to work there. It works great with all other mobile browsers (Safari, FF). Also on Android (Chrome and FF).

[bfintal]

@stiwwelll Yes it works in Chrome iOS in mine. Here's what I have which is only shown in mobile:

<button className="react-share__ShareButton" style={ { background: '#3885f7' } }
    onClick={ () => {
        window.location.href =
            'fb-messenger://share?link=' +
            encodeURIComponent( `https://myurl` ) +
            '&app_id=' +
            encodeURIComponent( 123123123 )
    } }
>
    <FacebookMessengerIcon size={ 24 } bgStyle={{ fill: 'none' }} />
</button>

[achraf-boussaada]

It would be great if they can integrate some sort of device detection, to check if the user is using the mobile or the web version and accordingly display the right component.

[Ghaleb-alnakhlani]

This is a good solution and i would recommend to integrate this feature what about facebook app can I do the same thing? what should i use instead of this URL fb-messenger://share?link=

[Werthis]

Thanks @achraf-boussaada for the solution, it works great when user has messenger app, but I have an issue when user doesn't have it. It opens new browser tab with url: "fb-messenger://share..." with nothing there. I guess it should offer app installation or open fb website