Twitter Icon Logo
me@grafxflow

Written by me@grafxflow

11 Mar, 2013

19

3,771

Add Twitter Feed App to WordPress

Due to Twitter stopping their RSS feed I had to go down the Twitter API route. So here is how to set up a Twitter App and output the JSON feed into WordPress using the plugin oAuth Twitter Feed for Developer.

First lets do the ground work for the app creation at twitter:

1. Login at dev.twitter.com. If you already have a twitter account it should work here.

2. Next go to the dropdown and choose my "My applications".

Add Twitter Feed App to WordPress - Picture 1

3. Then select "Create a new application".

Add Twitter Feed App to WordPress - Picture 2

4. Now give your app a "Name", "Description" and your "Website" url that will be used for the feed. Then agree to the terms and conditions at the bottom. Note: The Apps name must be unique and not used by anybody else - either way Twitter will tell you this.

Add Twitter Feed App to WordPress - Picture 3

5. Now you will be taken to the "Details" tab of your new app. You can create your own access token but for ease of use I select choose "Create my access token".

Add Twitter Feed App to WordPress - Picture 4

6. Twitter will generate your apps access token.

Add Twitter Feed App to WordPress - Picture 5

7. Now lets add an icon to our twitter app by choosing the "Settings" tab and then scroll down to "Application icon" and upload your icon.

Add Twitter Feed App to WordPress - Picture 6

Add Twitter Feed App to WordPress - Picture 7

8. Now select the "OAuth tool" tab which will show the "OAuth settings" - we will be copying this information into WordPress. One thing to say is don't share this info with anybody!

Add Twitter Feed App to WordPress - Picture 8

9. Now go back into WordPress and install the following plugin oAuth Twitter Feed for Developers. Then in admin choose Settings -> Twitter Feed Auth and copy the twitter settings into the appropriate textfield on the form. Then "Save Changes".

Add Twitter Feed App to WordPress - Picture 9

9. Now you want to output the Twitter (JSON) feed, so here is an example to show your latest 2 feeds on the website header. Still in WordPress admin go to "Appearance -> Editor" and select the "header.php" on the right. Depending on your theme you will need to decide its placement and styling. Quick Note: By default the plugin checks the Twitter feed every hour so your Tweets may not appear straight away. This time can be changed but I would keep the default setting - if Twitter gets too many hits it stops the feed from being read.

UPDATE: A much more detailed example of code can be found here Example code to layout tweets

<?php
// Extracts all the urls and twitter users as links //
// Thanks to http://jamiebicknell.tumblr.com/post/413464002/php-to-convert-links-mentions-and-hashtags for the autoConvert function //
function autoConvert($text) {
    $text = preg_replace("/((http(s?):\/\/)|(www\.))([\w\.]+)([a-zA-Z0-9?&%.;:\/=+_-]+)/i", "<a href='http$3://$4$5$6' target='_blank'>$2$4$5$6</a>", $text);
    $text = preg_replace("/(?<=\A|[^A-Za-z0-9_])@([A-Za-z0-9_]+)(?=\Z|[^A-Za-z0-9_])/", "<a href='http://twitter.com/$1' target='_blank'>$0</a>", $text);
    $text = preg_replace("/(?<=\A|[^A-Za-z0-9_])#([A-Za-z0-9_]+)(?=\Z|[^A-Za-z0-9_])/", "<a href='http://twitter.com/search?q=%23$1' target='_blank'>$0</a>", $text);

    return $text;
}

// Number of tweets to show //
$number_of_tweets = 2;
// Your twitter username //
$tweets_screename = 'twitteruser';
$tweets = getTweets($number_of_tweets, $tweets_screename, $optional_array_of_any_additional_twitter_api_parameters);

// Output the Twitter results //
echo '<div id="twitter_feed_holder">';
echo '<h1>'.$tweets_screename.' @ twitter feed. . .</h1>';

foreach($tweets as $tweet) {
    // Convert the date format //
    $date_from_twitter = strtotime($tweet['created_at']);

    echo '<p><span class="twitter-bullet"><a href="https://twitter.com/'.$tweets_screename.'/status/'.$tweet['id_str'].'" target="_blank">#</a> </span>'.autoConvert($tweet['text']).' <span>'.date('j M, Y', $date_from_twitter).'</span></p>';
}

echo '</div>';  
?>

Add comment

19 Response

    sam
    21 Jun 2013

    I stuck at step 9.
    Where to back to wordpress?
    I could't find where to admin to enter those keys.

    |

    sam
    21 Jun 2013

    What to do with that download plugin?
    I don't understand.

    |

    me@grafxflow
    21 Jun 2013

    Have you activated the plugin?

    |

    sam
    21 Jun 2013

    I don't understand how I should do with the download file wordpress and the plugin?
    And where I should activated the plugin?

    |

    sam
    21 Jun 2013

    I already download the wordpress plugin, but I just saw many php file in it, how should I do the next step?

    |

    sam
    21 Jun 2013

    I don't know what to do with wordpress, am I gonna download about wordpress file or something?

    |

    sam
    21 Jun 2013

    BTW, php file should be opened by what program, I am afraid I open it with wrong program.

    |

    sam
    21 Jun 2013

    Also, is it the only way we can subscribe twitter rss?
    Does there has an easy way to subscribe twitter rss?

    |

    me@grafxflow
    21 Jun 2013

    I no longer think this is possible, since they have officially stopped support for the RSS feeds. If you use WordPress and want a twitter feed then follow the steps above and you should find easy enough to implement.

    |

    me@grafxflow
    21 Jun 2013

    Hi Sam... which shall I answer first?


    • Best way to install any plugin is via the administration. Choose the plugin option on the left and on the new page at the top select 'add new'. Now type in the plugin you want to search for and it will then allow you to install it automatically and once done will ask if you want to activate it.

    • Now once that is done (for this particular plugin) on the left choose settings and then choose 'Twitter Feed Auth'.

    • Then just follow the steps above...

    • As for adding the php code to output the feed you can edit it direct within admin.



    Hope this helps.

    |

    sam
    21 Jun 2013

    Thanks for the reply, but I think you kinda don't know my problem exactly. I mean where is the page or software should I go to that admin you said? Sorry, I a m a bit dumb. Do I need to download wordpress.org or register in wordpress.com or something? I already try it, but I still couldn't figure out where the admin you said. Sorry for bother you so much. But I just wish I can see twitter new update quickly.

    |

    sam
    21 Jun 2013

    I already download the wordpress file at wordpress.org. But the file I download, then I open it, there are tons of php file in it. Which one is the admin you are talking about I should open it?

    |

    sam
    21 Jun 2013

    I also register free at wordpress.com, but when I log in to that account, I couldn't see the admin you said. Do I need to paid money to buy something? I just couldn't accesses the admin you said.

    |

    sam
    21 Jun 2013

    Or do I need to register account in wordpress.org? But I still couldn't find the admin.

    BTW, what is the difference between wordpress.org and wordpress.com? Are they different?

    |

    me@grafxflow
    22 Jun 2013

    I mean where is the page or software should I go to that admin you said?


    If I understand you correctly you should simply be able to access your admin via

    http:://www.yourwebsiteurl.com/wp-admin/

    |

    me@grafxflow
    22 Jun 2013

    I think I understand you now. Do you have ftp details to upload files to your website. If so upload the WordPress folder contents. If you don't have your own website then yes you can create your own blog via wordpress.com.

    |

    me@grafxflow
    22 Jun 2013

    I can't help you on this one since I have never had to use wordpress.com, so I am not sure it uses the same administration.

    |

    me@grafxflow
    22 Jun 2013

    The difference is:

    wordpress.com hosts and allows you to create a blog for yourself.

    wordpress.org has the source code etc which allows you to install it on your own website/server.

    Hope this makes helps.

    |

    sam
    23 Jun 2013

    Though I think these are too hard for me to understand, but still thank you for reply.
    BTW, do you think there are still many people would use this way to subscribe twitter news?
    At least I know idiot like me will quit. lol
    I really wish there will be a simple way to subscribe.

Smart Search

133 Following
50 Followers

me@grafxflow

Hull, United Kingdom

I am a Full-stack Developer who also started delving into the world of UX/UI Design a few years back. I blog and tweet to hopefully share a little bit of knowledge that can help others around the web. Thanks for stopping by!

Follow