Loading Jaywing website
3 May 2011 / Opinion

How to use Twitter's Web Intents

Rose Mountague

Twitter released an awesome new service in late March by the name of Web Intents. With it, you can turn your website in to a light Twitter client where users can Tweet, Reply, Retweet, Favourite and Follow through optimised pop-up windows. The advantages to this allow users to quickly and easily do all of the above without leaving your website or having to authorising a new application.

How do I implement it?

What’s more Twitter have made the implementation of this feature an absolute breeze so even the most novice of developers can add Web Intents to their website or blog. The two parts (yes, just two) includes a Javascript file call and then a simple task of using a link.

Here’s how in those two easy steps:

Step 1 – The (hardest) easy bit Step one is adding the Javascript to allow the Web Intents actions (the tweets, replies, follows etc) open in the pop-up window. This is recommended but not actually required. Just remember, the pop-up window will make sure the user stays on your website. Simply add this Javascript reference to your page before any of the Web Intents actions: <script src=”http://platform.twitter.com/widgets.js” type=”text/javascript”></script> It’s up to you where you add this, whether it is in the “head” section of your HTML or just above your Web Intents actions. The key thing is that the above code must appear BEFORE any of the web intents actions.

Step 2 – The (really) easy bit The next step is to add the Web Intents actions. These actions are simply a link to a specific URL. These will vary dependent on the action you wish to use. The result of clicking on the link is a new pop-up window with the relevant call to action (See our live examples lower down in the post). The code for each with a brief explanation can be found below: Follow & Mini Profile: <a href=”http://twitter.com/intent/user?screen_name=alwaysmikegomez”>Follow Me!</a> By using the above code you will be presented with a mini profile and the option to follow your selected user. After “screen_name=” type in the users Twitter username in order to display the correct mini profile. Tweet: <a href=”http://twitter.com/intent/tweet”>Send your own message</a> This code pops up a window allowing the user to send out a normal tweet. @Reply: <a href=”http://twitter.com/intent/tweet?in_reply_to=62862594515546112”>Reply to a Tweet</a> The above code will pop-up a window allowing the viewer to reply to a specific user and message. Replace the number at the end with the ID of your own tweet. To find this, click on the time the tweet was sent in Twitter – usually display as “10 minutes ago” or “Apr 20”. Retweet: <a href=”http://twitter.com/intent/retweet?tweet_id=62862594515546112”>Retweet a Tweet</a> Will let a user retweet your tweet! Change the number in order to change the message intended for retweeting. Favourite: <a href=”http://twitter.com/intent/favorite?tweet_id=62862594515546112”>Favourite a Tweet</a> This link will allow a user to set a tweet as a favourite for quick reference.

Web Intents in Action

Click on the links below for an example of how they work! Follow & Mini Profile Send a Tweet @Reply to a Tweet Retweet a Tweet Favourite a Tweet

How can it be used?

The obvious advantage of this is your website can become a much more interactive and engaging platform for users of Twitter. What’s more you won’t have to worry about users navigating away from your website. In addition to your blog, you may even want to expand a discussion to Twitter. The above is a basic example and I’m sure those more accustomed to using API’s will create amazing and imaginative applications. I’d love to hear your thoughts on Twitter Web Intents and if you’ve already seen some good examples! For further information have a look at our social media services based in Leeds for help with engagement strategies and influencer targeting.