Using Twitter Web Intents on Your Website

Previously we looked into how to setup a our own Twitter application using the Twitter API. That method of Twitter integration was slightly complicated in that it required requesting and utilizing access keys and tokens and a basic understanding of at least one well-known scripting language. Twitter Web Intents is another option Twitter offers to integrate Twitter features into any website or application. It requires no prior authorization to use, no complicated keys or tokens and can be setup in less time than it takes to copy and paste a few lines of html.

Twitter Web Intents are great for adding Twitter functionality to plain text links or custom buttons to better match your website design. In addition, they are mobile friendly out-of-the-box and require very little programming experience to understand and customize.

Web Intents can be used to provide all of the basic Twitter functionality such as posting a tweet or reply, posting retweets, saving a tweet as a favorite, following a specific user (ie. you) and viewing your basic Twitter profile information. In order to use Web Intents, we must first include the javascript code necessary to load these functions into a web page by placing the following code in the head section of the page’s HTML (or at least directly before we intend to use it):

<script type="text/javascript" src=""></script>

An alternative method is provided to including this code so that the javascript may be copied directly into your website without having to be loaded externally from each time. Look for the Optimization section near the bottom of Twitter’s Web Intents page for the javascript code to implement this method.

We’ll need a little bit of server-side scripting to put together the URL and parameters needed to build links to point to your Twitter screen name and the URL of the page being tweeted. An example in PHP is included below:

$http		= $_SERVER['HTTPS'] = 'on' ? 'https://':'http://';
$url		= urlencode($http.$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI']);
$screen_name	= 'twAPIdev';  // use your Twitter screen name
$hashtags 	= "twitterapi,coding";  // comma separated list of hashtags (without #) to automatically be inserted into the tweet

Tweet This

The most basic usage allows you to add a Tweet This link or button to pages on your site. Clicking the link will pop up a small window allowing your readers to login to their Twitter account and tweet a comment and link back to your page. If you specify a comma separated list of keywords for the $hashtags variable (above), the tags will be automatically included in the body of the tweet. Users may choose to edit or remove these tags before posting the tweet, so they are more of a suggestion, but great for creating your own unique hashtags.

<a href="<?php echo $url; ?>&hashtags=<?php echo $hashtags; ?>">Tweet This</a>

To use an image in the link instead of the Tweet This text, simply replace Tweet This with a standard HTML image. Twitter also provides a list of their standard icons for your usage.

<img src="http://full-path-to-image.jpg" alt="Tweet This" border="0" />

Follow Me

Similarly, the link example below will incorporate a Follow Me button or link on the pages of your site. Clicking the link will pop up a window showing basic profile information and allow your readers to quickly follow your Twitter account without leaving your site.

<a href="<?php echo $screen_name; ?>">Follow Me</a>

Recommended articles