To create social sharing buttons/links on dynamic templates in Webflow using custom code, you can follow the method described below.
Step 1: Choose social sharing icons
Firstly, decide which social media platforms you want to include for sharing. Common options are Facebook, Twitter, LinkedIn, Pinterest, and Instagram. Look for official branding assets like icons or logos for these platforms.
Step 2: Prepare custom code
You'll need to add custom code to your dynamic template to generate the sharing links. Create a plain text field in your CMS collection for each social media platform you want to support (e.g., Facebook Share Link, Twitter Share Link, etc.).
Step 3: Retrieve sharing URLs
Each social media platform has specific parameters in the sharing URL that need to be modified dynamically. Here's an example of how you can retrieve and format sharing URLs for Facebook and Twitter:
For Facebook:
```html
Share on Facebook
```
Replace `{{currentItem.shareLink}}` with the field in your CMS collection that contains the link you want to share.
For Twitter:
```html
Share on Twitter
```
Replace `{{currentItem.shareLink}}` with your link field, and `{{currentItem.shareText}}` with the field that contains the text you want to tweet.
Step 4: Repeat for other platforms
Follow similar steps to create sharing links for other social media platforms, making sure to modify the URL parameters accordingly.
Step 5: Customize and style
To match the social buttons with your website's design and branding, you can add classes to the anchor tags and style them using Webflow's built-in design options or additional custom code.
Step 6: Apply on dynamic templates
Once you've prepared the custom code with the sharing links, apply it to your dynamic template by adding an embed component (or using Webflow's Code Editor) wherever you want the social sharing buttons to appear. Make sure to use binding to access the proper CMS fields.
Remember to publish your site to see the social sharing buttons in action.
By following these steps and utilizing the custom code provided, you can create social sharing buttons/links on dynamic templates in Webflow.