Nikhil Vishnu

Setting up Twitter @Anywhere on your site in 3 steps

What is Twitter @Anywhere?

Twitter @Anywhere is a platform that brings the functionality of twitter on to different websites. Now most of the twitter activities are hanging around the twitter home page and the tools which access twitter through its API. @Anywhere is a service which is similar to the facebook connect which allows websites to build community around their website. @Anywhere is more simple than facebook connect you need to have more technical knowledge for setting up facebook connect in your website.

Twitter Co-founder Biz Stone writes

Imagine being able to follow a New York Times journalist directly from her byline, tweet about a video without leaving YouTube, and discover new Twitter accounts while visiting the Yahoo! home page—and that’s just the beginning. Twitter has proven to be compelling in a variety of ways. With @anywhere, web site owners and operators will be able to offer visitors more.

Checkout a sample anywhere implementation by placing mouse over my twitter handle @nikhilvishnu. You will see a hovercard!!!.

Setting up @Anywhere in your site

Here we are going to set up @Anywhere to get the hovercards which shows a popup over the twitter handles showing the follow button and profile description. @Anywhere provides the following features.

• Auto-linkification of @ usernames
• Hovercards
• Follow buttons
• Tweet Box
• User login & signup

For integrating this to the website you only need to add a few lines of java script into the site source code. You can do it in three simple steps

Step1:  Register your website at Twitter Anywhere

Twitter @Anywhere is working like a twitter application so that you have to register your website in the twitter developer site. Go to anywhere official site and register your website by providing the details.

Twitter Anywhere registration

Step2: Add JavaScript to the header

You need to add a line of JavaScript to the header as follows

<script src="http://platform.twitter.com/anywhere.js?id=YourAPIKey&v=1"> </script>

You can find the API Key in the application details. For including this in a webpage just copy and paste this code with the API key before the </head> tag. If you are wanted to include it in your word press site include this script in header.php file located in the theme folder.

Finding Twitter Anywhere API Key

Step3: Add JavaScript to the footer

The final step for setting up twitter anywhere is adding some javascript into the footer of the site. Footer means you can include the code right before the tag </body>. Including the following code will enable the hovercards in the page.

<script>

twttr.anywhere(function(twitter) {

twitter.hovercards();

});

</script>

You can customise this code further by specifying the areas where the twitter scan for a username. Since this code contains no such specifications twitter scan the entire page and attach a hovercard over each twitter user mentioned after the ‘@’ symbol.

This is a most simple implementation of the twitter @Anywhere platform. You can find more details about the Anywhere platform and its documentation here