A recent push to the project added a share button displayed on users LittleLink profiles. I’ve been working on such a system for quite a while now, but the pieces just wouldn’t click. Some part would always not work as intended, feel and or look clunky. I think this new system works exceptionally well for what it’s supposed to do.
This all began with this small share icon displayed on Linktree profiles. I really liked the idea of being able to share a profile link more easily, especially on mobile devices.
If the button is clicked on, the Linktree profile a share dialog window is opened that seems to be baked into the operating system.
Now, I was using a Windows device at the time and didn’t know this even existed.
This dialog window really piqued my interest, so I did some research on the topic.
The Web Share API is one that has seemingly gone under the radar since it was first introduced in Chrome 61 for Android. In essence, it provides a way to trigger the native share dialog of a device (or desktop, if using Safari) when sharing content directly from a website or web application.
The feature is not supported on all devices and browsers natively, meaning I would need some sort of fallback solution to support all devices.
In the end, I’ve implemented a fairly ghetto solution. I added two versions of the button, one for devices with Web Share API and one without. The corresponding button is loaded with a PHP if-else statement that relies on a two separate PHP functions.
The first function checks what browser a user is using, the function does no account for browser or OS versions.
The second function gets the OS type and groups it into either mobile or not mobile.
And lastly the previously mentioned if-else statement checks using the previous functions if the user is either using: Chrome, Safari, Edge, Opera or is on a mobile device. If any of these conditions are met, the share dialog is opened using the Web Share API.
Otherwise, the fallback option is used. This fallback option consists of a JavaScript query copying the profile URL to the user’s clipboard, displaying a ‘success’ message.
This seemingly simple and small addition took me (counting research and testing) quite a few hours to put together. These little things are why I love working on this project. I always learn about new things I otherwise wouldn’t. I can always find new exiting challenges to problem-solve, even if it’s just for a simple share button…
