How to Display Twitter Feeds in Umbraco
Twitter recently updated their API which now prevents unauthorized access to user feeds. Thankfully a new package is available to get your Umbraco tweet feed restored.
Meet uTweets
uTweets is a new Umbraco package developed by Nick Garrard & Davy Belmans. It makes use of the new Twitter 1.1 API which now requires the use of OAuth when making API requests. Installation and setup is easy, though you will need to make some updates to their razor script if you want complete customization of the feed layout. Before starting, you may want to check to see if your Umbraco version is compatible with this package. Visit the uTweets page for compatibility details.
Create a Twitter Application
Head on over to dev.twitter.com and sign in with your Twitter username and password. In the upper right corner of the page you will see a thumbnail of your Twitter profile pic. Hover over this and select the My Applications Menu item. Create a unique Title and Description for your App and add your Website address to the Website and Callback URL fields. Once created, click the Generate Token button.
Next, click the OAuth Tool tab. If your tokens are not displaying yet, wait a few sections and click the tab again (the token generation process is not always immediate). Leave this page open for now, its now time to install uTweets.
Install and Configure uTweets
Start by downloading the uTweets package. Log into Umbraco and go to the Developer section. Go to Packages and then Install Local Package. Install the uTweets package as you would any other package. Once installed, a number of Dictionary items will have been created in the Settings section. Go there.
You will several dictionary items in the uTweets folder. The values of these entries can be customized to your taste. For now, focus on the following for items:
- uTweets.AccessToken
- uTweets.AccessTokenSecret
- uTweets.ConsumerKey
- uTweets.ConsumerSecret
Go Back to your Twitter App page and copy the respective keys and tokens to these dictionary entries. The last step is to add the uTweets Macro to your template. Once added, your tweets should be displaying on your website where defined.
Customizing uTweets Dates in Razor
At this time, uTweets make use of Razor scripts in the Developer section to parse the feed and display entries on your pages. 4 scripts will have been automatically installed for you to get started. By default, these scripts will add tweet dates of the feed. The format of the dates may not be ideal for your needs. To change the date format, replace the following: @tw.CreatedDate with: @tw.CreatedDate.ToString("MMM dd"). Use standard MM/DD/YY values as needed.
What About Twitter For Umbraco?
Twitter For Umbraco was the popular Twitter package for Umbraco prior to the API update. It is unknown (at this time) whether this package will be updated to become compliant with the Twitter 1.1 API. Personally I loved this package and I hope the Warren will keep the package alive.