Blog

11 Mar
2013

Twitter Icon Logo

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>';  
?>
Posted in: < CMS >
me@grafxflow avatar

me@grafxflow


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!

Visitors also viewed these posts

19 Thoughts

  1. 21 Jun
    2013

    avatar

    sam

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

    avatar

    sam

    What to do with that download plugin?
    I don't understand.
  3. 21 Jun
    2013

    avatar

    me@grafxflow

    Have you activated the plugin?
  4. 21 Jun
    2013

    avatar

    sam

    I don't understand how I should do with the download file wordpress and the plugin?
    And where I should activated the plugin?
  5. 21 Jun
    2013

    avatar

    sam

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

    avatar

    sam

    I don't know what to do with wordpress, am I gonna download about wordpress file or something?
  7. 21 Jun
    2013

    avatar

    sam

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

    avatar

    sam

    Also, is it the only way we can subscribe twitter rss?
    Does there has an easy way to subscribe twitter rss?
  9. 21 Jun
    2013

    avatar

    me@grafxflow

    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.
  10. 21 Jun
    2013

    avatar

    me@grafxflow

    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.
  11. 21 Jun
    2013

    avatar

    sam

    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.
  12. 21 Jun
    2013

    avatar

    sam

    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?
  13. 21 Jun
    2013

    avatar

    sam

    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.
  14. 21 Jun
    2013

    avatar

    sam

    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?
  15. 22 Jun
    2013

    avatar

    me@grafxflow

    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/
  16. 22 Jun
    2013

    avatar

    me@grafxflow

    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.
  17. 22 Jun
    2013

    avatar

    me@grafxflow

    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.
  18. 22 Jun
    2013

    avatar

    me@grafxflow

    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.
  19. 23 Jun
    2013

    avatar

    sam

    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.

Add comment

Add comment