Web Intents from Twitter

At the end of March Twitter released a cool new feature called “Web Intents”. I didn’t really see the value of it till recently, but I’ve now started using it way more. When you have a Tweet button on your site, you’re already using the Web Intents API, but you can do way more cool things. Check out the Twitter integration on the top left of this site, which looks like this:

Web Intents Twitter integration

There are three things in that integration that should catch your eye. If you click on “Yoast”, that’s what Twitter calls a “follow intent”. So when you click on that link, Twitter generates a popup that looks like this:

Follow Intent - Web IntentsI think that’s pretty cool. You’re welcome to disagree, of course, but then you might as well stop reading now. Twitter generates similar popups when you click on the retweet and reply buttons, right behind the text of the tweet.

How to create Web Intents

Creating these Web Intents is hilariously easy. You need the normal JS library that you have for the follow and tweet buttons, so there’s no need to include anything else. Here it is:

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

Then, a “follow intent” link, is crafted as easily as this:

<a href="https://twitter.com/intent/user?screen_name=yoast">Yoast</a>

That’s easy right? That’s all you need to do. Let’s check the other web intents, starting with the retweet intent:

<a href="http://twitter.com/intent/retweet?related=yoast&tweet_id=<ID>">

All you have to do is replace the <ID> with the tweet to be retweeted. A reply intent is crafted just as easily:

<a href="http://twitter.com/intent/tweet?related=yoast&in_reply_to=<ID>">

There’s no need to use extra JavaScripts, write extra code, nothing. Feel free to just use this in your theme, your posts, wherever and Twitter’s script will change it for you. In their documentation for Web Intents, Twitter provides you with images to use as well, which I’m using too, as you can see.

Now I’d like to hear from you! Do you have creative ways of using Web Intents?


23 Responses to Web Intents from Twitter

  1. Swamykant
    By Swamykant on 13 July, 2011

    Cool. I will surely try this :)

  2. Yaaqub Mohamed(Yamo)
    By Yaaqub Mohamed(Yamo) on 8 July, 2011

    Great article. This could increase the follows for any twitter user. I could think of using it on the sidebar! :)

    Thanks for sharing this ingo.

  3. Rahou Maachou
    By Rahou Maachou on 8 July, 2011

    Or is the benefit in all this seo

  4. Themelis Cuiper
    By Themelis Cuiper on 8 July, 2011

    Thanks Joost I am a fan

    Themelis Cuiper

  5. eins
    By eins on 8 July, 2011

    Thanks for the tips…gonna try on some of my site

  6. Junix
    By Junix on 7 July, 2011

    The function is really cool, except for the having it on a popup though. Wish twitter would give us a way to have it in a lightbox/ajax alternative though. It would be very neat!

  7. Jerry lee
    By Jerry lee on 7 July, 2011

    Once again, you have pointed out an awesome function of WordPress. I am going to use it immediately!

  8. Tony Payne
    By Tony Payne on 7 July, 2011

    Very cool, but I agree with Dan, how do you get the actual tweet to display? Surely it’s not hard coded?

    • Dan Butcher
      By Dan Butcher on 9 July, 2011

      I would really like to see the code that was put into the theme to produce what’s here–I’m still enough of a noob with php that getting snippets here and there leads me to a big mess and syntax errors.

    • David Alexander
      By David Alexander on 7 July, 2011

      Yes it is hardcoded. I’ve been working with twitter intents for the past few days, oddly enough, and all evidence points to that. It is possible to make a wordpress plugin to make it easier to edit the intents, but I find it easy enough to insert the anchor on its own.

      What the JavaScript does is searches for all anchors linking to the twitter widget.js, then modifies the content within that anchor to display the the tweet/follow intent.

      • David Alexander
        By David Alexander on 9 July, 2011

        I stand corrected. In my defense I responded from my phone. See below:

        “widget.js” ACTUALLY looks for any twitter link to “http://twitter.com/intent/*” where * is any file or folder. Once it finds something, it transforms it accordingly, whether that be the user or whatever you’re intending (yes I meant it that way). Twitter just makes it easier to use their API, or “intents”, by requiring an anchor linking to presumably the same function if javascript isn’t active. Pretty fantastic engineering, if you ask me.

      • Dan
        By Dan on 8 July, 2011

        Tony, I got the tweet to display using this guide, but I don’t know how to get the id of that tweet into the Intents anchors.

  9. Gary Gardiner
    By Gary Gardiner on 7 July, 2011

    Wondering how this might apply to SEO and whether or not it might be a slight benefit.

  10. Haroun Kola
    By Haroun Kola on 7 July, 2011

    Very cool! I like it too and am going to check it out some more!

  11. Mike
    By Mike on 7 July, 2011

    Dan, i am in the same boat as you. Implemented all the code mentioned and i get this http://HoneyTrek.com – Maybe Joost made some assumptions about things we should already know….hmmmm

  12. Sharon J
    By Sharon J on 7 July, 2011

    This is very cool. Why is the rel “no follow” ?

  13. Dan
    By Dan on 7 July, 2011

    Very cool, but how do you get the actual tweet to display, and how do you get the tweet ID to use in the intent buttons? Tell me it’s just as simple.

    • Joost de Valk
      By Joost de Valk on 10 July, 2011

      It’s PHP indeed, I’ll share that some other time :)

      • Matt
        By Matt on 23 July, 2011

        Yes, please share how to get the tweet to show up. The only method I’ve been able to get to work is to use the old blogger.js script. I’d like to be able to use the newer method by parsing the json file.

      • John W. Furst
        By John W. Furst on 12 July, 2011

        Thanks for the thumbs up, Joost.
        I appreciate that.

    • John W. Furst
      By John W. Furst on 10 July, 2011

      Same question!

      If I look at your source I see the tweet ID hard-coded into the HTML. Where does it come from?

      (Eventually by using PHP and retrieving the ID of the last tweet via the Twitter API?)

  14. Bryan Hoffman
    By Bryan Hoffman on 7 July, 2011

    Thanks for pointing this out, Joost; I wasn’t aware of this feature. Better go read up on that documentation!

  15. Luc De Brouwer
    By Luc De Brouwer on 7 July, 2011

    I think that’s pretty cool

    Same thing here, although I think it’s cooler that I’m mentioned in the screenshot ;)


Check out our must read articles about Analytics