Advertisement
Windows Phone

WP7: Integrating Twitter with Your App

by

With Twitter integration, users can share app content on their timeline. For example, on multimedia apps a user can tweet the song he is listening to, or if the app is a game, a new unlocked achievement can be tweeted. Integrating Twitter to your app will help it stand out and enable users to promote it.


Step 1: Visual Studio Project Creation

To begin, we need to create a new project on Visual Studio. For this tutorial we need a simple app, so select the "Windows Phone App" option:

Tut-02

If you are using Visual Studio 2012 with the new WP8 SDK, you will be asked about the Target Windows Phone OS Version. If that's the case, select the 7.1 OS.

Tut-03

Step 2: Building the UI

Now that the project is created, open the "MainPage.xaml" file, if it isn't already open, and change the default application and page name text box:


            <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
                <TextBlock x:Name="ApplicationTitle" Text="WP7 Tutorial" Style="{StaticResource PhoneTextNormalStyle}"/>
                <TextBlock x:Name="PageTitle" Text="Twitter" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
            </StackPanel>

Now in the ContentPanel Grid add two rows, one for a TextBox where the user will input the new status, and the other for the button to submit the status:


        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
            </Grid.RowDefinitions>
        </Grid>

Then add a TextBox on the first row with the name "Message" and a button on the second row:


        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
            </Grid.RowDefinitions>
            <TextBox Grid.Row="0" Height="150" Name="Message" TextWrapping="Wrap"/>
            <Button Grid.Row="1" Content="Tweet"/>
        </Grid>

At the end you should have this:

Tut-04

Step 3: Creating a Twitter Developer Account

In order to connect to Twitter, you will first need a developer account. Go to the Twitter developer homepage and login with your Twitter account, or create one if you don't have one already.


Step 4: Registering the New App

Once you are logged in, go to the "My Applications" page, and then click on the "Create a new application" button. On the following page fill in the Application Details, and if you already have a web site, input your site at the Website and Callback URL fields. Otherwise, use a placeholder like "http://www.google.com". After this step a new page will appear giving you two tokens, the "Access token" and the "Access token secret". Copy these codes and add them as constant strings on top of your "MainPage.xaml.cs" constructor:


            private const string consumerKey = "your key here";
            private const string consumerSecret = "your secret here";
            // Constructor
            public MainPage()
            {
                InitializeComponent();
            }

Step 5: Introduction to Tweetsharp

Twitter has a complete API that allows you to connect your app to the service in several ways. It is clear and easy to follow, so it is a great add-on to any app. Note that the authentication API is built using OAuth, which makes it very safe, but gives developers trouble connecting to the API. The steps to connect to the API are explained on the OAuth Documentation of the API. There are different ways to connect, but in this tutorial we are going to use the 3 legged authorization. This method asks for a Request Token, then takes the user to a login page and collects the AccessToken. This process can be a little bit complicated, especially if you are trying to add just one or two features of the API. Fortunately, there is a library developed by Daniel Crenna called Tweetsharp. Tweetsharp is a great tool that will simplify communication between your WP7 Apps and Twitter. It is very simple to use and gives you access to the entire Twitter API from just one library:

TweetSharp is a Twitter API library that simplifies the task of adding Twitter to your desktop, web, and mobile applications. You can build simple widgets or complex application suites using TweetSharp.

You can find more information about the project by going to their website and looking through the hosted example projects.


Step 6: Downloading Tweetsharp

The library is only available through NuGet, so in case your Visual Studio doesn't include the NugGet Package manager, you need to download it from the NuGet homepage. In order to download the package, open the Package Manager Console in Visual Studio (Tools>Library Package Manager>Package Manager Console), and enter the following command:Install-Package TweetSharp.


Step 7: Adding Tweetsharp to the Project

Now that we have the library, we can add it to our project. Add a new import on the "MainPage.xaml.cs" file:

                using Tweetsharp

Step 8:Adding a Browser

In order to connect an app to a user's Twitter account, we must first be given access and permission to the Twitter account. This is done through Twitter's webpage. Therefore, we need to add a web browser. The browser should cover most of the page, so initially it will be collapsed, and then change to visible only when the user needs to login. In the "MainPage.xaml" file add a new WebBrowser just below the ContentPanel:


        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition Height="auto"/>
            </Grid.RowDefinitions>
            <TextBox Grid.Row="0" Height="150" Name="Message" TextWrapping="Wrap"/>
            <Button Grid.Row="1" Content="Tweet"/>
        </Grid>
        <phone:WebBrowser Name="Browser" Grid.Row="1"  Background="Aqua" Width="450" Height="600" Visibility="Collapsed"/>

Step 9: Connecting to Twitter

Now that we have added Tweetsharp and the web browser, we can continue and connect our app to Twitter. The connection is done through a TwitterService object. Therefore we need to create a private global variable and initialize it on the constructor:


          private TwitterService client;

        // Constructor
        public MainPage()
        {
            InitializeComponent();
            client = new TwitterService(consumerKey, consumerSecret);
        }

Step 10: Adding the Click Event

The first time that a user clicks on your "Tweet" button, you must send him to the Twitter login page so he can give you the necessary permission for your app. To do this, ask for a RequestToken. Once you have the token, go to the login page. First, you need to add the click event on your Click button:


            <Button Grid.Row="1" Content="Tweet" Click="tweetClick" />

Now add that method to the code:


            private void tweetClick(object sender, RoutedEventArgs e)
            {
                // Ask for the token
            }

Before we can add the code for the token we need two things, a boolean variable telling us if the user is already logged in, and a variable that will save the RequestToken. Let's add this to the code above the constructor:


            private OAuthRequestToken requestToken;
            private bool userAuthenticated = false;

Step 11: Processing the RequestToken

With the variables ready, we can go and create the method for processing our RequestedToken. This will check for errors. If everything was done correctly, then save the token and take the user to the login URL from the RequestToken:


            private void processRequestToken(OAuthRequestToken token, TwitterResponse response)
            {
                if (token == null)
                    Dispatcher.BeginInvoke(() => { MessageBox.Show("Error getting request token"); });
                else
                {
                    requestToken = token;
                    Dispatcher.BeginInvoke(() =>
                    {
                        Browser.Visibility = System.Windows.Visibility.Visible;
                        Browser.Navigate(client.GetAuthorizationUri(requestToken));
                    });
                }
            }

Now add the code to request the Token inside the Click event method:


            //If user is already logged in, just send the tweet, otherwise get the RequestToken
            if (userAuthenticated)
                //send the Tweet, this is just a placeholder, we will add the actual code later
                Dispatcher.BeginInvoke(() => { MessageBox.Show("Placeholder for tweet sending"); });
            else
                client.GetRequestToken(processRequestToken);

Step 12: Adding Navigated Event

After the user logs in and accepts our app, Twitter will take us to a URL containing a verifier code that we need in order to request the AccessToken. Let's add this event method to our browser


          <phone:WebBrowser Name="Browser" Grid.Row="1"  Background="Aqua" Width="450" Height="600" Visibility="Collapsed" Navigated="browserNavigated"/>

Use the event code:


            private void browserNavigated(object sender, System.Windows.Navigation.NavigationEventArgs e)
            {

            }

In order to retrieve the verifier code from the URL we need a parser, which in this case is a method that is on the Hammock extensions library. Copy this code and add it to your project:


            // From Hammock.Extensions.StringExtensions.cs
            public static IDictionary<string, string> ParseQueryString(string query)
            {
                // [DC]: This method does not URL decode, and cannot handle decoded input
                if (query.StartsWith("?")) query = query.Substring(1);

                if (query.Equals(string.Empty))
                {
                    return new Dictionary<string, string>();
                }

                var parts = query.Split(new[] { '&' });

                return parts.Select(
                    part => part.Split(new[] { '=' })).ToDictionary(
                        pair => pair[0], pair => pair[1]
                    );
            }

With this method we can go and get the verifier code on the browserNavigated event method:


            private void browserNavigated(object sender, System.Windows.Navigation.NavigationEventArgs e)
            {
                if (e.Uri.AbsoluteUri.Contains("oauth_verifier"))
                {
                    var values = ParseQueryString(e.Uri.AbsoluteUri);
                    string verifier = values["oauth_verifier"];
                    //getTheAccessToken
                    Dispatcher.BeginInvoke(() => { Browser.Visibility = System.Windows.Visibility.Collapsed; });
                }
            }

Step 13: Processing the AccessToken

Just like with the RequestToken, we have to create a method that handles the result of the AccessToken request. Once we receive the result we must check for errors. If the request was done successfully, we then authenticate the user, and send the Tweet:


            private void processAccessToken(OAuthAccessToken token, TwitterResponse response)
            {
                if (token == null)
                    Dispatcher.BeginInvoke(() => { MessageBox.Show("Error obtaining Access token"); });
                else
                {
                    client.AuthenticateWith(token.Token, token.TokenSecret);
                    userAuthenticated = true;
                    //Send the Tweet, we will add this code later
                }
            }

With this completed, go to the browserNavigated method and change the getTheAccessToken comment with the following line:


          client.GetAccessToken(requestToken, verifier, processAccessToken);

Step 14: Handling a Tweet Response

When we send a Tweet we want to know if it was successfully sent. That's why we need another method to handle a Tweet. Here's the code that we need to add:


            private void tweetResponse(TwitterStatus tweet, TwitterResponse response)
            {
                if (response.StatusCode == HttpStatusCode.OK)
                    Dispatcher.BeginInvoke(() => { MessageBox.Show("Tweet posted successfully"); });
                else
                    Dispatcher.BeginInvoke(() => { MessageBox.Show("Error, please try again later"); });
            }

Finally, go and change the Send Tweet comment on the processAccessToken and tweetClick methods with the following line:


            Dispatcher.BeginInvoke(() => client.SendTweet(Message.Text, tweetResponse));

Step 15: Testing Your App

Right now your app should be completely functional, so go and test it. Enter any message click on the "Tweet" button and the following screen should appear.

After that, a message saying "Tweet posted successfully" should appear:

Tut-01

If you go to the Twitter account, you should also be able to see the Tweet you just sent:

Tut-00

Congratulations! You now have an app that can connect to Twitter! But we haven't finished yet. There are some areas we can improve.


Step 16: Saving the AccessToken

Every time a user opens your app, he will have to go through the Twitter login page. This is something users don't like. They want to register once and be able to Tweet without trouble. This problem is easy to solve. We need to save the AccessToken that we obtained the first time the user logs in. Once that is completed, it's saved on IsolatedStorage and will always be accessible. This can be done by using the following method:


            private void saveAccessToken(OAuthAccessToken token)
            {
                if (IsolatedStorageSettings.ApplicationSettings.Contains("accessToken"))
                    IsolatedStorageSettings.ApplicationSettings["accessToken"] = token;
                else
                    IsolatedStorageSettings.ApplicationSettings.Add("accessToken", token);

                IsolatedStorageSettings.ApplicationSettings.Save();
            }

And importing the IsolatedStorage library:


            using System.IO.IsolatedStorage;

Now we can save the obtained AccessToken from the processAccessToken method:


            private void processAccessToken(OAuthAccessToken token, TwitterResponse response)
            {
                if (token == null)
                    Dispatcher.BeginInvoke(() => { MessageBox.Show("Error obtaining Access token"); });
                else
                {
                    client.AuthenticateWith(token.Token, token.TokenSecret);
                    saveAccessToken(token);
                    userAuthenticated = true;
                    Dispatcher.BeginInvoke(() => client.SendTweet(Message.Text, tweetResponse));
                }
            }

Step 17: Retrieving the AccessToken

With the token already on IsolatedStorage, we need a method to retrieve it. Go ahead and add the following method:


            private OAuthAccessToken getAccessToken()
            {
                if (IsolatedStorageSettings.ApplicationSettings.Contains("accessToken"))
                    return IsolatedStorageSettings.ApplicationSettings["accessToken"] as OAuthAccessToken;
                else
                    return null;
            }

This function should be called from the constructor because we want to be logged in from the very beginning:


            // Constructor
            public MainPage()
            {
                InitializeComponent();
                client = new TwitterService(consumerKey, consumerSecret);

                //Chek if we already have the Autehntification data
                var token = getAccessToken();
                if (token != null)
                {
                    client.AuthenticateWith(token.Token, token.TokenSecret);
                    userAuthenticated = true;
                }
            }

Step 18: Checking Expired Tokens

Additionally take into account that the user may reject the permission of our app, so we need to detect this and ask for permission again. This detection should be done on our tweetResponse method, since that's where Twitter notifies you of any problem with your post. Change the code from tweetResponse to the following:


            private void tweetResponse(TwitterStatus tweet, TwitterResponse response)
            {
                if (response.StatusCode == HttpStatusCode.OK)
                {
                    Dispatcher.BeginInvoke(() => { MessageBox.Show("Tweet posted successfully"); });
                }
                else
                {
                    if (response.StatusCode == HttpStatusCode.Unauthorized)
                    {
                        saveAccessToken(null);
                        userAuthenticated = false;
                        Dispatcher.BeginInvoke(() => { MessageBox.Show("Authentication error"); });
                    }
                    else
                        Dispatcher.BeginInvoke(() => { MessageBox.Show("Error, please try again later"); });
                }
            }

Step 19: Modify the Back Button

One last feature to add to your app is to allow the user to close the browser if he wants to. Right now if the browser appears, the only way to close it is by logging in or with an error. You can give the user this option by using the back button:

            protected override void OnBackKeyPress(System.ComponentModel.CancelEventArgs e)
            {
                if (Browser.Visibility == System.Windows.Visibility.Visible)
                {
                    Browser.Visibility = System.Windows.Visibility.Collapsed;
                    e.Cancel = true;
                }
                base.OnBackKeyPress(e);
            }

Where to Go From Here

This tutorial is a short explanation of what you can do with Tweetsharp and Twitter. If you are interested in increasing the functionality of your app, like getting mentions, retweets, direct messages, and several other features, go to Tweetsharp's website and you will find everything that you need to start developing a great app. I hope you enjoyed this tutorial and that it will be useful for your future projects.

Related Posts
  • Code
    Android SDK
    Create a Music Player on Android: User Controls0d63m preview image@2x
    We are building a simple music player app for Android in this series. So far, we have presented a list of the songs on the device and allowed the user to make selections from it, starting playback using the MediaPlayer class in a Service class. In this final part of the series, we will let the user control playback, including skipping to the next and previous tracks, fast-forwarding, rewinding, playing, pausing, and seeking to particular points in the track. We will also display a notification during playback so that the user can jump back to the music player after using other apps.Read More…
  • Code
    Android SDK
    Using New Relic to Monitor Your Android AppGetting started new relic retina preview2
    In the last two years, New Relic has focused hard on building out a solution for monitoring the performance of mobile apps. In this tutorial, we will look at how you can start using New Relic to monitor the performance of an Android application.Read More…
  • Code
    Android SDK
    Create a Music Player on Android: Project Setup0d63m preview image@2x
    The Android platform provides resources for handling media playback, which your apps can use to create an interface between the user and their music files. In this tutorial series, we will create a basic music player application for Android. The app will present a list of songs on the user device, so that the user can select songs to play. The app will also present controls for interacting with playback and will continue playing when the user moves away from the app, with a notification displayed while playback elapses.Read More…
  • Code
    PHP
    Authentication With Laravel 4Laravel 4 auth retina preview
    Authentication is required for virtually any type of web application. In this tutorial, I'd like to show you how you can go about creating a small authentication application using Laravel 4. We'll start from the very beginning by creating our Laravel app using composer, creating the database, loading in the Twitter Bootstrap, creating a main layout, registering users, logging in and out, and protecting routes using filters. We've got a lot of code to cover, so let's get started!Read More…
  • Code
    iOS SDK
    Accessing Google Services Using the OAuth 2.0 ProtocolGoogle oauth@2x
    This tutorial will dive into implementing Google Services using the OAuth 2.0 protocol. Read on!Read More…
  • Code
    Windows Phone
    Windows Phone: Connecting with FacebookFacebook wp7
    In this tutorial, we will talk about how to interact with the Facebook API, and all the tools you need in order to connect with it. Specifically, the app that we are going to make will be able to connect with the user's Facebook account and update their status. Let’s get started!Read More…