View the new Sparky Page Builder introductory video. Watch now

Twitter has changed API recently, so you might release that your old widgets are not working anymore. This article explains how to create a simple Twitter widget that shows your latest tweets and how to publish it on your Joomla or WordPress site.

On old Twitter API, you could show anyone's tweets on your site, even without any interventions in your Twitter account. It's not possible anymore. To be able to publish tweets from your (or someone else's Twitter account), you must log in your Twitter account and create a widget. You will receive a code snippet that should be copied from Twitter account and pasted into your site.

Create a Twitter widget

You must login to your Twitter account and, while you are logged in, go to Account Settings. There you will notice the left side menu with Widgets link at the bottom. Click the Widgets link to see what widgets you already created for your account and to add a new widget. To create a new widget, click "Create new" button (top right corner) and a new page with open with settings of your new widget.

Twitter account settings

The first thing is to decide what data will be shown on your site. You have four options:

  1. User timeline shows your tweets on your site. If you post a new tweet, it will be automatically published on your site.
  2. Favorites shows twits that you marked as your favorite twits.
  3. List is a way of showing someone else's twits on your website. First, you should crate list(s) and put some people who you are following into the list. Finally, you select the list here when creating the widget.
  4. Search allows us to show twits per slash tag (#) on our site. If anybody include this slash tag in his/her twit, it will be shown on your site automatically, even if you are not following this person.

For our example, we will create a widget that shows our Twitter timeline on Joomla or WordPress site and update it automatically.

Create Twitter widget

Select the "User timeline" tab and enter your Twitter account or account of the person whose twits you want to show on your site (in example @hotjoomla). There are checkboxes "Exclude replies" (will you show the replies of your twits) and "Auto-expand photos" (show actual photos in twits or just links to the photos). The width of this widget will be selected automatically as per available space on your site. The height (default 600px) can be set here. There are two theme options (Light and Dark), so you can select one that matches your overall site design better. Link color can be set here or you can leave this blank to use classic Twitter's blue color for links.

Finally, you can click "Create widget" button and the code snippet field will be shown. Now, you need to paste that into your Joomla or WordPress.

Twitter widget code snippet

Publishing Twitter widget in Joomla

The easiest way to integrate your new Twitter widget with your Joomla site is to create a custom HTML module for Joomla. We used this method in Tennis template for Joomla.

First, you should decide in what module position you would publish the Twitter widget. If you are using our Joomla templates, check available module positions for your template here. Login to your Joomla Administration panel and go to Extensions > Module Manager. Click "New" button to create a new module. When asked, select "Custom HTML" module type. Now, you should enter the title of your module, decide whether to show the module title or not, and select the module position when the module will be published. Also, don't forget to paste the code snippet from Twitter site into the Custom Output field. If you have WYSIWYG editor enabled, click HTML icon and paste code there or disable WYSIWYG editor in Site > Global Configuration.

Twitter widget in Joomla

The same widget can be also published into the article. Simply paste that code snippet when editing article. However, if you use module, you can show the widget on all pages throughout your site.

Click Save to save the module and you are done. You should see the widget served by Twitter's website on your Joomla site now.

Publishing Twitter widget in WordPress

We recommend you to create a WordPress widget and to drop it into an available widget position. If you are using our WordPress themes, you can check the list of all available widget positions for all themes here.

Login to your WordPress Dashboard and go to Appearance > Widgets. Drag the Text widget from the Available Widgets pane and drop it into the widget position of your selection. The widget positions are listed in the right hand side column. Open position to be able to drop some widgets in it.

When you drop the the Text widget into position, a pane where you can add title and content will appear. You can type title (not mandatory) and paste the code widget that you copied from your Twitter account page. Save the widget and you are done. The Twitter widget should be published on your WordPress site now in the widget position that you selected.

Twitter widget in WordPress

It's also possible to paste the code snippet in post or page. However, by creating a widget, you can be sure your twits will be shown on all pages of your WordPress site.

A sample of this workaround

The following sample is from our Joomla template Hot Tennis. We created a widget for our @hotjoomla Twitter account and pasted it into the template demo. If you are using this template (or any template that shows twits) and you like to change our twits with your twits, please follow the workaround explained in this article.

Sample of Twitter widget