Create a Share Button

Hello Webflow Community,

I am trying to create a FeverUp clone with the Webflow Designer. I would like to create a Share Button inside of it (maybe with custom code), something that will allow users to send a message with the URL of a event. The button could maybe open the iOS Share Sheet or just an option to share on Twitter, Facebook and What’sApp for example :


In my site, the share button would be the orange one over the card event :

Thank your for your help, I appreciate !


Here is my site Read-Only: LINK

1 Like

Hey Irvan!

You can use the Web Share API!

This guide is quite nice:

1 Like

Hello @RDaneelOliwav,

I think that it can be the solution to my problem. However, I don’t fully understand how to implement it in Webflow. Should I copy some code inside of the custom code of the page in Webflow ?

Which code exactly ?

Thank you very much for your help !

1 Like

I tinkered around a bit and got it working with some custom code :partying_face:

Designer preview (read-only)

https://preview.webflow.com/preview/cms-web-share-example?utm_medium=preview_link&utm_source=designer&utm_content=cms-web-share-example&preview=fe479a710a3893fcf0b044b6a3133570&workflow=preview

Published site

Explanation

The Web Share API can take data like a title, a description and a URL and even files (I did not add support for files) and show the user a prompt to forward the data to other apps, the clipboard etc…

You can choose to share the title, a description and a URL, you do not have to use all of them, but you should use at least one, otherwise there’s no point is there ? :slight_smile:

1 - Prerequisites

1.0 - You need to enable SSL in the hosting options in your project settings, without SSL the Web Share API will not work. SSL is enabled by default (I think).

1.1 - Add my code snipped to your site. Regardless of the method, always add it to the very bottom of your page. If you have share buttons on every page, I suggest you paste the code in the “before body tag” section in the project settings under the custom code tab. If you have share buttons on select pages or only one, add the code to the “before body tag” on those specifically in the page settings. You can also add it to custom code block elements inside the designer, but make sure its at the bottom of the page, after any share buttons - otherwise they will not be picked up by the script!

Expand to see custom code snippet
<script>
	const shareButtons = document.querySelectorAll('.share-button')
	if(shareButtons.length) {
		shareButtons.forEach((shareButton) => {
			if(navigator.share) {
				shareButton.addEventListener('click', async (event) => {
					const itemContainer = event.target.closest('.item-container')
					const shareData = {}

					const itemTitle = findFirstChildByClass(itemContainer, 'item-title')
					if(itemTitle) {
						shareData.title = itemTitle.textContent
					}

					const itemText = findFirstChildByClass(itemContainer, 'item-text')
					if(itemText) {
						shareData.text = itemText.textContent
					}

					const itemUrl = findFirstChildByClass(itemContainer, 'item-url')
					if(itemUrl) {
						shareData.url = itemUrl.href
					} else {
						shareData.url = window.location.href
					}

					try {
						await navigator.share(shareData)
					} catch(err) {
						console.log(err)
					}
				})
			} else {
				// true fallback needed!
				console.log('navigator.share is undefined')
				shareButton.style.display = 'none'
			}
		})
	} else {
		console.log("No elements with '.share-button' class found!");
	}

	// source: https://stackoverflow.com/questions/12166753/how-to-get-child-element-by-class-name/25414784#25414784
	function findFirstChildByClass(element, className) {
		let foundElement = null, found;
		function recurse(element, className, found) {
			for(let i = 0; i < element.childNodes.length && !found; i++) {
				let el = element.childNodes[i];
				let classes = el.className != undefined ? el.className.split(" ") : [];
				for(let j = 0, jl = classes.length; j < jl; j++) {
					if(classes[j] == className) {
						found = true;
						foundElement = element.childNodes[i];
						break;
					}
				}
				if(found)
					break;
				recurse(element.childNodes[i], className, found);
			}
		}
		recurse(element, className, false);
		return foundElement;
	}
</script>

1.2 - In order to let my code snipped know what the title, description or URL of the thing you want to share is, you have to give those a special class I have set up. You can simply add these classes, the elements can have other classes too, I suggest you add them after you finished styling your amazing layout!

These are the reserved classes:

item-container

[mandatory] Use it on the element that surrounds your item. The custom code will only search for the title, description or URL inside of this element! It can be of any type, like a div or section, container etc…

item-title

[optional] This class identifies the title for the item you want to share. It can be any text element.

item-text

[optional] This class identifies the description for the item you want to share. It can be any text element.

item-url

[optional] This class identifies the URL for the item you want to share. It can be any link element you can assign a URL to. IMPORTANT: if you don’t set this class, the script will use the current URL.

share-button

[mandatory] This class identifies the element that triggers the share dialog for the item. It can be of any type, does not have to be a button at all!

Here’s how the structure of your item should look like:

image

Inside a collection list or on a template page, you simply design your component, add the item-container class to the parent element. Inside it you need an element that triggers the dialog with the share-button class. Then you simply add one or all of the title, text and url classes to the connected elements from the collection. You can nest those however you want, they dont have to be direct children of the item-container!

You should be done! :partying_face:

NOTE: Not all browser or devices support this relatively new API, currently if its not supported, it simply hides the share button element, because it won’t do anything. You may want to consider to provide some fallback option in this case!

Let me know if you have any troubled!

Cheers!

1 Like

Hey @RDaneelOliwav,

First of all, thank you very much for your help. It must have take you a lot of time and work to find this trick and write a full tutorial for me.

I will try to test it on my own site and tell you if it works. It could be cool that it works on the evnt page but don’t worry, it is not a mandatory functionnality. Although, if you have the time it we’ll be really awesome.

Thank you again ! :grinning_face_with_smiling_eyes:

2 Likes

I will try to add that later tonight:)

I reworked my post, it works now on any page, even with non collection elements, if needed!

Awesome ! You’re really a huge help for me. Appreciate !
Do you still have a little bit a time to help me for this post : Responsiveness issues with my slider.

Thank you very much !

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.