How To: Take Advantage of Twitter’s @Anywhere

First, I want to thank @Matt425 for his tutorial on how to invoke the Follow Me Badge. It wasn’t until after I followed his tutorial that I started to see further kick-ass-ness on my site. :)

What is Twitter’s @Anywhere? In-short, a quick way to bring the power of Twitter’s API by use of Hovercards, Follow Me Badges, and Tweet Boxes to YOUR site. I’ll show you how to take advantage of some of the features – WITHOUT using a plug-in.

Step 1: Create your own “Application”

In other words, authorize your Twitter account for @Anywhere usage

a) http://dev.twitter.com/apps/new

b) fill out the info & hit “save”

c. copy the code (replacing the XXXXxxxxXXXXXxxxxXXXX with your own API)

<script src="http://platform.twitter.com/anywhere.js?id=XXXXxxxxXXXXXxxxxXXXX&v=1"></script> <script type="text/javascript"> twttr.anywhere(function(twitter) { twitter.hovercards(); }); </script>

Step 2: Work the code into your site

There are two ways 1) Easy 2) Ninja

EASY: Paste the code into WP-Dashboard -> Thesis -> Site Options -> Stats Software/Scripts -> Hit Save

NINJA: Using custom_functions.php we’re going to use a function to invoke the code

a) Open custom_functions.php

b) Copy the code below and paste near the bottom:

//Twitter @Anywhere
function twitter_anywhere_html() {
?>
<script src="http://platform.twitter.com/anywhere.js?id=XXXXxxxxXXXXXxxxxXXXX&v=1"></script>
  <script type="text/javascript">
     twttr.anywhere(function(twitter) {
              twitter.hovercards();
     });
  </script>
<?php }
add_action('thesis_hook_after_html','twitter_anywhere_html');

So what now? Now you’ve just merged Twitter’s API with your website, thus activating the “Hovercard” feature!

I’m going to type a Twitter user-name, let’s use @pearsonified and WITHOUT using HTML and a Twitter Hovercard will display!

Advanced Features

Want to show a Follow Me Badge? Replace the code directly above with this:

//Twitter @Anywhere
function twitter_anywhere_html() {
?>
<script src="http://platform.twitter.com/anywhere.js?id=XXXXxxxxXXXXXxxxxXXXX&v=1"></script>
  <script type="text/javascript">
     twttr.anywhere(function(twitter) {
              twitter.hovercards();
              twitter('#follow-yourusername').followButton("yourusername");
     });
  </script>
<?php }
add_action('thesis_hook_after_html','twitter_anywhere_html');

Paste this code anywhere in your content/sidebars:

<div id="follow-yourusername"></div>

Will display:

How about a Tweet Box? Replace code directly above with this:

//Twitter @Anywhere
function twitter_anywhere_html() {
?>
<script src="http://platform.twitter.com/anywhere.js?id=XXXXxxxxXXXXXxxxxXXXX&v=1"></script>
  <script type="text/javascript">
    twttr.anywhere(function(twitter) {
              twitter.hovercards();
              twitter('#follow-yourusername').followButton("yourusername");
 });
   twttr.anywhere(function (T) {
              T("#tbox").tweetBox({
              height: 100,
              width: 400,
              defaultContent: "@gregrickaby"
              });
 });
  </script>
<?php }
add_action('thesis_hook_after_html','twitter_anywhere_html');

Paste this code anywhere in your content/sidebars:

<div id="tbox"></div>

Will display:

Let’s review. All we’ve done is call a Javascript and then activate said Java using a <div>. Easy stuff, and you’ll be able to give your viewers another way to interact with you. Check out Twitter’s Beginners Guide to @Anywhere!