How to embed twitter timeline on webflow?

Can you add Twitter Timelines to a site?

Yes (By embed html code)

On webflow you only do copy-paste.

How to - Wizard - option 1 (The other way is by twitter api):

twitter side

1/8. Go to: https://publish.twitter.com/

2/8. Select embedded timeline

3/8. Paste a URL

4/8. Twitter will generate for you a code. Copy this code (With/without customization).

5/8. Most of the times you need to set height (click on customization). Example: data-height="300" (300px height & y-scrollbar) -
**(Do not set height and overflow: scroll; by webflow CSS - twitter already handle this).


webflow side

6/8. Add Embed block
image

7/8. Paste the code from step 4. Save

<a class="twitter-timeline" href="https://twitter.com/TwitterDev/timelines/539487832448843776?ref_src=twsrc%5Etfw">National Park Tweets - Curated tweets by TwitterDev</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

8/8. Publish the site and test your live URL.

Done :slight_smile:

More options/widgets her:

twitter developer docs

Related:

4 Likes

Love the detailed instructions

1 Like

Is there a way to style the embedded twitter css? Could it be customised to something like dark mode where all colours are somewhat inverted?

@lazer - Yes. Use data-theme="dark" param referenced here. Or by customization - Step 5 in my tuturial (Form select menu “how would you like this to look?”)

1 Like

Great. But i’m looking for a more custom solution.
I’m working on a project that requires a specific hex color styling rather than a “light” or “dark” themed version. Webflow is all about getting rid of templates, you know :wink:

Do you / can you use custom code to overwrite the Twitter embedded theme?

For tha background use data-chrome="transparent" (Than add any bg you want by webflow styles)

Also support:

All options of chrome parameter:
data-chrome="noheader nofooter noborders transparent noscrollbar"

border color:
border-color="red"
link color:
link-color="blue"

Full customize:

Only by custom code CSS (google it) + Keep in mind twitter Names of classes #id/selectors may change over time (= broken layout). I’m less fond of doing it because of this reason.

Use Twitter widget of Tagembed to embed any of twitter feeds, timeline, lists on your webflow website.
It is free to use and you don’t need any coding-skills as it is completely coding-free ways to embed twitter timeline. Just follow the simple steps:

  • Sign in at Tagembed and create your widget

  • Go to Add Feeds and select Twitter as source to fetch feeds from Twitter

  • Click on Edit button to customize the size of feeds to display on webflow

  • Now move on to Embed Widget & copy the embed code.

  • Go to editor of your website and paste the copied code.

Now you will be able to see twitter timeline on your webflow website.

2 Likes