Official website for Web Designer - defining the internet through beautiful design
Author: Imagine Admin
6th March 2012

GO FOR IT – Part 3, Twitter

Get social and integrate the hottest networking services into your web-design projects, with a special look at Google+, Facebook and Twitter

GO FOR IT – Part 3, Twitter

This feature originally appeared in Web Designer issue 190, authored by Matt Gifford and Pete Simmons

Download the full code examples associated with this feature.

Web Intents

Twitter’s extensive API gives developers the ability to create intricate custom applications to interact with the services and all users, and a wide range of open-source libraries are freely available for pretty much any scripting language to get you up and running.

When dealing with user data and status updates from your own custom application, you must deal with authentication and security, which includes navigating the often mindblowing task of handling authentication through the OAuth protocol and dealing with access keys, tokens and user permissions.

For any users or developers who wish to provide a slightly more interactive application into their web applications or sites without having to run in circles dealing with these often confusing authentication issues, Twitter released Web Intents. This is a well-packaged set of functions which assists in integrating Twitter functionality without the need for keys and tokens, and can be set up once again with a few lines of code pasted into your site.

These functions are also mobile friendly so regardless of which device your visitor uses to enter your site, they can still use your Twitter features. The functions available include tweeting or replying to a tweet, retweeting or making a tweet a favourite, as well as ‘following’.

Implementing the Web Intents functionality into your site is once again incredibly easy to do with two simple steps. Firstly, you need to include the widget JavaScript file – the very same one used for the previous Twitter functions – and secondly you need to add your Web Intents action. The actions are simply links to specific URLs, which vary depending on the result you wish to achieve. Clicking on the link will display a pop-up window with the relevant call to action, which the user can then complete via your site.

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

<a href="””">Follow & Mini Profile</a>

<a href="””">Send a Tweet</a>

<a href="””">@Reply to a Tweet</a>

<a href="””">Retweet a Tweet</a>

<a href="””">Favourite a Tweet</a>

The simplicity of use and ease of development with these snippets removes any possible issues with integration for any developer. You can find out more by reading the full documentation for Web Intents here:

What’s happening?

Twitter has revolutionised the web since its launch in 2006. Certainly over the last few years its popularity has grown immensely as more and more people are using it for a wide variety of reasons – from promotional posts, help requests or support and marketing through to simply using it as a community-based environment to stay in touch with acquaintances.

The limited 140 characters means that information has to be concise and make the most of every space. Thanks to its well-structured architecture it is incredibly easy to follow members, retweet, reply to or bookmark an interesting tweet using the ability to mark as a ‘favourite’.

For users, Twitter is a great way to simply find and follow and connect with individuals or organisations of interest and keep track of any important posts or content they share with the world.

For web and creative professionals, Twitter can be a particularly important tool. It helps us stay in touch with our relevant online community members, lets us keep up to date with the latest news, demos, releases and technology trends, and provides us with
the ability to promote our services, work and anything else that we wish people to know about us and what we are up to. As such, gathering and keeping followers is the key to ensuring that we are speaking to the masses as opposed to a vacuum.

Pages: 1 2 3

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • Jake

      This has been a great 3-part series and a quick read at that. Thanks for sharing!

    • Theo

      In this tutorial the URL call (; with my twitter account name inserted) results in this error:

      {“errors”:[{"message":"Sorry, that page does not exist","code":34}]}

      And using the getJSON method only shows `Latest Tweet´ in my browser

      I would appreciate it if someone can tell me what’s wrong and how to fix it.

    • Theo

      In addition to my previous message:

      The alternative Javascript file that should produce Latest Tweets calls the xxx.json but when I look at the xxx.json I again see the error message:

      {“errors”:[{"message":"Sorry, that page does not exist","code":34}]}

    • xxx

      excellent put up, very informative. I ponder why the other specialists of this sector don’t realize this. You must proceed your writing. I am sure, you have a huge readers’ base already!