About Web Intents

“Bring interactivity to Tweets that you display on the web with Web Intents.” ~ dev.twitter.com

The developers at Twitter have released code, called Web Intents, that will provide more interactivity for handling tweets that are used on other sites.

So now visitors can easily Tweet, Reply, Retweet, Favorite, and Follow without the hassle of leaving your site; using suitably-sized popup windows that handle the day-to-day functions of Twitter instead.

Web Intents is far easier to implement and there is no need for authorising a new app to have it running. What’s more – it is mobile friendly too!

Requirements

Minimal knowledge of HTML including the placement of one external JavaScript file.

Firstly, the Web Intents JavaScript:

<script type="text/javascript"
src="http://platform.twitter.com/widgets.js"
></script>

For some the above code will look familiar. Twitter’s widget.js is used for the popular Tweet Button (the custom code they give for placing your own button). So if you have already included the javascript in your HTML then you should have the full functionality of Web Intents as well.

For those that do not have it included you will have to place the above code between the tags of your page or within the tags.

The fun part: Creating functionality

Once you have placed the javascript within your page, you can then add the code for obtaining the functionality of the Tweet, Reply, Retweet, Favorite, and Follow buttons.

For the sake of simplicity, we will show the bare bones on how to create them.

A Simple Tweet Button/Link
Demo: Tweet A Page
Note: Remember to HTML encode the URL that you are pointing to.
Format: http://twitter.com/intent/tweet?url=Your-URL-Here
Example Code:

<a href="http://twitter.com/intent/tweet?url=http%3A%2F%2Fwww.rocketmill.co.uk%2F">Tweet A Page</a>

Reply to Tweet
Demo: Reply to Tweet
Note: Requires the original Tweet’s ID. You can also append other attributes such as Related.
Format: http://twitter.com/intent/tweet?in_reply_to=Tweet-ID-Here
Example Code:

<a href="http://twitter.com/intent/tweet?in_reply_to=54550641997119488&related=elevate_local">Reply to Tweet</a>

Retweet
Demo: Retweet a Tweet
Note: Requires the original Tweet’s ID.
Format: http://twitter.com/intent/retweet?tweet_id=Tweet-ID-Here
Example Code:

<a href="http://twitter.com/intent/retweet?tweet_id=54550641997119488">Retweet a Tweet</a>

Favorite a Tweet
Demo: Favorite
Note: Requires the original Tweet’s ID.
Format: http://twitter.com/intent/favorite?tweet_id=Tweet-ID-Here
Example Code:

<a href="http://twitter.com/intent/favorite?tweet_id=54550641997119488">Favorite</a>

Follow a User
Demo: Follow
Note: Requires Screen Name or User ID (User ID is recommended).
Format: http://twitter.com/intent/user?user_id=User-ID-Here
or http://twitter.com/intent/user?screen_name=Screen-Name-Here
Example Code:

<a href="http://twitter.com/intent/user?user_id=61295684">Follow</a>

You can find more examples and usages of using Twitter’s Web Intents at http://dev.twitter.com/pages/intents.