How to embed a Twitter Feed on your website
24th October 2014
23rd August 2015
Today we're going to look at getting a Twitter feed onto your website. It's super easy. Today's blog was requested by Melanie of Stomp.ie, so we're going to use her site as an example.
This whole process will take you less than five minutes to sort out, and it's super-easy.
Step 1: Go Twitter.com, then go to Settings.
Step 2: Click on Widgets
Step 3: Click 'Create a Widget'
Step 4: Put in your username . . . .
Don't type the '@' symbol. Here are the settings I've done:
I've checked the box 'Exclude Replies' because I don't want irrelevant replies to appear on the website.
I've clicked 'Auto-Expand Photos' - otherwise they will just appear as a link
I've changed the theme to 'Dark' - the only two options are Dark and Light. This is because the background on the website is dark. If the background was white, I would've chosen 'Light'.
You'll see the changes appear on the right hand side of your screen, like this:
Step 5: hex colours
This is the only slightly 'advanced' part. You can select the link colour. The default is the Twitter blue colour. However if you're serious about branding, (and you should be), then you should put in the exact colour from your logo/branding.
Note: If you don't know how to figure out what your hex colours (also referred to sometimes as HTML colour codes), then this tutorial will show you how to get them.
Step 6: Generate the Code
Click the big blue 'Create Widget' button, and you'll see the code appear underneath the preview, like this:
Copy this code, go to your website - paste it in.
If you have a WordPress website, keep reading for this example.
Of course, all WordPress websites are different, but you probably want to get this feed appear in the Widget section. In this example, on Stomp.ie, I'm logging onto the WordPress control panel, then going to Appearance, and then Widgets.
Go to the Widget area where you want (in this case, we want the Twitter feed on the bottom of each page), and drag a 'Text' Widget over.
I'm going to leave the 'Title' field blank, as the header comes with the feed anyway. Then, paste the code in to the main area of that widget as below:
Hit 'Save' and hey presto! It's done! Go look at your site and be proud of yourself. :)
Here's a screen-capture of the finished job on Stomp.ie:comments powered by Disqus