Copying Dynamic Values to Clipboard and Sharing Blog Posts

Yeah these might all be related but I think you are using this attribute, but likely shouldn't be.

They sometimes hide these little disclaimers in their docs.

You are using it in your first instance of the share buttons.

If this doesn't resolve it, can you show the UI elements and send along the published URL?

Also one idea for dynamic text would be to use an embed, type out your domain, and use the CMS variable slug.

I haven't tested this before, so am not 100% sure if it would work, but I also don't see why not.

Experiencing some strange behavior.

Images 1 and 3 show staging and published site for the Relume component. It’s rendering oddly when I add the HTML in image 2 (taken from here: https://schier.co/blog/pure-html-share-buttons via Webflow’s own blog)

Image 4 shows how the twitter share then populates without a link but with 3 separate lines.

This is all with the Finsweet attributes still included. When deleted, the HTML embed and link block don’t do anything when clicked when using the pure HTML share buttons.

I’ve now tried a few alternatives: Finsweet, Webflow’s instructions, the blog linked above, and code snippet suggestions from Perplexity and GPT-4 … surprising to me that 1) Webflow doesn’t support this?? and 2) neither Finsweet nor Relume seem to have docs on common functionality like this.

Couldn’t get Finsweet to pass on an a href=domain+slug either, always blank on the share 😞

I’ve gotten it to work with the following code, but it inexplicably changes the design…

Would be nice if Relume and or Finsweet had supporting documentation for common components when Webflow does not have functional supporting documentation.

I used this Webflow help doc, and it just straight up does not work with Relume’s img src icons, unfortunately.

Finsweet doesn’t have support or I would be contacting them, apologies. They promote a Slack group but it requires a @Finsweet email address or an invite from an administrator for paid customers I’m guessing, and I only pay for Relume.

Hey all good! I got you

Frustrating that Webflow lacks basic functionality that all other no-code web builders possess out of the box

Hey Kyle - in the first code snippet screenshot you sent, there are quite a few errors with that where I could see why it didn't work.

1. URLs are incredibly sensitive - so you have to pretty much do exactly as it says. In that article about the HTML - I would translate that to what you are doing by having it be https://twitter.com/share?url=<https://www.techexpats.com/[slug]>&text=<[title]>via=<techexpats>

1. Being that this is a hyperlink, it should be wrapped around the SVG code. so <svg></svg>

1. Its likely changing the design because you are essentially wrapping an anchor link inside an anchor link - I believe at least - so if you want to send a long a read-only link again, I can take a look.

any kind of spaces or misplaced symbols will make it fail

and you had a few of those

I see, I was at the outset just copy-pasting from the sources and then having to move things around to wrap the svg source provided by Relume

You know, it might be that that article is wrong also, because under further review, I dont think that structure makes much sense either

seriously wow, so if you look at their OWN share buttons at the bottom of their own article, you'll see the URL structure is different

wild

I need to start heading to bed, but I’ll try again tomorrow with your inputs — can only spend so many hours hitting my head against a wall.

Some of your components (like page loaders, for example) have great included documentation in the component itself.

Something basic for share links and copy to clipboard, for something as common as a blog header or article, would be very helpful.

https://twitter.com/share?url=https%3A%2F%2Fschier.co%2Fblog%2Fpure-html-share-buttons&text=Pure%20HTML%20Share%20Buttons&via=GregorySchier

Yeah I noticed that too. The closest I got was actually using inspect and copy pasting, but the formatting was still creating a space between icons so I reset the changes made.

yeah understood, I'll add it to my list - we've been working on a full resources/documentation website for the past 2 months now, looking to release it really soon. Appreciate the feedback - I'll see if I can get a working example with a loom for you by the time you wake up

That would be killer.

Seriously impressed by the product and support otherwise, gotta say. I’m new to building marketing websites, and I don’t think I’d be making half the progress without it, your components + trying to keep my client-first clean, and so on.

For now, I’ve wiped any traces of Finsweet or addl. code so as to start fresh tomorrow.

Thank you and goodnight ⭐

as promised, here is that video on how to hook up social shares.

Read-only
https://preview.webflow.com/preview/share-buttons-dad43d?utm_medium=preview_link&utm_s[…]&itemId=66316e00b8c5e9c98d4354eb&locale=en&workflow=preview

Loom
https://www.loom.com/share/bb6bf13fa1fa4b1eb9ee27169fd80882?sid=c57b7378-7a03-4ffa-9d11-298dedb70264

Let me know if you run into any snags along the way!

So I couldn’t find out why it wasn’t working at first, but it was because I had a second hidden copy of the share row where a =“url” was present — any instance of fs-share-element=“url” breaks the solution.

Happy to share that it’s working!

Easy win to improve upon Finsweet’s documentation here — it’s not rocket science, but it is incredibly sensitive to any deviation from what’s required, and they don’t make mention of the technique of hiding the different elements in div … stoked for your upcoming resource library:)

I noticed Finsweet doesn’t have support for Instagram, and Relume doesn’t have a social share icon for Reddit (at least via HTML block) … neither support TikTok. Just fyi! 😄

yeah fair enough - here are some reddit icons ready to paste into a project from our icon library. https://icons.relume.io/collection/all?s=reddit

Ah apologies, I searched the component library and not the separate icon library

YTMND!