How to dynamically embed Twitter share buttons with Webflow CMS

With Dynamic Embeds, you can create custom Twitter share links using an embedded Eventbrite component. In this example we will create a Twitter link that will pull information from fields that we’ve created in a Blog collection.

1. Create a Text Field for the Tweet Text

One of the fields we want to add to our Blog collection is the Tweet Text, which will be the text that is defaulted into the tweet when a visitor shares it.

2. Get the Tweet button embed from Twitter

Next, you’ll need to create the Twitter embed text using Twitter’s Tweet Button Generator.

Here you can choose the button type, as well as default specific details like the Twitter handle, hashtags and text.

For this example, we are going to select the Share a link option. We want to add some of our own content here, and leave others blank.

For the Share URL, we will select to use the page URL, which will default the page in which the button is located (which in our case is the blog post).

We will add some Tweet text, however, we will end up changing this later on so add any text you like.

The Via field is the Twitter Handle in which the tweet is coming from. Generally this would be your own Twitter Handle, so for this example we are using @Webflowapp.

Now it’s time to copy the code from the Twitter Button generator:

3. Paste the Twitter code in the Embed

Dynamic embeds only work with dynamic content, so you need a Collection Template page or a Dynamic List.

In this example, we’ll use an Embed Component placed on the Collection Template page for our Blog Post collection.

Just drag the Embed component from the Add Panel onto your site, and paste the full code from the Twitter Button generator into the Embed.

4. Replace the defaulted tweet text with the Tweet Text field content.

The final step is to find the defaulted tweet text we got from the Twitter Button generator, and replace it with our Tweet Text Collection Field.

5. Done!

Now when we go to our published Blog Post page, and navigate to where we added our Twitter Button, we can initiate a tweet that is pulling information from both our page (URL) and Twitter Text Collection Field