How can I create social sharing buttons/links on dynamic templates in Webflow using custom code and the method described by ( )?

To create social sharing buttons on dynamic template pages (like blog posts) in Webflow, you'll need to use custom embed code that dynamically pulls CMS content (like the current page URL, title, etc.). The method typically involves using Webflow’s CMS fields with custom social share URLs.

​

1. Gather Dynamic CMS Fields

​

• Go to your CMS Collection template page (e.g., Blog Post Template).
• Identify the CMS fields you want to use in your share URLs:
• Current Page URL: Use Webflow’s “Current Page URL” via a text element or CMS variable.
• Post Title or Image: Optional for enrichments like Twitter Cards or Facebook previews.

​

2. Add Social Share Links Using Custom Embed

​

• Drag an Embed element to your template page where you want the buttons.
• Create sharing URLs using standard share syntaxes, substituting dynamic values using Webflow’s CMS field bindings (accessible via the Add Field menu inside the Embed).

​

Example for Facebook:

​

<a href="https://www.facebook.com/sharer/sharer.php?u={{wf {&quot;path&quot;:&quot;slug&quot;,&quot;type&quot;:&quot;PlainText&quot;} }}" target="_blank" rel="noopener noreferrer">Share on Facebook</a>

​

• Replace the slug or relevant field with the Full URL, such as:
• If using a field made from the domain + slug, e.g., https://yourdomain.com/posts/{{slug}}.
• Or easier: Use Webflow’s “Current URL”:
  • Insert a Text Block, add Current URL, give it a unique ID like current-url, and set its display to none.
  • Then use JavaScript to dynamically get that URL in the share link (see next step).

​

3. Use JavaScript to Dynamically Assign URLs

​

• Add a <script> in the page settings or with a custom Embed under your buttons:

​

<script>
  const currentUrl = window.location.href;

  // Set share link to Facebook
  document.getElementById("fb-share").href = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(currentUrl)}`;

  // Twitter example with text
  document.getElementById("twitter-share").href = `https://twitter.com/intent/tweet?url=${encodeURIComponent(currentUrl)}&text=Check this out!`;
</script>

​

• Corresponding link embed buttons should have matching IDs:
• <a id="fb-share" target="_blank">Share on Facebook</a>
• <a id="twitter-share" target="_blank">Share on Twitter</a>

​

4. Add Button Styling and Icons

​

• Use Font Awesome, SVG icons, or upload your own image icons.
• Wrap each share link in a styled div or button block for visual consistency.
• Make sure to set links to open in new tabs using target="_blank" and rel="noopener noreferrer".

​

Summary

​

To add share buttons on dynamic pages in Webflow:

• Use CMS bindings or JavaScript to generate the dynamic share URLs.
• Embed custom share URLs for each platform (Facebook, Twitter, LinkedIn, etc.).
• Use Webflow’s Embed element and reference CMS fields or the current page URL.
• Add JavaScript when needed to correctly insert dynamic URLs into share links.