As a developer I like to spend time experimenting with other systems and their APIs (Application Programming Interface) to see what I can come up with.
Of course, the more popular the system the more I’m compelled to share my thoughts and experience with you guys. One of the not-so-recent updates (in March, but with how fast technology is these days a few months is a “long time”) was with Twitter and their new Web Intents system that boasted the ability to add even more functionality to websites and blogs.
I’ve been so busy that I’ve been unable to actually dive in – but last night I had a few moments of downtime to explore it a bit and so far I’m liking what I see! What is it exactly?
Web Intents provide popup-optimized flows for working with Tweets & Twitter Users: Tweet, Reply, Retweet, Favorite, and Follow.
They make it possible for users to interact with Twitter content in the context of your site, without leaving the page or having to authorize a new app just for the interaction.
Web intents are mobile friendly, and super easy to implement.
Sounds good to me, right? You can do some pretty insane stuff and add some very in-depth functionality to your blog if you’d like – just spend some time in their documentation and you’ll find all that you need!
But here’s one very simple implementation that you can try today to get started:
Wouldn’t it be cool to be able to have a new user who visited your blog follow you or even begin to engage with you via Twitter without ever having to leave your blog?
I’ve done just that by updating my Twitter button link in the top of my blog slightly – go ahead and click it to try!
Yeah, click that Twitter button...!
Instead of shooting you to Twitter and breaking the core blog experience by jumping to a new page you’ll instead see the popup in the first image above.
Neat, right?
It was quite simple to do – just make sure that you have this js file in your site (in your header perhaps):
1 | <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> |
And then just change your Twitter link to the following:
1 | <a href="https://twitter.com/intent/user?screen_name=TENTBLOGGER">TENTBLOGGER</a> |
Of course, you change out the TENTBLOGGER to your username. You can, of course, use the “img” tag instead if you’re using some sort of iconography.
Sidenote: If you’re using Standard Theme then you already will have Twitter’s js in your system so you don’t have to add it again.
Let me know your thoughts! There’s a lot available with Twitter’s Web Intents system so you could go wild with it – but start simple why don’t you?
I’m using the official twitter follow button which changes to “you are following tentblogger” if you are. I put it on my header instead of the blog description line.
You should also blog about the google+ add to circles widget that I’m using in my sidebar. Works without leaving the blog too
Perhaps you can take a look at the code, I’d love some custom CSS but I don’t know anything about coding hehe.
Thanks for the tip!
Alejandro
Alejandro, I was looking to add the same buttons (twitter follow and google+). Think you (or John) could help a guy out? Point me in the right direction.
Hey Daniel…. check this out http://blog.hubze.com/2011/add-your-google-profile-to-your-wordpress-site/
I think this is the widget that Alejandro used.
Nice, Alejandro! Is this something I could steal for my blog? …
hey Melanie.. check this out: http://blog.hubze.com/2011/add-your-google-profile-to-your-wordpress-site/
Thanks Jon! Very nice!
I’m thinking I’ll wait to implement this until they enable G+ business pages… I’d rather link my site to a business profile page. But this is definitely awesome and I know lots of folks who would use it.
yes, this would be pretty cool!
When I click your Twitter icon, I get two windows pop up. Weird. Very cool though!
P.S. I’m on a PC using Chrome.
I get the same on Safari.
Yeah, I get the same thing. Firefox 5, PC.
herb…. fixed.
It’s fixed on the rest of the site, but for some reason, on this page, it still opens to windows… cache?
looking into it.
same thing. but on Chrome for Mac
thanks! fixed.
fixed.
Very cool resource. Thanks for sharing!
BTW, I’m having the same issue as Tony with the two popups. Coincidentally, I, too, am using a PC with Chrome browser.
thanks tom. fixed!
Awesome. I have been longing and dreaming for more Twitter integration for a long time.
I would love to see blog comments and Twitter “interact” more meaningfully. If I post a comment, I should have an option to “Tweet” a portion of it, and if someone says something about a blog post of mine on Twitter, I would like the comment to appear on my blog.
One of these days….
there are a few plugins which make an attempt to do this.
Very cool! I’d like to add that if you’re using Standard Theme (and you should) go to the “sharing options” tab in theme options, and when you enter your Twitter URL start with “intent/user?…” Otherwise Standard Theme will try to append the first part of Twitter’s URL twice in the link and it won’t work that way.
thanks dan!
John,
Do you mind if I share code here for anyone else using Standard Theme so they can do this as well?
In socialnetworking.php file (found under Appearance > Editor) replace the following:
with this:
Or Dan’s method above sounds like it might be simpler… ha!
thanks jeremy
I had it on my website but got rid of it due to heavy load times from the twitter javascript.
Maybe once I get more of a following.
Yeah, I was running into that as well. Cool feature, but adds more overhead than I would like on the page. Cool feature though.
surprised as well…
i’m surprised you experienced heavy load times… haven’t you optimized your blog?
Better than a pop-up, it would be neat if the Twitter icon had a “drop down” effect with the same info. Like a tip bubble, almost.
that would be sweet.
I like it!
This may have only happened for me, but when I clicked your Twitter link it opened up twice. Did you want it to do that?
alex, this is fixed.
this just happened to me too, so i don’t know that it is fixed
probably caching?
Please excuse my ignorance, but is this tip just for WordPress or does it apply to Blogger as well?
you can do this on blogger i believe…
John, forgive me for being a little slow, but I’m failing to understand… exactly where to do i change what? I’m using Standard Theme and i don’t seem to understand your instructions or other instructions in the comments either…. please help
do you have support forum access?
yes, going there to check…