Twitter LogoI switched to the Jetpack Twitter Widget a year or so ago. Since Twitter fully switched to API version 1.1, as many developers know they now require OAuth for integration. This means that the Jetpack Twitter Widget is no longer supported. I’m not a fan of the “official” JavaScript  Twitter widget, for a few reasons;

  • It requires JavaScript
  • It’s ugly as hell
  • It’s everywhere

There is also the timeline widget, which is also implemented as the successor to the original in Jetpack, but this isn’t a 1:1 replacement either. So I wondered how easily an OAuth-enabled version would be to both manage and implement.

Integrating OAuth

It turned out to be a reasonably simple task. I based it off the Wickett Twitter Widget, which I had available from before switching to the Jetpack version.

The OAuth integration requires you create a Twitter Application; You can do that here. Twitter have been kind enough to provide all the necessary public and private keys, without implementing a full OAuth handshake with the service. The widget implements the simple to use twitteroauth library for PHP; This facilitates the OAuth calls, and is available on GitHub.

Authorising against your account

This initial version simply covers adding the 4 different OAuth keys from your developer application directly into the widget. I’m considering other options, such as a standalone options page, attaching data to authors—including a full OAuth handshake—, or application only authentication, but it’s working as it stands.

A Word of Caution

The API keys you generate should be kept secret. If others have access to your installation and can manage widgets, they will be able to access these keys. As this is a personal blog this isn’t an issue, but it is something that you may need to consider. The keys can be regenerated at any time, but of course you will need to update the new keys into the widget settings otherwise it will stop working. The application you create only requires read permissions to operate, so there’s no need to allow write access.

UI Considerations

twitter-widget-scAnother caveat Twitter have thrown in; they insist that any integration must adhere to their developer display requirements when integrating the API. I have at least tried to interpret and adhere to the rules they have laid out in the widget. Basically they want anything that is a tweet to look and behave just like it would in their application. This includes the ability to Reply, Re-tweet and Favourite Tweets, follow a Twitter user, and navigate to the original tweet amongst other things.

It is technically possible to just upgrade a widget that was using the v1.0 API to use v1.1 with minimal changes.  I would have to advise against this though, as you run the risk of having your API access cut off. I guess that means no more status update tickers?

Web intents

Web intents facilitate actions on tweets, and they can work with or without JavaScript. Twitter provide some hosted JavaScript that automatically enhances the web intents in your HTML. You don’t have to add any classes or attributes, it works based on the link target. There are privacy concerns, as Twitter are can track users when this code is included. There is a method to opt-out of this, but I haven’t yet implemented this option.

Download the OAuth Twitter Widget for WordPress

Download the zip or clone the GitHub repository and install the plugin as normal. You may need to tweak the CSS, as I have tested this on just one WordPress theme (this one). If you have an improvement, feel free to send a pull request. Questions and suggestions are always appreciated, if you have any post an issue.

Michael is a Software Engineer working in the North West of England. Michael spends his days building hand-crafted PHP applications. Rumours of his super-hero status are currently unconfirmed. He savours his victories when solving difficult programming challenges; occasionally writing about them here, on his personal blog.