Styling your Website's Twitter Feed

Twitter has become a standard social media channel for most online brands and Twitter feeds have become increasingly popular on websites. This tutorial aims to teach you how to add some styles to your website's Twitter feed.

In order to use this tutorial you will need to navigate to your Twitter account and pull the code for your embeddable widget. Once you have done that we will use HTML and CSS to style the widget to match our own branding. We will explain every change along the way, beginning with Twitter's original embed widget code.

Below is the HTML, CSS, and JavaScript required.

Step 1 - Sign in to your Twitter account at Twitter.com

Step 2 - Go to publish.twitter.com. Type in your Twitter Account URL. 

Step 3 - Select Embedded Timeline

Step 4 - Click Copy Code

Note: The code below is what we copied in the previous step without any alteration. We will use this basic HTML markup to style our embedded timeline in the next section.

Styling your New Twitter Timeline Embed

Now that we have the code from Twitter to embed our timeline on our website it is time to customize and style the widget to fit our branding. This will involve some HTML and CSS edits as shown below.

Step 1 - twitter-feed.html

Copy and paste the HTML below into your web page

Step 2 - twitter-feed.css

Download the CSS below and include it in your web page

Step 3 - Add the includes below to your page

In this article, Solodev showed how to create an embeddable Twitter Timeline Widget and style it. Now that you know how to customize the styles of your Twitter Timeline embed, you can add your own styles to match your Twitter Embed to your brand!