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?

Tags:


Yoast.com runs on the Genesis Framework

Genesis theme frameworkThe Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides you with the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Read our Genesis review or get Genesis now!

23 Responses

  1. Luc De BrouwerBy 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 ;)

  2. Bryan HoffmanBy 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!

  3. DanBy 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.

    • John W. FurstBy 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?)

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

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

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

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

      • MattBy 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.

  4. Sharon JBy Sharon J on 7 July, 2011

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

  5. MikeBy 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

  6. Haroun KolaBy Haroun Kola on 7 July, 2011

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

  7. Gary GardinerBy Gary Gardiner on 7 July, 2011

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

  8. Tony PayneBy 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?

    • David AlexanderBy 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.

      • DanBy 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.

      • David AlexanderBy 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 ButcherBy 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.

  9. Jerry leeBy Jerry lee on 7 July, 2011

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

  10. JunixBy 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!

  11. einsBy eins on 8 July, 2011

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

  12. Themelis CuiperBy Themelis Cuiper on 8 July, 2011

    Thanks Joost I am a fan

    Themelis Cuiper

  13. Rahou MaachouBy Rahou Maachou on 8 July, 2011

    Or is the benefit in all this seo

  14. 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.

  15. SwamykantBy Swamykant on 13 July, 2011

    Cool. I will surely try this :)