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!

Discussion (23)

  1. Swamykant
    Swamykant Jul. 13, 2011

    Cool. I will surely try this :)

  2. Yaaqub Mohamed(Yamo)
    Yaaqub Mohamed(Yamo) Jul. 08, 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
    Rahou Maachou Jul. 08, 2011

    Or is the benefit in all this seo

  4. Themelis Cuiper
    Themelis Cuiper Jul. 08, 2011

    Thanks Joost I am a fan

    Themelis Cuiper

  5. eins
    eins Jul. 08, 2011

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

  6. Junix
    Junix Jul. 07, 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
    Jerry lee Jul. 07, 2011

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

  8. Tony Payne
    Tony Payne Jul. 07, 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
      Dan Butcher Jul. 09, 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
      David Alexander Jul. 07, 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
        David Alexander Jul. 09, 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
        Dan Jul. 08, 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
    Gary Gardiner Jul. 07, 2011

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

  10. Haroun Kola
    Haroun Kola Jul. 07, 2011

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

  11. Mike
    Mike Jul. 07, 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
    Sharon J Jul. 07, 2011

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

  13. Dan
    Dan Jul. 07, 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
      Joost de Valk Jul. 10, 2011

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

      • Matt
        Matt Jul. 23, 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
        John W. Furst Jul. 12, 2011

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

    • John W. Furst
      John W. Furst Jul. 10, 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
    Bryan Hoffman Jul. 07, 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
    Luc De Brouwer Jul. 07, 2011

    I think that’s pretty cool

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