Update October 2021:
To create a feed of tweets on your Webflow site, the simplest process is this:
Ben Tossell of Makerpad tweeted that he was looking for a way to create a feed of Tweets that all use a certain hashtag, for the sake of embedding it on a website. In the responses to his Tweet, it became clear that there isn’t an out of the box solution.
Turns out, you can build an embedded feed for yourself, with absolutely no code. Here's how.
The goal: We want a feed of Tweets that updates whenever someone uses a specific hashtag, like this.
Tools needed:
Build Process:
First, we need to create a new CMS collection in Webflow. The collection will need the fields shown below:
In a bit, we’ll use Zapier to pipe Tweets into our CMS collection, so that our site updates automagically when new Tweets include the hashtag we’d like to track.
But before that, we’ll create an instance of an item in our collection (aka one tweet) so that we can make sure everything will look just how we want it. This is how embedded tweets normally look and is what we want to imitate:
If you don’t need a how-to of styling the particular elements to make it look like an embedded tweet, skip the next section. Otherwise, below is the step by step process.
Create a new page on your site (unless you’re embedding on an existing page). Then, add a Section element to the page. Next, drag a Div Block element into that section. Give that Div a class name. Because it will hold our Tweet, let’s call it something like “Tweet Div”.
Style the Tweet Div with these properties:
Then, center the Tweet Div by clicking the square icon next to the “Spacing” label on the right side of the screen.
Now, drag another Div Block into the Tweet Div, and give it its own class name, like “Top of Tweet”. Top of Tweet will hold our profile picture, name, and the Twitter icon.
We'll want it to look like this:
Give Top of Tweet these properties:
Inside Top of Tweet, drag in an Image, a Heading, and another Image. These should be lined up horizontally.
Input a sample profile picture image and give it these properties:
Style the heading to get it to look how you’d like. On my site, it’s an H6 heading called “Author”, with the following properties:
And
You can download the Twitter icon here.
Upload the Twitter bird with these properties:
At this point, here how’s our Navigator should look:
Directly under the Top of Tweet Div Block, we’ll drag a Text block that we’ll fill with the Tweeter’s username (@handle). Give this a class like “Tweeter Handle”.
We want this to be a bit smaller than the Tweeter’s name, so decrease the font size and weight. Then, give it this spacing:
Under that, drag another Text block in for the Tweet’s actual content. Give this a class “Tweet Content”.
Make the text of Tweet Content slightly bigger and weightier. Otherwise, here is how the spacing should look:
Next, drag in another Text block, this time to hold the timestamp. As a reminder, this is the look we’re going for:
Give this a class called “Timestamp”. Make the weight of the font slightly less than the tweet itself, and change the color of the font to gray. Otherwise, give it these properties:
Next, drag in a Div Block below the Timestamp, and give it the class “Bottom of Tweet”. Set its properties like this:
Inside the Bottom of Tweet Div block, we’ll add an image. Upload a speech bubble or other icon that corresponds with a Twitter CTA. Next to the image, drag in a text block, and write a CTA like “Join the conversation”. Style the CTA so that it is blue and slightly bold.
If you’d like, you can add another text block with a "<" as a little CTA icon. You can space this out the right the same way we did with the Twitter icon.
That’s it for designing the way the Tweet itself should look. Here’s our navigator, with all our elements, at this point:
Next, we’ll set up our CMS Collection to utilize all the elements we just made. It may be useful to add some dummy tweets to your CMS collection of Tweets. Webflow can add sample text for you, or you can just make up some fake tweets and add them to your collection. To add to your collection, click the CMS icon on the left side of the screen, click into your collection and click “Add X Dummy Items” (only if you have zero items in the collection) or click the blue button in the top right.
Add a Collection List to your page.
Connect your Collection List to a source by clicking on the Collection’s settings:
This will allow you to pull fields from particular CMS items into your page. Anytime a new item is added to your collection list, it will be dynamically added to the page. This allows you to update your site dynamically and without any manual effort!
Next, drag your Tweet Div into a collection item.
Then, right click on the Tweet Div and turn it into a link block. We want the whole Tweet Div to link to the URL of the Tweet. We also want it to to open in a new tab.
Now, we can connect each of our elements (shown in the Navigator screenshot above) to fields in our collection. Here’s how:
Go through each element in the Tweet Div, and map them to their corresponding field.
If you added some Tweets to your collection, you should now see a Tweet Div for each of those tweet items in your collection, showing what looks like a feed of Tweets. Like this:
The last step in creating a live feed of tweets is to set up a way for new Tweets to be added to our CMS Collection. That way, when a new Tweet is added, it’ll show up on our page, styled the way we’ve styled all of these elements.
To do so, we’ll use Zapier.
Log into Zapier or create an account. Then click “Make a Zap”.
The basics of this Zap are shown here:
For step by step instructions, follow along with this video:
Essentially, we’re again mapping the fields from a sample Tweet to the fields of our CMS collection items. We don't want the item to be archived.
If you'd like to review Tweets before they're pushed live to your site, choose "Yes" for the Draft field. If you choose no, you'll have a truly live feed. If we set it up correctly, we’ll see a new CMS item back in Webflow (it may take a minute and you may need to refresh it).
And that's it. Next time you need a feed of Tweets on your site, use the process above to get something like this: