Skip to content

Web Intents from Twitter

7 July 2011 | 23 Comments | Tags ,

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:

[code lang=”html” light=”true”]<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>[/code]

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

[code lang=”html” light=”true”]<a href="https://twitter.com/intent/user?screen_name=yoast">Yoast</a>[/code]

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

[code lang=”html” light=”true”]<a href="http://twitter.com/intent/retweet?related=yoast&tweet_id=<ID>">[/code]

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

[code lang=”html” light=”true”]<a href="http://twitter.com/intent/tweet?related=yoast&in_reply_to=<ID>">[/code]

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?

Joost de Valk

Joost is an internet entrepreneur and the founder of Yoast. He has a long history in WordPress and digital marketing. On our blog, he has written a lot about SEO in general, technical SEO and important topics related to SEO.

Avatar of Joost de Valk

Coming up next!

23 Responses to Web Intents from Twitter

  1. Swamykant
    Swamykant  • 13 years ago

    Cool. I will surely try this :)

  2. Yaaqub Mohamed(Yamo)
    Yaaqub Mohamed(Yamo)  • 13 years ago

    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
    Rahou Maachou  • 13 years ago

    Or is the benefit in all this seo

  4. Themelis Cuiper
    Themelis Cuiper  • 13 years ago

    Thanks Joost I am a fan

    Themelis Cuiper

  5. eins
    eins  • 13 years ago

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

  6. Junix
    Junix  • 13 years ago

    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
    Jerry lee  • 13 years ago

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

  8. Tony Payne
    Tony Payne  • 13 years ago

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

    • Dan Butcher
      Dan Butcher  • 13 years ago

      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
      David Alexander  • 13 years ago

      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
        David Alexander  • 13 years ago

        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
        Dan  • 13 years ago

        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
    Gary Gardiner  • 13 years ago

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

  10. Haroun Kola
    Haroun Kola  • 13 years ago

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

  11. Mike
    Mike  • 13 years ago

    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
    Sharon J  • 13 years ago

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

  13. Dan
    Dan  • 13 years ago

    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
      ^  Post author
      Joost de Valk  • 13 years ago

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

      • Matt
        Matt  • 13 years ago

        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
        John W. Furst  • 13 years ago

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

    • John W. Furst
      John W. Furst  • 13 years ago

      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
    Bryan Hoffman  • 13 years ago

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

  15. Luc De Brouwer
    Luc De Brouwer  • 13 years ago

    I think that’s pretty cool

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