How to dynamically embed Twitter share buttons with Webflow CMS

Updated 
May 5, 2017
 

With dynamic embeds, you can create custom Twitter share links for your content. 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

You can either create a new plain text field for your tweet text or use an existing text field in your Collection. You might want to set a character count limit, given Twitter's 140-character restriction.

2. Get the Tweet button embed from Twitter

Next, you’ll need to create the Twitter embed text using Twitter’s Share Button generator. Make sure that you add something (anything) to the prefill text field before you copy the code. You'll replace this text with a dynamic field in the last step.

3. Paste the Twitter code in the Embed and add your dynamic tweet text

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 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. Then find your temporary text in the code and replace it with the dynamic field you want as your real tweet text.

4. 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