Twitter launched it’s @anywhere platform not too long ago. This new platform integrates twitter into your site with a few lines of JavaScript. It allows for more tweets, more traffic, more follows, more engagement, more users, and more insight. You can now embed a tweet box on your site where people can directly tweet from your site. It also converts all twitter usernames to a link (@wpbeginner). If you enable the hovercard option, then users will see a hover box with a follow button and user information. You can also create connect with twitter buttons, follow @wpbeginner on twitter buttons and much more. We think this new platform will play a huge part in the future of web as twitter grows. In this article, we will share how you can add some elements of Twitter’s anywhere platform on your WordPress blog.
Update: Twitter is turning off @anywhere API on Dec. 6th, 2012. Here is more details.
Step 1: Registering an API
Before you can add the anywhere platform on your site, you need to register an API. You will be prompted to a page which would look like this:
Once you register, you should receive an API key. Next thing you want to make sure is that the permission level is set to Read and Write, otherwise users would not be able to click the follow button. This is a glitch with twitter, but they are working on it to fix this. But to stay on the safe side, we will provide the directions on how to do this.
First click on the link http://twitter.com/oauth. On this page, you will see the application that you registered. Click on your application’s name, and it should take you to the application details page. There is a button called “Edit Application Settings”. Click on this button to go to the edit page where you will need to scroll down to the item labeled “Default Access type”. Change this to “Read & Write”.
Step 2: Implementing it on your site
Because there are numerous features in the anywhere platform, we will explain each of them one by one. First thing you need to do is call the main JavaScript. Twitter recommends that you place this script in your header.php file (<head>In between these two codes </head>).
<script src="http://platform.twitter.com/anywhere.js?id=YourAPIKey&v=1" type="text/javascript"></script>
Remember to add your API key where it says YourAPIKey in the link.
Now lets take a look at the individual features this platform can do for you.
Auto-Link all Twitter usernames
This function will auto-link all twitter usernames on your posts and comments. If you mention a twitter username in this format: @wpbeginner << It will automatically be linked to the appropriate twitter account. This can save you a lot of time if you write posts with mentions to twitter users. To add this feature, you simply paste the following code in your site's header, after the main script. [php] <script type="text/javascript"> twttr.anywhere(onAnywhereLoad); function onAnywhereLoad(twitter) { twitter.linkifyUsers(); }; </script> [/php] This will link all twitter usernames mentioned in your body tag excluding the links, scripts, iframes, text area, title tags, and other buttons.
Auto-Link all Twitter usernames with a Hovercard
This feature auto-links all twitter usernames found on the page, and it also provides a hovercard on a mouseover effect. So when your site’s user bring the mouse over to a username like @wpbeginner they will see a hoverbox like shown in the example above. If they click the follow button, then they can directly follow the user from your website. To enable this function, simply paste the following code in your site’s header below the main script.
<script type="text/javascript"> twttr.anywhere(onAnywhereLoad); function onAnywhereLoad(twitter) { twitter.hovercards(); }; </script>
Smart Follow Buttons for Twitter
Smart follow button lets your user follow your account directly from your site. You can create buttons for your site and use them in your post or anywhere else. See the live example below:
To add this type of button your site, first paste the following code in your site’s header below the main script:
<script type="text/javascript"> twttr.anywhere(onAnywhereLoad); function onAnywhereLoad(twitter) { twitter('#follow-wpbeginner').followButton("wpbeginner"); }; </script>
Second, you need to add the following div tag where you want this button to show:
<div id="follow-wpbeginner"></div>
Remember to change wpbeginner to your username otherwise it will show a follow link to our twitter account.
Live Tweet Box on your site
You can create a tweet box on your site which will allow users to directly tweet from your site without ever going on twitter. An example of this box can be seen below: (Remember if you click tweet, it will tweet).
Try tweeting from the live box above to see how cool it is. We would really appreciate if you tweet the default content, so it helps us
Well as you can see that this live tweet box is really powerful. You can even add Retweet text in there if you want with slight customization. To add a live tweet box on your site, first paste the following code in your site’s header after the main script:
<script type="text/javascript"> twttr.anywhere(onAnywhereLoad); function onAnywhereLoad(twitter) { twitter("#custom-tweetbox").tweetBox({ label: "Live Tweet Box:", defaultContent: "Everyone should follow @wpbeginner for awesome #WordPress tips", height: 50, width: 480, }); }; </script>
Then add the following code where you want to display the live tweet box:
<div id="custom-tweetbox"></div>
We see that there are already few plugins in the WordPress plugin directory that lets you use the basic features such as hover card, or auto-link. You can use those plugins if you want, but this is something so simple that you are better of placing the codes manually.
If you liked this article then please retweet it. If we missed anything then please let us know in the comments.
Additional Resource:
Twitter Anywhere Documentation
Simple Twitter Connect Plugin (Great plugin by a supportive author – Thanks Otto)
Twitter will turn off @Anywhere on December 6th, 2012, check this: https://dev.twitter.com/blog/sunsetting-anywhere
Hi all,
Probably I have a basic question but I don’t find solution for issue that I meet.
I’m using retweet-anywhere WP pluggin and I open TweetBox whe I click on a link in using this code <a target=”_blank” href=”” title=”Retweeter ce message” rev=”RT ‘.$tweets15[$i].’ (via @’.$tweets2[$i].’)”>Retweeter</a>
When I click on “Tweet” button in the opened dialogbox after changing the texte it works well if I’m already Logged in Twitter thru https://oauth.twitter.com/2/authorize.
My issue is if the elapsed time of 2 hours is reached when I clikc on “Tweet” button the call of https://oauth.twitter.com/2/authorize.?…. is openned in the current windows and not in popup so even if the redirection is good I loose information in my application. Is that possible to force the call of https://oauth.twitter.com/2/authorize.https://oauth.twitter.com/2/authorize?… in a popup in that case?
many thank for your help.
Joel.
Help me I cannot make hovercard work. I`m using a plugin called simple twitter widget for display my recent tweets. I paste the code above but It doesn`t work. Could someone give me some advice?
Nice tut, that people must to know ! I found this post to be an effectual informative article !
Useful for me at this time : ) Thanks for your sharing your tips . . . !
Great WordPress/Twitter tip! Thanks!
I’ve been looking for this kind of twitter button and I’m just glad I’ve found it here. You made my blogging life so simple. Thanks a lot!
Thanks It was a Nice Post. I was looking to add Twitter Button on a Specific Location. Thanks for This Post.
Good job… I like this a lot. Your article made this so much easier than others I have seen. Thank you. @kquandry of kquandry.com
Great article, I am looking for it last few days, thanks
Great post with great info. It doesn’t look all that easy … but I’ve bookmarked this page and look forward to giving it a try ASAP.
Does anyone know of a free downloadable plugin that does the same thing?
Thanks.
Really great article. Thanks for sharing.
But… I’m trying to implement Live Tweet Box on my site and it doesn’t work. I have registered API, enter the JS code in my header and when I’m trying to add the live box in my post it doesn’t show up.
That’s weird… have you specified the right Div ids?
Yes, I was and I’m pretty sure… but it showed after few hours :). Thanks for the great tips and keep up the good work.
Is Twitter Anywhere down currently? It doesn’t work on my site and it seems not to work on yours either. do you know anything about it?
Yup they were experiencing downtime.
Hey its very useful. I am on my way to make to make unique social share for my blog. Thanks for sharing.
I am happy with this plugin, no need to edit codings with it
http://wordpress.org/extend/plugins/add-twitter-anywhere/
Hey this is really ver cool and interesting article.
That live tweet box is really nice.
Gr8 article on Twitter @Anywhere……. I have tested it, it works fine and definitely gone use this very soon.
Thanks,
@praveenkrg
This tutorial is a nearly exact replication of the post at Nettuts.
http://tinyurl.com/27gplh8
Actually its the exact opposite in this case. Nettuts’ article is the exact copy of ours. We published and tweeted our article on April 19th and Nettuts published their article on April 22nd.
Here is our tweet as a proof: http://twitter.com/wpbeginner/status/12456116742 (Next time check your facts before the accusation)
Curious if there’s any way to preload the Live Tweet Box with a link to the post that it’s on? So default text would be something like “Currently reading: *link to post*” and all they have to do is hit TWEET
Yes, search our plugins category for the plugin called Retweet Anywhere and you will find the answer
Badass tutorial WP dudes.
I followed this post step by step and now have REAL apps integrated…I’m excited.
Thanks again for this post.
rock on.
Zack Covell
(Astoria, Oregon)
Thank you for this tutorial! It waws really useful

I have succesfully placed a tweet box at my site but now I have a question; how can I make it show a short url automatically? You know, Twitter does the bit.ly thing AFTER sending the tweet, not before… I’ve tried some bit.ly plugins but no use, their short codes don’t work
You need to use the bit.ly API to make it work, or you can look at a plugin called Retweet Anywhere that we mentioned on our site.
Great Stuff!!! Explained very well. Simple to implement. Thanks a lot.
Hey Guys, your tuts are awesome! Already retweeted this tut and applied it to my blog. THX SO MUCH!
I didn’t know that. Thanks a lot.
Thank you for the tips! =)
Am trying to get it to work on my website, so far I have no success yet. Not sure why. I put in the code and replace the API key put the hovercards code but nothing appeared on my website. =( Will continue to test
Just went on your site: askaaronlee.com << Brought the mouseover to the link and it seemed to be working
You are fantastic. Thanks so much for this!
Awesome tip, pal! BTW, what’s the retweet/FB/digg plugin you use?
Yan
It is our Smart Sharing Plugin. Do a quick search on our site, and you will be able to find a download page. It’s free.
Anyone figure out a way to get the_permalink for single post pages into the tweet box to use it for RTs?
Wow! This is really cool idea. Thanks for sharing.

Great post. To get the hovercard by mouseover picture event instead of mouseover text, we can try this.
http://www.askabouthugo.com/general/twitter-anywhere-for-wordpress-plugins-mouseover-picture-even/
enjoy! @hugophang
I will add this script. Thanks for the tutorial.
Awesome tutorial on Twitter Anywhere. Thanks
Great stuff here!
Thanks a lot!
Wow! Those are some pretty neat features Twitter has going. REally impressed with them.
On behalf of the @anywhere team — thanks! We’re revving on the API to give developers more customizability. Stay tuned.
– Dustin ( @ded )
Thank you Dustin @ded for coming out here and taking your time to reply
Would really like to see more control over css and stying of the follow button and the live tweet box
We have an approach to this that I think you’ll like. Hang tight.
A lot of this is made simpler with the use of plugins.
http://wordpress.org/extend/plugins/simple-twitter-connect/
Fantastic Stuff Syed, You and your team are awesome. You guys are killing it!
~Keep it up bro~
Very cool. You should check out my plugin I created for this.
It makes implementing @Anywhere into WordPress easy as pie!
@Anywhere plugin for WordPress.
I’ve created a simple and easy to use setting page to control the script.
Thank you Austin for the plugin. We did review it when we were writing this article, but the reason why we did not include it was because it was not added in the repository yet.
Sweet stuff Syed! This is a nice unobtrusive way to add some additional functionality.
Have you found that they’d improved their performance from say 9 months to a year ago? I’d tried the Twitter feed some time back and found that their delivery service was so bad at times that it would be a drag on my Web site, which led me to drop it altogether.
We added some aspects to our site. We think that performance will improve over time. There are times when the page loads and the hovercard does not render properly but that will happen with any API.
How might you add some simple css styling to the tweetbox?
The API is very young. don’t think there is an option for that yet.
Isn’t it possible to define some styles in your CSS and overwrite the default ones?
@Scot the javascript for the tweetbox gives quite a few classes, so I think you can edit your own css and use the !important tag to give it your own styles
in general great tutorial, thanks guys!
Wow, this is easy
Really you rock, really handy tips keep up the great work