Loading...
WordpressWordpress Tutorials

WordPress Tutorial – How to Add Twitter Feeds to your WordPress Website

I recently created a new website called ‘Saving Money’ which you can find at www.saveu.ca.  It’s mostly for saving money on groceries.  I decided on the weekend to create a Twitter account for it and it’s really the first time I’ve really used Twitter myself so you have to bare with the first few twitter posts I posted up.  I wanted to display my last 5 Twitter post into my site and was looking around for some plugins to do it fast and painless.  I was able to put up my Twitter feeds within 10 minutes and it was very easy, well kind of involved but doable!  My steps are very detailed, that’s why there are 14 steps.  Below are steps I used to integrate my twitter feeds into my website.  Ready?  🙂

Here’s what it looks like on my Saveu.ca website:

recent tweets plugin saveuca Wordpress Tutorial   How to Add Twitter Feeds to your Wordpress Website

Recent Tweets Plugin on my Saveu.ca Website

Overview of How to Add Twitter Feeds to your Site

  1. Add New Plugin in Wordpress Plugins Manager
  2. Search for Recent Tweets Plugin in Wordpress Plugins Manager
  3. Install Recent Tweets Plugin in WordPress Plugins Manager
  4. Go to Installed Plugins in Plugins Manager
  5. Activate Recent Tweets Plugin in WordPress Plugins Manager
  6. Go to Widgets in WordPress Appearance Manager
  7. Drag and Drop Recent Tweets Plugin from Available Widgets to Sidebar
  8. See Recent Tweets Plugin Settings in Appearance Widgets Manager
  9. Visit & Sign into your Twitter Developers Account
  10. Create New Application in Twitter Developers Account
  11. Enter New Application Details in Twitter Developers Account
  12. Copy Paste OAuth Settings from Twitter Dev Account into  Recent Tweets Plugin Settings in Appearance Widgets Manager
  13. Create Access Token in Twitter Developers Account
  14. Copy  Paste Access Token strings from Twitter Dev Account into Recent Tweets Plugin Settings in Appearnace Widgets Manager
  15. Error on frontpage if Recent Tweets Settings are not Populated

Steps:

1.  Add New Plugin in WordPress Plugins Manager

Go to your WordPress admin panel and add a new plugin.  Plugins are Extensions of your Wordpress Theme.  It’s best to keep your plugins to a minimum because too many will slow down your site.

wordpres add new plugin 1 Wordpress Tutorial   How to Add Twitter Feeds to your Wordpress Website

WordPress add new plugin
  • Login to your WordPress Admin Backend
  • Click on ‘Plugins’
  • Click on’ Add New

2.  Search for Recent Tweets Plugin in WordPress Plugins Manager

There are many plugins you can install to your WordPress website.  Search for the ‘Recent Tweets’ plugin in the search box.

wordpres add new plugin search recent tweets 2 Wordpress Tutorial   How to Add Twitter Feeds to your Wordpress Website

WordPress Install Recent Tweets Plugin
  • Type in ‘Recent Tweets Widget’ in the search box
  • Click on ‘Search Plugins

3.  Install Recent Tweets Plugin in WordPress Plugins Manager

Install the Recent Tweets plugin in your plugins manager in WordPress.  You have to install before you can activate a plugin.

wordpres install new plugin recent tweets 3 Wordpress Tutorial   How to Add Twitter Feeds to your Wordpress Website

WordPress Install Recent Tweets Plugin
  •  In the Install Plugins page, under the ‘Recent Tweets Widget’
  • Click on ‘Install Now

4.  Go to Installed Plugins in Plugins Manager

Go to your Installed Plugins page to view all your installed plugins.

wordpres installed plugins 4 Wordpress Tutorial   How to Add Twitter Feeds to your Wordpress Website

WordPress Installed Plugins
  • Click on ‘Plugins’
  • Click on ‘Installed Plugins

5.  Activate Recent Tweets Plugin in WordPress Plugins Manager

After you install a WordPress plugin, you need to activate it before you can use it.

wordpres activate new plugin recent tweets 5 Wordpress Tutorial   How to Add Twitter Feeds to your Wordpress Website

WordPress Activate Recent Tweets Widget
  •  Scroll down and find your ‘Recent Tweets Widget’ plugin
  • Click on ‘Activate

6.  Go to Widgets in WordPress Appearance Manager

For the Recent Tweets Widget plugin, you customize it in the Widgets Manager.  You will not be able to enter your Twitter information in any of the Plugin settings.

wordpres appearances widgets 6 Wordpress Tutorial   How to Add Twitter Feeds to your Wordpress Website

WordPress Appearance Widgets
  •  Click on ‘Appearance’
  • Click on ‘Widgets

7.  Drag and Drop Recent Tweets Plugin from Available Widgets to Sidebar

Click on the Recent Tweets Widget under the available widgets and drag and drop it over onto one of your sidebars.  From there you will be able to customize your Twitter settings.

wordpres available widgets drag drop recent tweets 7 Wordpress Tutorial   How to Add Twitter Feeds to your Wordpress Website

WordPress Drag drop Recent Tweets from Available to Sidebar
  • Under Available Widgets
  • Find ‘Recent Tweets’
  • Click on ‘Recent Tweets’ and drag over to one of your Sidebars
  • Drop it into your Sidebars

8.  See Recent Tweets Plugin Settings in Apperance Widgets Manager

Now you can see all the settings you have to set for WordPress to see your Twitter feeds.  You need to fill in all this information before your feeds will be integrated into your WordPress website.   These values are not randomly set. You need to log into your Twitter Dev account and copy and paste these values in.  Steps 9-14 will show you how to do it.

wordpres available widgets recent tweets settings 8 Wordpress Tutorial   How to Add Twitter Feeds to your Wordpress Website

WordPress Recent Tweets Settings
  • Recent Tweets Widget settings expanded:
    • Title = Recent Tweets
    • Consumer Key: (see steps below)
    • Consumer Secret:  (see steps below)
    • Access Token: (see steps below)
    • Access Token Secret: (see steps below)
    • Cache Tweets in every: 3 hours
    • Twitter Username: Elaine
    • Tweets to display = 5
  • Click Save

9.  Visit & Sign into your Twitter Developers Account

Your Twitter account is also the same as your Twitter Developers account.  Use the same login and password information here you use to login to your normal twitter account.

recent tweets sign in twitter dev account 9 Wordpress Tutorial   How to Add Twitter Feeds to your Wordpress Website

Twitter Developers Account Signin
  • Go to https://dev.twitter.com
  • Sign into your Twitter Account

10.  Create New Application in Twitter Developers Account

You need to create a new Twitter app to identify what app you are integrating your feed into.

recent tweets twitter dev create new app 10 Wordpress Tutorial   How to Add Twitter Feeds to your Wordpress Website

Twitter Developers – Create new App
  • In ‘My Applications’
  • Click on ‘Create a new application

11.  Enter New Application Details in Twitter Developers Account

Enter in application details in your Twitter Developers Account app.  Here you will specify which website will see your twitter feeds.

recent tweets twitter dev new app details 11 Wordpress Tutorial   How to Add Twitter Feeds to your Wordpress Website

Twitter Developers App Details
  • Under ‘Create an application’, enter your Application details
    • Name = CmsMind – recent tweets
    • Description = CmsMind website show last 5 tweets
    • Website = http://www.cmsmind.com
  • Scroll down agree to the terms, complete the captcha
  • Click on ‘Create your Twitter application

12.  Copy Paste OAuth Settings from Twitter Dev Account into  Recent Tweets Plugin Settings in Appearance Widgets Manager

After you create your Twitter application, you will see a set of OAth Settings.  You can copy these values into the Recent Tweets Widget in the Widget Manager ( Step 8 ).

recent tweets twitter dev new app info 13 Wordpress Tutorial   How to Add Twitter Feeds to your Wordpress Website

Twitter Application OAuth Settings
  • Consumer Key = Consumer Key (Recent Tweets Widget in Step 8)
  • Consumer Secret = Consumer Secret (Recent Tweets Widget in Step 8)

13.  Create Access Token in Twitter Developers Account

Right below the OAuth Twitter settings, you will see a button to ‘Create Access Token’.  You need to click this button a couple of times for the Access tokens appear.  It will give you some error messages, but I just kept on clicking it until it gave me what I wanted.

recent tweets twitter dev create access token 14 Wordpress Tutorial   How to Add Twitter Feeds to your Wordpress Website

Twitter Developers Create my access token
  • Under Your Access token
  • Click on ‘Create my access token

14.  Copy  Paste Access Token strings from Twitter Dev Account into Recent Tweets Plugin Settings in Appearnace Widgets Manager

You will see your access token strings and the access token secret for your account.   Do not share your access token secret or token with anyone.   You can copy these values into the Recent Tweets Widget in the Widget Manager ( Step 8 ).

recent tweets twitter dev new access token details 14 Wordpress Tutorial   How to Add Twitter Feeds to your Wordpress Website

Twitter Developers Access Tokens
  • Under your access tokens,
    • Access Token = Access Token (Recent Tweets Widget in Step 8)
    • Access Token Secret = Access Token Secret (Recent Tweets Widget in Step 8)

15.  Error on frontpage if Recent Tweets Settings are not Populated

You will see this error message on the Frontpage of your website if you decide to not populate all the Recent Tweets Settings in your widget.  How embarrassing!!

 Please fill all widget settings!

recent tweets widget error frontpage Wordpress Tutorial   How to Add Twitter Feeds to your Wordpress Website

Recent Tweets Widget Error Message on Frontpage

Hopefully the steps above will help you populate all the fields into your Recent Tweets Widget in your Widget manager in Step 8.  Remember to save the widget after you are done.  Refresh your WordPress website frontend and see your Twitter feeds.  If you tweet often, you can reduce your Twitter cache field in Step 8.  I set mine to every 3 hours to see if there are any new tweets, but you can set it to every hour.

Hope that helps,

Elaine

 Wordpress Tutorial   How to Add Twitter Feeds to your Wordpress Website

Elaine

Elaine is the founder of CmsMind, an online blog providing Joomla and WordPress tutorials. Elaine lives in Toronto and when she is not online, she is either Marathon and Triathlon training or travelling and racing somewhere in the world. Find her also at: Save Money, Premium Themes and Templates, and at Webhosting Tips.

More Posts - Website

Leave a Reply

Your email address will not be published. Required fields are marked *

Captcha Captcha Reload