standard icon

How to Add the Official Twitter Widget to Your Website

**Updated June 15, 2013**

This post has been updated to reflect the recent Twitter API changes that has stopped the previous code from working. The updated tutorial below will get you back on track!

twitter-widget-sm 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 love WordPress plugins, but I prefer to keep them to a minimum when simple code is available, 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 widget. The Twitter 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 official Twitter widget:

  1. Navigate to this page and click on “create new” to start building your Twitter widget
  2. Once you create the widget you can now select your options.
  3. After you choose your timeline source and options, just click the “create widget” button and Twitter will generate a preview for you and then supply the code you can use just below the preview window. Copy and paste this code into a plain text file and save it.

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 log in, 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 or if you want to change the appearance of it, you will need to dive into the Twitter developer documentation to get it just right.

Twin Design /

Subscribe To Our Blog & Never Miss A Thing

Sign up to get new our latest posts and announcements delivered straight to your inbox. Seriously, at this point, what’s one more email?

Comments & Feedback:Check out what others have to say about this post!

  1. Mike

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

  2. 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.

      • Alex

        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?

  3. Michele O'Dell

    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?

  4. 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.

  5. When I try this, I end up with a text widget with only some ugly HTML code. WP does not load the widget for some reason… What’s wrong?

  6. I seem to be experiencing many of the problems expressed here unfortunately with no improvement no matter how much refreshing of the page i do. I tried out your suggestion of using the text widget in wordpress and it just displays the html which looks ugly. I’ve tried using the new wordress ‘twitter timeline’ widget but as you will see it shows nothing. I generated the code in twitter so that shouldn’t be the issue. Any suggestions?

    • If you are trying to use this on the URL you used to comment on our site it won’t work. This is meant for self hosted WordPress sites and not sites at I am not that familiar with but I think there is an option using JetPack to add a Twitter widget.

  7. I must be using a really old version of the Twitter widget on my home page as I just noticed it stopped working. My iPhone twitter client also stopped working right around the time Twitter turned off version 1.0 of their API.

    You’d think using the official Twitter widget and an App I paid for in the iTunes store would ensure no interruptions in service, but not all software developers are created equal.

  8. We had a Twitter feed built into our site, but once the API was killed, it has done nothing. I’ve tried the steps above using my limited html skills, but it doesn’t work. We use a CMS system using Cascade Server if that helps. Any input would be appreciated.


  9. Hi

    Your post was very easy to follow and install but none of the tweets display, all I get is the hyperlink Tweets by @IBTSC which will take you to the twitter site and display the tweets when you click on it. I appreciate that our website was built using Joomla 1.5.26 so is well out of date and you may not be able to help us, but I would love to get this working before we upgrade to a wordpress site.

    Any suggestions?

Share Your Thoughts & Opinions!

Have something to say, add, or share? Speak up!