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.
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.
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 pagetwitter-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!