Note: This tutorial uses Webflow’s embed element to add custom code. The embed element is available on any paid Site plan and on Core, Growth, Agency, and Freelancer Workspace plans.
With dynamic embeds, you can create custom Twitter share buttons for content on your site — such as content from a Collection of blog posts, song reviews, events, etc.
In this lesson, you’ll learn:
- How to get your embed code from Twitter
- How to embed a dynamic Twitter share button on your Webflow site
How to get your embed code from Twitter
To get your embed code from Twitter:
- Go to the Twitter Embed Generator
- Click Twitter Buttons
- Choose Share Button
- Click Set customization options
- Enter any sample text (e.g., “Test text”) in the Do you want to prefill the Tweet text? field — you’ll replace this with dynamic text later
- (Optional) Set other customization options (e.g., button size, etc.)
- Click Update
- Click Copy code to copy your embed code
How to embed a dynamic Twitter share button on your Webflow site
Note: Make sure you’ve created a CMS Collection (e.g., “Blog posts,” “Song reviews,” etc.) and created at least 1 event Collection item. The CMS includes helpful templates to help you set up your Collection.
Here, we’ll cover embedding a dynamic Twitter share button on your site to share content from any CMS Collection.
We’ll do this in 2 steps:
Create a Collection field for your tweet text
You can either create a new plain text field for your tweet text (i.e., the text you’d like to include in tweets when site visitors click your embedded Twitter share button), or use an existing Collection field.
To create a new Collection field for your tweet text:
- Open the CMS panel
- Hover over your Collection and click the settings “cog” icon that appears
- Click Add new field
- Choose Plain text
- Give your field a label (e.g., “Tweet text”)
- Click Save field
Create a dynamic embed
Dynamic embeds only work with dynamic content, which means you can only add them on Collection pages or in a Collection list on a static page. You’ll need to add your Twitter share button embed to the Collection page associated with the content you want to share (e.g., “Blog posts,” “Song reviews,” “Recipes,” etc.), or connect a Collection list to the Collection from which you want to share content on Twitter.
To add your dynamic embed:
- Go to Add panel > Advanced
- Add an embed element to the canvas
- Paste your Twitter share button embed code in the code editor
- Find the sample text you entered in the Twitter customization options after the “data-text=” in the code
- Highlight the sample text between the quotation marks
- Click Add field
- Choose the Collection field from which you want to share content (e.g., “Tweet text”)
- Click Save & close
When you’re ready, publish your site to make your new Twitter share button public. Now, when site visitors click your Twitter share button, their tweet will automatically populate with the value of that Collection field for each item in your Collection.