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?

Embedding social sharing buttons in Webflow for dynamic CMS page sharing involves ensuring that links are generated dynamically for each specific page. Here’s how you can do it:

​

1. Access Your CMS Collection Page

• Go to the Webflow Designer and open the specific CMS Collection Page where you want the sharing buttons to appear.
• Ensure you have already set up your CMS structure properly with dynamic fields.

​

2. Create or Use Embed Element

• Drag an Embed element onto the page where you want the buttons to be displayed.
• This feature allows you to insert custom HTML for social sharing buttons.

​

3. Set Up Dynamic Embed Code

• Within the Embed element, input the following code format considering social platforms:

​

<a href="https://twitter.com/share?url=[[Page-URL]]&text=[[Page-Title]]" target="_blank">Share on Twitter</a>
<a href="https://www.facebook.com/sharer/sharer.php?u=[[Page-URL]]" target="_blank">Share on Facebook</a>

​

4. Utilize Webflow CMS Fields

• Replace [[Page-URL]] and [[Page-Title]] with proper dynamic fields:
• Use current host dynamic field for [[Page-URL]] in combination with the page's Slug.
• Use name or title dynamic field for [[Page-Title]].

​

5. Publish and Test

• Publish your site to apply your changes and test the social sharing buttons.
• Visit a published CMS Collection page, click a sharing button, and verify if it shares the correct page URL and title.

​

Summary

To dynamically embed social sharing buttons, integrate them using an Embed element in Webflow, populate them with the CMS fields like page URL and title, and ensure they link to the correct social media platform for effective sharing. This setup ensures each CMS page shares its unique content when the button is clicked.