Styling your Website's Twitter Feed

  Social,


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

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

Twitter Account


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

Twitter Account


Step 3 - Select Embedded Timeline

Twitter Account


Step 4 - Click Copy Code

Twitter Account

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

 twitter-feed.css

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!

Author

Elena Roig
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

We use cookies to provide and improve our services. By using our site, you consent to cookies.

Close Button

Try Solodev for Free!

By clicking "Submit" you agree to Solodev’s Terms of Service.