If you haven’t heard yet, Twitter just came out with a new service called @Anywhere. Basically it enables you to, among other things, display a hover card with a quick twitter blurb any time you mention “@AdamLBaird” or any other twitter username, that hovercard will display. You can also display a follow button that will allow your visitors to automatically follow you. This is pretty slick.
One of the things you can do with this is create an enhanced “recent tweets” section in your Thesis sidebar. I’ll walk you through registering with @anywhere, setting up hover cards, displaying recent tweets, inserting a follow button, and styling the whole thing to boot.
Registering with @Anywhere
This is simple. Just click here. That should take you to the page for creating a new Twitter app. Just fill in the information as I’ve done below:
Click register. If you’re successful, you will see a page that gives you a section of code a bit like this:
<head>
<script src="http://platform.twitter.com/anywhere.js?id=YourAPIKey&v=1">
</script>
<script type="text/javascript">
twttr.anywhere(function(twitter) {
twitter.hovercards();
});
</script>
</head>
That is the basis of the code we’ll use to set up @Anywhere (minus the
tag). Go ahead and copy and paste this somewhere safe for now. That’s all you need to do to be registered. Now let’s build some code!Integrating @Anywhere with Your Blog
This is relatively easy. All we need to do is build a function to house all of the scripts from Twitter that we’ll be using for our list of recent tweets. Here’s what that looks like:
function twitter_scripts() { ?>
<script src="http://platform.twitter.com/anywhere.js?id=YOURAPIKEY&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: 290, defaultContent: "@YOURUSERNAME" });
});
</script>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/YOURUSERNAME.json?callback=twitterCallback2&count=5"></script>
<? }
add_action('thesis_hook_after_html', 'twitter_scripts');
We hook the whole thing after all of our HTML in order to have the page load as efficiently as possible. There are several things these scripts accomplish. Let me take you through it script by script.
<script src="http://platform.twitter.com/anywhere.js?id=YOURAPIKEY&v=1"></script>
Gotta have insert your API key where it says “YOURAPIKEY” or this is all for not.
<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: 290, defaultContent: "@YOURUSERNAME" });
});
</script>
First, twitter.hovercards(); activates the hovercard function. You don’t have to do anything else. For example, if you type @ArtOfBlog, the hovercard is automatically activated…no HTML required.
Second, twitter('#follow-YOURUSERNAME').followButton("YOURUSERNAME"); activates the “follow button. In order to place a follow button you’ll need to use <div id="follow-YOURUSERNAME"></div>.
Finally, T("#tbox").tweetBox({ height: 100, width: 290, defaultContent: "@YOURUSERNAME" }); allows you to place a tweet box on your blog. In order to do so, you need to use <div id="tbox"></div>.
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/YOURUSERNAME.json?callback=twitterCallback2&count=5"></script>
If you’ve ever used the html version of Twitter’s recent tweets before, you’ve used these two scripts. Basically, they just control the display of your recent tweets themselves. Be sure to change YOURUSERNAME to your actual username. Also, toward the end of the second script, you need to edit the number of tweets to be shown. Currently, its set to “count=5″, but you can set that number to be whatever you like. In order to place the list we need to use <ul id="twitter_update_list"></ul>.
Building the List of Recent Tweets
Ok, so, we’re all set up. Let’s build the list! Basically, we’ll create a function to house the HTML that will actually display the list, and then walk through it. Here’s the function:
function recent_tweets() { ?>
<li class="widget">
<h3>@YOURUSERNAME</h3>
<ul id="twitter_update_list"></ul>
<div id="follow-YOURUSERNAME"></div>
<div id="tbox"></div>
</li>
<? }
add_action('thesis_hook_before_sidebar_1', 'recent_tweets');
This is pretty simple. Basically, because we are placing this above sidebar 1, we start with <li class="widget"> in order to preserve the normal Thesis structure for a sidebar widget. Why do we do this? Because then the Thesis styles for sidebar widgets will apply and we won’t have to write our own!
We follow up with the html calls for our list of tweets, follow button, and tweet box that we established a few paragraphs back, and that’s it!
Stylin’
The only CSS adjustments you should need to make are for the alignment of the follow button and the margin between the follow button and the tweet box. That could look a little something like this:
#follow-YOURUSERNAME { text-align: right; margin-bottom: 1em; }
If all goes well, your end result should look a little something like this:
Get Free Updates From Art Of Blog
Sign up to receive insider tips only available to our email subscribers.
You can also subscribe to our RSS feed or follow us on Twitter to get the latest updates. Check out our YouTube channel for the latest video tutorials!
Adam is a Wordpress designer, Thesis specialist, and blogger from Indianapolis, Indiana. Check out his custom work or follow him on Twitter for more Thesis tips.
Thesis 1.8 and Genesis 1.3 Compared 
Two Sure-Fire Ways to Increase Website Traffic 
Thesis Recent Tweets with @Anywhere Integration 
Add A Tweet This Post Box To Your Thesis Post Footer 
WordPress Security 101: Securing your Site 
What’s in It for Me: 7 Types of Timeless Core Content 
Add Slick Social Media Icons to Thesis 
Thesis WordPress Theme Review 
Thesis Review: Thesis WordPress Theme Video Review 
180+ Thesis Design Customizations You have to See to Believe 
{ 17 comments… read them below or add one }
Nicely done, Adam. I’m definitely going to integrate @anywhere into the site I’m working on right now.
Nice…I’ve already got it running on most of my sites.
Oh snap, lol…I wasn’t expecting my comment to be anywhere-ified :-D
Haha, interesting idea to get twitter followers. Just go around dropping @nickreese’s everywhere.
why do you think I dropped @AdamLBaird at the top of the article ;)
Well hell, @willieljackson approves of this self-promotion too.
Sidenote: If you don’t want the anywhere-ifying hovercards in comments or titles, you can change
T.hovercards();to T("#main-content").hovercards(); where "#main-content" is the div id of the section where you want it to display.Not that anyone asked! =)
But while everyone is enjoying the party – @Matt425 isn’t gonna drown it out. Even if I have to reference myself in the third person.
Nice! I’ll readily admit that my JS skills need some work…
Adam, I’ve got it working on my main blog but … the CSS does not appear to be working. All the text is aligned left and the text box is 126 characters wide. How do I adjust all this?
Never mind. Found what I needed. Thanks so much for posting this. It replaced a WordPress plug-in that did something similar but was a performance drain.
No problem! For anyone wondering, the height and width of the tweet box are controlled by the script, not css.
Very usefully posting! Well done. Thank you.
Am I the only one who can’t even sign up for dev.twitter?
Groovy, Adam; thanks much for this. I had seen the @anywhere code on another blog a few months back — and I couldn’t get it to work. Now it does. Click my name to see it in the middle of my sidebar. I might move it to the posts later, or not.
Great article, could you also say where I would have to insert all the scripts? Can’t find it described in your instruction.
Thanks a lot!
What if I just wanted to have the hovercards functionality? What woiuld the stripped off code be for that?
{ 1 trackback }