64x64 icon dark hosting
Get a Tuts+ subscription for just $45! Deploy New Relic now to claim.
Advertisement

Twitter Trends Widget for WordPress

by

In this tutorial we are going to create a WordPress widget that displays Twitter Trends by region. We will use Twitter's Trends API and update trends after a specific time duration using WordPress' Transients API.


Twitter Trends API & WOEID

Twitter Trends: Twitter Trends give a general overview of what the millions of Twitter users are talking about the most at specific time on Twitter, which will give you some indication of what is happening around the world.

Twitter provides a Trends API, GET trends/:woeid, which is a RESTful API that returns results in JSON or XML format. You can easily parse the API request result and display it.

Twitter is using Yahoo’s Where On Earth IDs (WOEIDs) to identify locations for which it has trending data.

So What is WOEID (WHERE ON EARTH IDENTIFIERS) ?
WOEID is a unique reference identifier assigned by Yahoo!'s WOEIDs to identify any place on Earth.


WordPress Widgets

WordPress Widgets are WordPress plugins that can be easily added to widgetized regions of your WordPress theme like the sidebar, footer, etc. To use a WordPress widget you need properly "widgetized" WordPress themes to include widgets in the header, footer, and elsewhere in the WordPress widget areas. From the dashboard administrators can easily add, rearrange, remove and update widget parameters. Using WordPress widgets is very, very easy for non-technical blog owners.

Using WorPress widgets does not require any coding experience. They can be easily added, removed, and rearranged on the WordPress administration "Appearance -> Widgets" panel by simple drag and drop.

Before we start, I assume that you have a general knowledge of the WordPress Widgets API. In this tutorial we are going to use Paulund's WordPress Widget Boilerplate.


Creating Twitter Trends Widget

We are going to create a WordPress widget that allows you to fetch Twitter Trends by region and display them on your WordPress blog / website.

The Twitter Trends Widget gives your blog or website visitors a general overview of what millions of people on Twitter are talking about the most now, based on a specific location. This widget will give some insight in what is happening around the world right now.

Creating the Widget Constructor

Register the 'TwitterTrendsWidget' widget in the widget_init action.

The register_widget function will call the TwitterTrendsWidget class which we will create in the next step.

Creating the Widget Function

The Widget function helps you to display your widget on the front-end. This function is called to return output of the widget and display it in the widget display area (e.g. sidebar, footer).

As you can see we are collecting all the required fields from the $instance array like title, region, and expiration to display the widget on the website with proper style.

Use the following function to display our Twitter Trends Widget.

In this Twitter Trends Widget we will use the following variables:

  • $title - Our widget title (textbox field)
  • $region - To select region, default region dropdown with GEOID value, e.g. India: 23424848 (dropdown field)
  • $expiration - Update trends using WordPress Transients API. e.g. hourly, daily (dropdown field)
  • $display - Number of trends to display (textbox field)

We will set the values of these variables using the WordPress $instance variable.

In the code above we are using the twitter_trends() function. You don't need to worry about it now, I will explain it in the next step.

In the function twitter_trends() we are passing $region and $expiration variables and it will return an array of Twitter trends by region. Assign that to the $trends variable.

Next, display trends using a for loop with a limit of displaying trends using the $display variable.

Using WordPress' Transients API.

WordPress' Transients API allows you to store cached data in the database temporarily by giving it a custom name and a time duration after which it will automatically expire and be deleted.

For more information about WordPress' Transients API you can refer to our Getting Started With the WordPress Transients API tutorial series.

As I told you before, we are passing two variables $region and $expiration in this function.

Now, using Twitter's Trends API GET trends/:woeid. Suppose our variable $region has a value of "23424848". Let's try to get current Twitter trends for India.

Just paste this URL in your your browser. You will see the trends response in JSON format. Using the file_get_contents() reads a file into a string. If there is no error in the response then using json_decode() gets a JSON encoded string and converts it into a PHP object variable $count.

Now update the variable Twitter Trends

Creating Widget Update Function

The WordPress widget update function is used to update our widget form variables to the database by submitting a widget admin form.

Widget options were stored in an array variable which was called $instance. The update function takes two parameters, $new_instance and $old_instance. $old_instance which contains all the option values that were already saved before, and $new_instance which contains all of the option values that we have just updated through the widget admin form.

This function sets each old instance value in the array equal to the appropriate value in the new instance.

Creating Widget Form Function

The widget form function is used to create the widget form in the dashboard to store or update widget variables. Creating widget form is very simple, it will output an HTML form with a field for our options.

twitter_trends

In this function you can see the $instance parameter, which allows our HTML form to read the saved widget options.


Putting It Together: The Full Code

You can see the full code in the WP Twitter Trends plugin in the WordPress.org plugin directory, or download it from the link at the top of this article.


Conclusion

And here we have successfully developed a WP Twitter Trends Widget! You can download the source code and change the front-end widget layout by adding new CSS styles. You can also create a tabbed widget to separate latest trends topic and hashtags. Now you have a trends widget on your site or blog.

Thanks for reading my article! If you have any questions or doubts in your mind just leave a comment, I'm glad to help you in the comments.

Advertisement