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
      
    twitter-widget1
  2. Once you create the widget you can now select your options.
      
    twitter-widget2
  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.
      
    twitter-widget3

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.

About Brian Bourn

At the helm of Bourn Creative, is Brian, who manages the day-to-day business operations and all company projects. While he spends most days entrenched in code, Star Wars, WordPress, and the Genesis Framework building client websites and custom themes, Brian is also a brilliant business strategist and can often be found consulting with clients on how to best achieve their online goals.

Able to break down complicated topics into easy to understand, simple steps, Brian regularly attends and speaks at meetup groups, WordCamps (his favorite), networking events, and conferences on the topics of design, website strategy, and tech-nerd stuff.

Bourn Creative Recommends WP Engine

WP Engine WordPress Hosting Gain peace of mind knowing your website (the main source of your online income) is safe, secure, and protected with WP Engine - an insanely fast, infinitely scalable, backed up, secure, expert WordPress hosting company that’s got your back!

Comments & Feedback:

  1. Very cool! thanks for the great explanation!
    Trudy

  2. Exact details! Excellent. Now, what is twitter?

    Just kidding!

    Thanks,

    Mitch

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

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

  5. Enduring Epilepsy says:

    Not finding this page anymore. It doesn’t give you a “profile” widget.

  6. Michele O'Dell says:

    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?

  7. Thanks Brian, I needed this :)

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

  9. Thanks works fine ^_^

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

  11. 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 WordPress.com. I am not that familiar with WordPress.com but I think there is an option using JetPack to add a Twitter widget.

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

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

    Thanks!

  14. That’s the most helpful thing I’ve read in ages. I can’t believe it was so easy – thanks!

  15. Thank you so much… I have tried and tried to do this… thanks for your help!!!!!!!!!!!!!! :-D

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

  17. Thank you so much… I have tried and tried to do this… thanks for your help

Share Your Comments & Feedback:

*