Adding the share function for JavaScript web pages. navigator.share()

We are looking for a way to share a specific web page through other applications, social media, KakaoTalk, and the like. Find out how to make sharing easier.

# Sharing a website with other apps

In the past, to share the current website, you had to use the functionality of each sharing platform separately. For example, if it was Facebook, you had to create a Facebook developer account, add an SDK, and attach the desired functionality, which was a complicated process. This method was used not only for Facebook but also for Twitter, Naver, Kakao, and many other platforms, and often required applying a solution or spending a lot of time and money because each similar task had to be performed repeatedly. Of course, this method is still widely used and sometimes provides more features. However, for simple web page sharing, a simpler method can be used, and we will explore how to use the share() method of the navigator API here.


Screenshot) Share function applied to the current WebIsFree page

The Share button on the screenshot above is the feature we will explore today. If there is a page sharing feature, it can increase revisit rates and bring in more users, making it very useful.

Now, before we learn how to use this method, we must use a secure protocol with HTTPS. This means that the share function can only be used on secure websites. Additionally, depending on the situation, it may not be supported in other browsers or environments. Nevertheless, the reason why this method is preferred is that it is highly convenient in mobile environments, and adding features is easy and simple. Also, the page sharing feature can be performed on operating systems such as Windows, not just in mobile environments. So, let's see below how to do it in detail.

!! Advantages of navigator.share()

• Easy and quick application
• Can be used on mobile and various platforms and operating systems
• File sharing, such as images, is also possible.

! Using navigator.share()

The following syntax is used for the share function:

navigator.share(dataObject)

The dataObject can contain values required for sharing and returns a Promise after execution.

url // URL of the page to be shared
text // Message to be used when sharing. Can be the website name or similar.
title // Title of the web page being shared. Meta title.
files // An array containing file objects to be shared if applicable.

Let's create a simple example below.

! Examples navigator.share()

Below is an example for sharing the current page. Once a button is clicked, the current page can be shared with other apps. First, create a button.

Clicking the button will execute the following sharePage function:

Clicking the button now enables sharing of the webpage. Note that the current URL can also be passed directly to the shareObject or a shortcut like window.location.href can be used.

Below is the actual implementation of the example code.


@ Testing the Example Code
Now you can verify that it works well. Clicking the button below will execute the code above, and a similar example was used for the share button at the top of the current page.


We have briefly looked at the web page sharing methods up to this point.

! Conclusion

The navigator.share() web page sharing feature we have learned above is a very effective tool for easily sharing pages with users to increase website traffic. It is frequently used due to its ability to attract many users with relatively simple code. Especially for websites with the goal of increasing website traffic, it is essential to apply it along with SEO.