Add an image URL to Twitter from Internet Explorer programmatically

In today’s post I’ll demonstrate how to write an Internet Explorer add-in to add an image url to a Twitter message. I’ll be using Add-in Express for Internet Explorer.

Creating an Internet Explorer add-on

Start by creating a new ADX IE Add-on project in Visual Studio 2010. You will find it under Other Project Types > Extensibility.

Select your programming language of choice and which Interop assemblies to use, in this example, we’ll use Visual C# and version-neutral interop assemblies.

Complete the wizard and make sure you have the IEModule designer open. If it is not open, you can open it by double-clicking on the IEModule.cs file in the Solution Explorer. Click on the ellipses(…) button next to the ContextMenu property in the Properties window.

Add a Menu Item by clicking on the Menu Item button in the toolbar.

Change its Caption property to Tweet this Pic and the Description property to Insert this image url in a new tweet. Next, and very important is to set the Contexts property to Images, this will ensure that our new menu item will only show when the user right clicks on an image in Internet Explorer. You can further refine this by setting the ExtendedContexts property, but for this example we’ll keep it as is.

Before you run your project to see if the context menu works, you need to change the start action of your project. Do this by right-clicking your project in the Solution Explorer and select Properties from the context menu. Click on the Debug tab and enter or select the path to Internet Explorer in the Start external program textbox. You would also need to add a website address in the Command line arguments textbox.

Once you have done this, build, register and run your project. You’ll notice that when you right-click on an image the Tweet this Pic menu item will appear.

Twitter Integration

Our Internet Explorer add-in is working fine, let’s add the Twitter integration now. Before you can use the Twitter API, you need to create or register an app. Do this by visiting the Twitter developer site at https://dev.twitter.com/. Once you’ve added your app, make sure the Access is set to Read and Write.

Next, we need to write some code to integrate with Twitter. We’ll use an open-source library called TweetSharp. To get all the necessary references into our project we’ll use NuGet, which is a Visual Studio extension that makes it easy to install open source libraries and tools. If you haven’t installed it yet, I highly recommend it. Search for TweetSharp using NuGet and follow installation prompts.

Now that we have all the necessary libraries installed, let’s write some code. Before our user can use our add-in they need to give it permission to post messages via their Twitter account.

Create an event handler for the IEModule’s OnConnect event by double-clicking next to its name in the properties window. Add the following code:

private void IEModule_OnConnect(object sender, int threadId)
{
    if (!Properties.Settings.Default.HasPermission)
    {
        if (MessageBox.Show(this,
			"You have not given TweetPic permission to send messages via your " +
			"Twitter account, would you like to do that now?",
            "Permission needed", MessageBoxButtons.YesNo) == DialogResult.Yes)
        {
 
            TwitterClientInfo twitterClientInfo = new TwitterClientInfo();
            twitterClientInfo.ConsumerKey = Properties.Settings.Default.ConsumerKey;
            twitterClientInfo.ConsumerSecret = Properties.Settings.Default.ConsumerSecret;
 
            twitterService = new TwitterService(twitterClientInfo);
            requestToken = twitterService.GetRequestToken();
            Uri authUrl = twitterService.GetAuthorizationUri(requestToken);
            Process.Start(authUrl.AbsoluteUri);
 
            using (frmPin pinForm = new frmPin())
            {
                if (pinForm.ShowDialog(this) == DialogResult.OK)
                {
                    OAuthAccessToken accessToken =
						twitterService.GetAccessToken(requestToken, pinForm.Pin);
                    Properties.Settings.Default.AccessToken = accessToken.Token;
                    Properties.Settings.Default.AccessTokenSecret = accessToken.TokenSecret;                           
                }
            }
        }
        Properties.Settings.Default.HasPermission = true;
        Properties.Settings.Default.Save();
    }
}

The code will check whether the user has already given permission to our add-in to access their Twitter account, if not we’ll prompt them to enter a pin to do so. They will then be taken to a website where they need to login with their Twitter account.

Once, they’re logged in they will see a unique pin number.

They’ll need to enter this number in the form we’ve displayed prompting them for the pin. We’ll save all the necessary security tokens in our add-ins’ config file. It is a good idea to encrypt this file.

Finally we need to write the code that will send the images’ url to Twitter. Add an event handler to our menu item’s OnClick event and add the following code to it:

private void tweetPicContextMenu_OnClick(object sender, object htmlElement)
{
    mshtml.HTMLImgClass img = (mshtml.HTMLImgClass)htmlElement;
 
    TwitterClientInfo twitterClientInfo = new TwitterClientInfo();
    twitterClientInfo.ConsumerKey = Properties.Settings.Default.ConsumerKey;
    twitterClientInfo.ConsumerSecret = Properties.Settings.Default.ConsumerSecret;
 
    twitterService = new TwitterService(twitterClientInfo);
    twitterService.AuthenticateWith(Properties.Settings.Default.AccessToken,
		Properties.Settings.Default.AccessTokenSecret);
    TwitterStatus status = twitterService.SendTweet("Check this Out - " + img.href);
}

If all went well, you should see your latest tweet with the image url.

Thank you for reading. Until next time, keep coding! …And follow us on Twitter :)

Available downloads:

This sample add-on was developed using Add-in Express for Internet Explorer:
Sample IE add-on in C#