Streaming live at 10am (PST)

How to embed twitter timeline on webflow?


#1

Can you add Twitter Timelines to a site?


#2

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:


How to add Twitter feed
#3

Love the detailed instructions


#4

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?


#5

@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?”)


#6

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?


#7

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.