How To Setup Twitter Anywhere On Your Site In 5 Minutes

Talk 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. Step 2: Add A Snippet Of Javascript In Your Header You will need to add one line of Javascript to your page as follows: 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! 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 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: twttr.anywhere(function(twitter) { twitter.linkifyUsers(); } 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: twttr.anywhere(function(twitter) { twitter.hovercards(); twitter(".post").linkifyUsers(); }); 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.

Social Pro Daily

How To Setup Twitter Anywhere On Your Site In 5 Minutes

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

Nick O'Neill

About

Subscriptions

Events

Publications

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

WORK SMARTER - LEARN, GROW AND BE INSPIRED.

Subscribe today!

Nick O'Neill