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:
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:
I 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?
Coming up next!
-
Event
Pubcon October 2024
October 14 - 16, 2024 Team Yoast is at Speaking, Sponsoring Pubcon October 2024! Click through to see who will be there, what we will do, and more! See where you can find us next » -
SEO webinar
Webinar: How to start with SEO (October 24, 2024)
24 October 2024 Learn how to start your SEO journey the right way with our free webinar. Get practical tips and answers to all your questions in the live Q&A! All Yoast SEO webinars »
Cool. I will surely try this :)
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.
Or is the benefit in all this seo
Thanks Joost I am a fan
Themelis Cuiper
Thanks for the tips…gonna try on some of my site
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!
Once again, you have pointed out an awesome function of WordPress. I am going to use it immediately!
Very cool, but I agree with Dan, how do you get the actual tweet to display? Surely it’s not hard coded?
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.
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.
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.
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.
Wondering how this might apply to SEO and whether or not it might be a slight benefit.
Very cool! I like it too and am going to check it out some more!
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
This is very cool. Why is the rel “no follow” ?
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.
It’s PHP indeed, I’ll share that some other time :)
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.
Thanks for the thumbs up, Joost.
I appreciate that.
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?)
Thanks for pointing this out, Joost; I wasn’t aware of this feature. Better go read up on that documentation!
I think that’s pretty cool
Same thing here, although I think it’s cooler that I’m mentioned in the screenshot ;)