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 on my Saveu.ca Website
Overview of How to Add Twitter Feeds to your Site
- Add New Plugin in Plugins Manager
- Search for Recent Tweets Plugin in Plugins Manager
- Install Recent Tweets Plugin in Plugins Manager
- Go to Installed Plugins in Plugins Manager
- Activate Recent Tweets Plugin in WordPress Plugins Manager
- Go to Widgets in WordPress Appearance Manager
- Drag and Drop Recent Tweets Plugin from Available Widgets to Sidebar
- See Recent Tweets Plugin Settings in Appearance Widgets Manager
- Visit & Sign into your Twitter Developers Account
- Create New Application in Twitter Developers Account
- Enter New Application Details in Twitter Developers Account
- Copy Paste OAuth Settings from Twitter Dev Account into Recent Tweets Plugin Settings in Appearance Widgets Manager
- Create Access Token in Twitter Developers Account
- Copy Paste Access Token strings from Twitter Dev Account into Recent Tweets Plugin Settings in Appearnace Widgets Manager
- Error on if Recent Tweets Settings are not Populated
1. Add New Plugin in WordPress Plugins Manager
Go to your WordPress admin panel and add a new plugin. Plugins areof your . It’s best to keep your plugins to a minimum because too many will slow down your site.
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.
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.
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.
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.
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.
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.
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.
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:
- 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.
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.
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.
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 ).
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.
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 ).
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 onif Recent Tweets Settings are not Populated
You will see this error message on theof 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 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,