When building custom WordPress websites and custom WordPress themes for our clients, we are often asked to integrate their Twitter feed into the website sidebar.
Many personal brands like to display their Twitter feed in the sidebar to bring more dynamic content into their site, promote their Twitter feed and get new followers, and show the value they provide with their tweets.
We believe in keeping website plugins to a minimum, so I’m happy to report that adding Twitter to your website can be accomplished quickly without using a WordPress plugin by instead using the official Twitter profile widget.
While there aren’t a ton of customization options, you match the widget to your brand color palette.
Here’s a sample of the Official Twitter widget (left) customized with a grey and orange color scheme.
The Twitter Profile Widget can also be used non-WordPress sites. Only the final implementation on your website will be different.
Here are instructions on how to create your customized Official Twitter Widget:
- Navigate to this page and put in your Twitter username.
- Click on "Preferences" and select your options.
- Click on "Appearance". This is where you can customize the widget to match the colors on your website. As you make selections, the preview of your Twitter widget will change color. We pull our color codes straight from the style.css file of the website so everything is an exact match.
- Click on "Dimensions" and select the width and height you want your new Twitter widget to be.
- Click on the button "Finish & Grab Code”, which will generate a box of code to copy and paste with all of your specs you entered in the previous steps. Copy and paste this code into a plain text file and save it.
Don’t worry if you don’t get the dimensions or colors exactly right on steps 4 and 5. You can always edit the final code that is output later on without going through all these steps again.
Now that you have generated the official Twitter Widget code, the next step is to add it to your website. In a WordPress site, simply login, go to the widgets screen and either add a new text widget to your sidebar and paste in the Twitter code, or add the Twitter code to an existing text widget and click save.
Once you save the changes to your text widget, take a look at your site to see how it looks. If your new Twitter Widget is a little off, you can adjust all of the properties without going back the Twitter Profile Widget page.
About Brian Bourn
How to Get Website Traffic With Ceasar Salad
If Your Website Had to go to a Job Interview…
Ali Brown Shine Event: Billionaire Entrepreneur Coach Makes Social Media Blunder
Web Design Tips: Nickelodeon’s iCarly Says .net Domains Are For Losers
Lead Generating Websites: 20 Tips To Improve Your Business Website
There are designers that can make it pretty, coders that can make it work, and marketers that can make it sell — at 
Bourn Creative is a 
Very cool! thanks for the great explanation!
Trudy
Exact details! Excellent. Now, what is twitter?
Just kidding!
Thanks,
Mitch
Have you actually done this? Because I don’t believe this will work the way you’ve outlined here for self-hosted sites, and I know it won’t work on WordPress.com hosted sites, since JavaScript posted in text widgets isn’t executed for security reasons. I tried this just now on a self-hosted site as a test and it didn’t work at all.
Hi Mike, Yes you are right that this will not work on a WordPress.com site, but I believe they have a service similar to JetPack that will allow you to show latest Tweets.
We add the official Twitter widget to client sites on a regular basis and haven’t had any problems. We have also added the official Tweet and Twitter Follow buttons on client sites without any issues. The only time I have experienced any issues with widgets or plugins is when the permissions level on the wp-content folder or the permissions on the database aren’t quite set right to allow this. You may need to contact your hosting company to find out if this is the case.
Hi there!
Great post! For some reason though, the text in my header and footer (for my twitter name & ‘join the conversation’) has doubled up on itself and looks like an ugly shadow. Is this a problem with the code I copied from Twitter? I’ve tried adding the code to the sidebar code as well but get the same problem.
Also, within the text widget, the twitter feed automatically appears with different margins on the left as to the right (the left of the twitter widget appears in line with the left of the widget title, but the right appears almost flush to the right of the widget border. Do you happen to know how I resolve this issue so that the margins are equal. FYI, I set the widget dimensions to auto. I’d really appreciate any help!
Many thanks
I would start by grabbing some fresh code from Twitter and set the width to a specific number. Any formatting issues after that may require some changes to your stylesheet.
Thank you! I did end up having to go into the style sheet and making a change. Still can’t figure out how to take out the duplicate text behind the text in the header and footer of the widget. Any thoughts?
Not finding this page anymore. It doesn’t give you a “profile” widget.
With Twitter’s recent changes, they moved to “user widgets” which allow for more than just a timeline of your Tweets. Look for an update to the post soon.
I want to use this on our corporate intranet which has SSL turned on. When our intranet page hits the widget in the twitter window code, we get a security prompt. Is there a way to move all of the code internally?
Not that I am aware of, but I do know that Twitter recently changed it’s widgets (post update coming soon). Did you make sure that the code generated by Twitter is using https instead of http?
Thanks Brian, I needed this :)
Hi Brian,
today I tried to integrate the twitter widet via text widet to my blog but all it show is the link “New tweets from Tobias”. Thats all. What might have gone wrong?
Maybe you can help me.
Thanks a lot in advance.
UPDATE: It works now!
Thanks works fine ^_^