How can I embed social sharing buttons with dynamic links from Webflow CMS to ensure that only the current CMS page is shared and not the entire site?
- Place social sharing buttons on the CMS Collection Page to ensure each item has a unique URL.
- Use the "Current Page URL" dynamic field combined with the correct platform-specific share prefixes to generate proper sharing links.
To ensure your social sharing buttons in Webflow CMS share only the current CMS item/page, you need to use dynamic fields that generate unique URLs per item.
1. Use the CMS Collection Page
- Start by designing your social sharing buttons within a CMS Collection Page (e.g., blog posts, case studies).
- CMS Collection Pages automatically generate unique URLs for each item using the page slug.
2. Add Dynamic URL Field Using Current Page URL
- Drag in a link element or button for each social platform where you'd like to enable sharing (Facebook, Twitter, LinkedIn, etc.).
- With the link selected, go to the Element Settings panel.
- In the URL field, insert a dynamic link like so:
- Use "Current Page URL"; this option pulls the specific URL of the current CMS page.
3. Construct Share URLs for Social Platforms
Use the correct base URL and append the dynamic current page URL:
Facebook:
https://www.facebook.com/sharer/sharer.php?u=[Current Page URL]Twitter:
https://twitter.com/intent/tweet?url=[Current Page URL]&text=[Custom Text (optional)]LinkedIn:
https://www.linkedin.com/sharing/share-offsite/?url=[Current Page URL]
To build these in Webflow:
- Use a text link or button element, open the link settings, select "URL", and click the + Add Field button.
- Choose "Current Page URL", and manually add the share link prefix before it, like:
https://twitter.com/intent/tweet?url=then insert Current Page URL.
4. Optional: Include CMS Fields for Share Text
- Add custom share text using additional CMS fields like blog titles or excerpts.
- Append these to the URL using parameters, e.g.,
&text=[Post Title].
Make sure to properly URL-encode values if you're combining multiple fields manually in a separate embed.
Summary
To generate dynamic social share links in Webflow CMS, place buttons on the Collection Page, use "Current Page URL" for the link, and append platform-specific share prefixes. This ensures each CMS item shares its own URL, not a static homepage link.