Advertisement
  1. Code
  2. WordPress
Code

Create a Twitter Widget with the Latest Twitter API

by
Difficulty:IntermediateLength:MediumLanguages:

Twitter made several changes when they launched 1.1 of their API. One of the most notable changes is the introduction of authentication. That is, applications need to be authenticated before they are allowed to send requests to the API.

Authentication is powered by OAuth - an open protocol to allow secure authorization in a simple and standard method that allows users to approve application to act on their behalf without sharing their password.

In this tutorial, we will learn how to programmatically interact with Twitter's API as we develop a Twitter timeline WordPress widget that displays a list of latest tweets made by a Twitter user.

Here is a preview of the Twitter timeline widget to be built at the end of this tutorial.

To successfully send requests to the Twitter API, you need to create an application with OAuth authorization because unauthorized requests won't be allowed.

To create a Twitter application, you need to login to the Twitter developer dashboard using your Twitter account. The point of creating an application is to give yourself (and Twitter) a set of keys. 

These include:

  • the consumer key
  • the consumer secret
  • the access token
  • the access token secret

Follow the steps below to create a Twitter application and to generate the keys.

  • Login to Twitter developer account using your Twitter account and navigate to the Application Management console.
  • Click on the Create New App button to initiate the Twitter application creation.
  • Fill the form and click the submit button to create the application.
  • Click on the application, navigate to the Permissions tab and change the Access level to Read and Write.
    If you want to make any decent use of this API, you'll need to change your settings to Read and Write if you're doing anything other than standard data retrieval using GET requests.

To get your application consumer key and secret, navigate to the API Keys tab.
The API keys and API secret is the consumer key and consumer secret, respectively.



To get the application access token and access token secrets, still in the API Keys tab, scroll downward and click on the Create my access token button to create the access tokens.


Refresh the page and your application Access tokens will be shown to you.

We now have the consumer key and secret and also the access token and secret keys. These OAuth credentials are authenticated by Twitter when sending requests to the API.

The widget settings of the Twitter timeline widget we are coding will consist of form fields that will collect and save these OAuth credentials to the database for reuse by the widget.

Let's get started coding the Twitter timeline widget plugin.

Twitter Timeline Widget Development

The header is first thing to go into the plugin file is the plugin header.



Create a class extending the WP_Widget  parent class.


Give the widget a name and description via the __construct() magic method.

The form() method below create the widget settings form that will save the OAuth credentials to the database for reuse later by the widget.

Below is a screenshot of the widget settings created by the form() method above.

When values are entered into the settings  form field, they need to be saved to the database. The update() method sanitize the widget form values by stripping out malicious data and then save the sanitized data to the database.

I found a very useful Simple PHP Wrapper for Twitter API that make sending request and receiving response from the API painless which will be used by our widget.

Download the PHP wrapper in zip archive from it GitHub repo, extract and include the TwitterAPIExchange.php file which contain the wrapper class.

The twitter_timeline() method below accept the following as its arguments which comes in handy when making request to Twitter API.

  1. $username: Twitter username
  2. $limit: Number of tweets to be displayed by the widget
  3. $oauth_access_token: Twitter application OAuth access token.
  4. $oauth_access_token_secret: Application OAuth access token secrete.
  5. $consumer_key: Twitter application Consumer Key.
  6. $consumer_secret: Application Consumer secrete.

The method uses the PHP Wrapper for Twitter API to send request to the Twitter API, save and return the response (JSON data of the user timeline).

The time tweets were created or made is saved by the API in an English textual datetime. E.g. Thu Jun 26 08:47:24 +0000 2014

To make the tweet time more user-friendly, I created the method tweet_time() that displays the time in the following ways.

  • If the time is less than three seconds, it returns right now.
  • Less than minute, returns x seconds ago.
  • Less than two minutes, returns about 1 minute ago.
  • Less than an hour, returns n minutes ago and so on.

Here is the code for the tweet_time() method.

Next is the widget() method that displays the Twitter timeline in WordPress front-end.

The widget class Twitter_Tweets_Widget is finally registered using the widgets_init hook so it is recognizable by WordPress. Close out your class with a closing } and then add the code below to initialize the 


Finally, we are done coding the Twitter timeline widget.

Summary

In this article, we learned how to use the Twitter API in a real-world project in order to build our own Twitter timeline WordPress widget. Although the tutorial should be relatively straightforward, we covered topics such as OAuth, keys, and other topics that may be new to those of you working with an API.

If you have any questions, or suggestions for code improvements, let me know in the comments.



Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.