Twitter @Anywhere is an easy-to-deploy solution for bringing the Twitter communication platform to your site. …add Follow Buttons, Hovercards, linkify Twitter usernames, and build deeper integrations…
Twitter Developers — @Anywhere
Did you know Twitter makes it easy to integrate their features into your WordPress website? Well they do, and it’s called @Anywhere.
Since Twitter is brother to Facebook in the all mighty realm of social media Gods, it’s prudent to make sure your site is well integrated. We’ll be going through a series of simple steps to integrate @Anywhere into your WordPress blog and if you’re a Thesis Theme user, it’s even easier.
Register an @Anywhere Application
First you must register an application to receive your Twitter API key (aka Consumer key). This will allow you to access and make use of the services provided by @Anywhere.
Login to Twitter and fill out the application above and then navigate to your new apps settings page and make sure you have the application type set to Read and Write (other options like adding an application icon are optional):
Then navigate to your apps details tab and make note of your Consumer key:
Adding @Anywhere to Your Site
If you’re using Thesis, just go into your Thesis Site Options and under “Additional Scripts” add the preceding code.
Implementing @Anywhere Features
Automatically Link All Twitter Usernames
Any time a Twitter username is mentioned, for instance @designpx, it is auto-magically linked. To do that, simply add the following script right after the main code we previously added:
This will link every username on your site. You can specify a certain section, for instance, I don’t want usernames in my header, sidebars and footer to be linked so I need to somehow tell it to only link usernames in my post. I can do that by adding a CSS selector to the
The code I added is in red. This will only auto-linkify usernames within the
Instead of the auto-link code above, use this instead to auto-link and add hovercards:
The above code will display a (default) smaller version of the hovercard with just the username and a follow button. In order to display an expanded version (like the one pictured above and used on this site) you must add the following:
Twitter Follow Buttons
These aren’t just any ordinary buttons, they’re smart buttons. The label is dynamically updated to suit the circumstance — if the user is not already following the person, it will allow them to right from your website. If they are, it will say so. Here’s the button in action:
To add it we just add the following script right below any other scripts we’ve been working with:
Remember to replace my Twitter name with yours. Now all we have to do is insert the button where we want it to show up. You do that by placing the following code wherever you want:
The Tweet box provides a way for users to Tweet directly from your website. To add it we must first review the different configuration options:
counter– displays a character counter. Default is true.
height– the height of the Tweet box. Default is 133px.
width– the weight of the Tweet box. Default is 515px.
label– the title of the Tweet box. Default is “What’s Happening?”.
defaultContent– pre-populated tweet content.
Now that we understand the options, all we have to do is add the following code (making changes to suit your purpose) after any other code we’ve been working with:
Then, simply add the following code wherever you want the Tweet box to show up:
The above code will display a Tweet box like this:
Check out the @Anywhere documentation to learn more. If you have any questions or need help integrating this into your site, we’re here to help — leave a comment and we’ll do our best.