How To Setup Twitter Anywhere On Your Site In 5 Minutes

Twitter Anywhere LogoTalk about an easy implementation! Twitter’s new “Anywhere” platform will leave you feeling like a programming genius once you’ve become set up. Prior to going into substantial details about how to configure Twitter @anywhere, we thought it would be useful to provide a quick demonstration about how to get set up with Twitter @anywhere on your site and have hovercards, a basic service which creates dynamically linked Twitter accounts on your site. Read on for more!

Step 1: Visit The Twitter Anywhere Area And Register Your Site

The first step to getting Twitter Anywhere configured on your site is registering your first “application”. In this case, all your application will do is turn on anywhere and enable the hovercard feature within your site. Simply visit the Twitter anywhere dev site and get your site configured. You can watch the video that I’ve embedded below for a demo.

Twitter Anywhere Settings Screenshot

Step 2: Add A Snippet Of Javascript In Your Header

You will need to add one line of Javascript to your page as follows:

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

All you need to do is replace “YourAPIKey” with the API key that Twitter gave you after completing step 1. They will even provide you with some code that you can just drop into the header of your site. If you are not used to editing HTML then you are going to have some problems, however if you feel comfortable editing HTML you should be good to go!

Twitter API Key

Step 3: Add A Snippet Of Javascript To Your Footer

The last step is adding a piece of Javascript in the footer of your site. This can actually go anywhere in your code (no pun intended), however posting it toward the end, right before the close of your

</body>

tag is the ideal location. As described in the video tutorial, the easiest way to get up and running is to include the following code snippet:

<script type="text/javascript">
twttr.anywhere(function(twitter) {
     twitter.linkifyUsers();
}
</script>

This code will link all users on your site that have a Twitter username reference with an @ sign. However if you’d prefer to limit the code to a specific area to avoid any delay in page loading time (implementing the linkifyUsers method will result in a 100 – 200 millisecond delay), you can apply it to a specific area of your site. For example on SocialTimes.com we have a

div

are which uses the class “post” for the area where our articles are displayed. As such, I’ve implemented the following code on our site:

<script type="text/javascript">
twttr.anywhere(function(twitter) {
	twitter.hovercards();
	twitter(".post").linkifyUsers();
});
</script>

You don’t need to use this if you don’t have a thorough understanding of HTML however. For most users the

linkifyUsers

method will be perfectly sufficient.

You’re Done!

That’s it! Yes, it only takes 5 minutes to get up and running with Twitter Anywhere and it works! If you would prefer a video tutorial we’ve gone ahead and embedded one below.

Update
If you are reading this from the article page, we’re having a temporary issue with our ad server which is preventing the footer from loading completely. If you want to see how hovercards work, you can do so by visiting our homepage and viewing the first paragraph of this article.