Embed dynamic Twitter share buttons on your Webflow site

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: 

1. How to get your embed code from Twitter
2. 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: 

1. Go to the Twitter Embed Generator
2. Click Twitter Buttons
3. Choose Share Button
4. Click Set customization options
5. 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 
6. (Optional) Set other customization options (e.g., button size, etc.) 
7. Click Update 
8. 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: 

1. Create a Collection field for your tweet text
2. Create a dynamic embed 

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: 

1. Open the CMS panel
2. Hover over your Collection and click the settings “cog” icon that appears 
3. Click Add new field
4. Choose Plain text
5. Give your field a label (e.g., “Tweet text”) 
6. 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:

1. Go to Add panel > Advanced
2. Add an embed element to the canvas
3. Paste your Twitter share button embed code in the code editor 
4. Find the sample text you entered in the Twitter customization options after the “data-text=” in the code
5. Highlight the sample text between the quotation marks
6. Click Add field
7. Choose the Collection field from which you want to share content (e.g., “Tweet text”)
8. 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. 

Pro tip: You can use conditional visibility on Collection pages and in Collection lists to hide the Twitter share button for Collection items that don’t have tweet text.

‍Note: Your Twitter share button won’t render on the Designer canvas — that is, you won’t be able to preview the share button in the Designer, and a placeholder will be shown in its place. Once you publish or export your site, the Twitter share button will render (i.e., display) where you placed it. If you need to preview the share button before going live with your site on a custom domain, you can publish your site to the webflow.io staging subdomain.