Twitter Avatars oEmbed

We released our Twitter oEmbed plugin for WordPress last month and we’ve been getting quite some positive feedback about that from developers. Today we’re going to show you how to use the plugin’s filters to add the tweet author’s avatar (profile image) to the left of your Twitter quotes.

Previously on Theme.fm

We published a post earlier mostly about styling the embedded tweets since the plugin itself would use your theme’s standard blockquote layout. As mentioned in that post, with this plugin we wanted to give full control over what’s printed on screen and how it is printed, as well as make sure the plugin is compatible with each and every WordPress theme out there, which is why we didn’t bundle any default styles with the plugin.

Recap from the previous tutorial, styling the tweets is quite simple, just use the blockquote.tweet selector in your theme’s stylesheet or the custom CSS field provided in the plugin options. The previous tutorial has also shown how to use a few simple filters to add the followers count to your embedded tweets. Here’s what we achieved back then:

Twitter Blockquotes Extended

In this tutorial we’ll use the same filters to grab the profile image URL from Twitter and then display it as the avatar of the embedded tweet. And yes, we’ll be using Twenty Eleven as our parent theme :)

Preparing for Avatars

Hopefully you’ve got the Twitter Blockquotes plugin installed already, so make sure that’s activated and works as expected. Before proceeding I’d suggest you remove all the styling that you’ve added before for embedded tweets.

As already mentioned we’ll be using Twenty Eleven as our parent theme, you’ll see how tweets can be nicely embedded into the Status post format of the theme. If you’ve never created a child theme before, go ahead and read our twenty eleven child theme tutorial published back in July.

In this tutorial I’ll assume you have created your new child theme’s style.css and functions.php files. Those are basically the only ones you’ll need today and you can even follow along by using a child theme you have already created.

The Twenty Eleven Status Post Format

You’re probably familiar with post formats in WordPress and you probably know that Twenty Eleven comes with around 6 different ones, including Gallery, Image, Link and of course Status. We’ll be using the Status post format together with our embedded tweets. Before publishing your tweets you should take a look at how the Status post format is interpreted by Twenty Eleven, here’s an example:

Status Post Format

As you can see it’s got an avatar already, but since we’re going to use embedded tweets with the tweet author’s avatars, we’ll have to get rid of the default ones. So fire up your child theme’s functions.php file and stick in the following snippet:

add_filter( 'get_avatar', 'my_get_avatar' );
function my_get_avatar( $avatar ) {
    if ( get_post_format() == 'status' && ! is_single() ) {
        return '';
    }
    return $avatar;
}

This is a hook to the get_avatar function used throughout the theme. Our goal is to get rid of the avatar displayed to the left of the status posts on the front page, but not all the other pages where avatars are used. So we run a check to see if the current post format is a status and make sure we’re not on the single post page. We return an empty string if so, otherwise we pass through whatever’s been given to the filter.

Status Post Format No Avatar

If everything went okay, you should see that the status posts are now displayed without the post author avatars on the left, and now it’s time to bring in our tweets.

Embedding Our Tweets

If you’re familiar with the Twitter Blockquotes plugin you’ll know that all you have to do to embed a tweet is insert it’s URL on a separate line in your post editor, just like you would insert a YouTube video. Create a new post with the Status post format, insert a URL to a tweet as the content of the post and publish it. You should see something like this on your front page:

Status Post Format Tweet

Caching the Twitter Avatar

Now comes the fun part. You’ll need to hook into the Twitter Blockquotes process of gathering and caching the tweet and since it doesn’t gather profile images by default, you’ll have to play around with the raw object. You can always print_r the raw object and see what data is available for Twitter and what we’re looking for is the profile_image_url under the user object. Here’s the next snippet for your functions file:

add_filter( 'twitter_blockquote_tweet_raw', 'my_tweet_raw', 10, 2 );
function my_tweet_raw( $tweet, $raw_tweet ) {
    $tweet['profile_image_url'] = $raw_tweet->user->profile_image_url;
    return $tweet;
}

The first argument is the associative array that’s being cached for every tweet, while the second argument is the raw object retrieved from Twitter. So with this simple snippet we make sure our profile image URL is saved and cached. After saving your functions file make sure you browse to your admin panel and hit Clear All Caches under the Twitter Blockquotes plugin settings.

At this stage nothing really happened on the front end, but your post meta will now contain an extra profile image URL for every embedded tweet which you’ll use with our next snippet.

Embedding the Twitter Avatar

If you ever looked at the plugin source code you’ll be familiar with many of it’s filters. This time we’ll use the before_blockquote filter, like this:

add_filter( 'twitter_blockquote_tweet_before_blockquote', 'my_before_blockquote', 10, 2 );
function my_before_blockquote( $before, $tweet ) {
    if ( isset( $tweet['profile_image_url'] ) )
        return $before . '<div class="avatar"><img class="avatar avatar-65 photo" src="' . esc_url( $tweet['profile_image_url'] ) . '" width="65" height="65" alt="Twitter" /></div>';

    return $before;
}

Not too difficult, is it? The first argument if the $before string which might have been filtered by other functions, so make sure you append your content to that value, otherwise you might loose it. The second argument is our $tweet object which is the one we’ve extended earlier. It’s got our profile_image_url key which we can use to create the avatar.

Note the div and the class names I’ve used for the avatar, they weren’t taken from the top of my head. I used Chrome’s DOM inspector before removing Twenty Eleven’s default status avatars and took the classes from there. This makes sure that our avatar floats to the left and is the same size as the default one would have been. Here’s where we’re at:

Post Format Tweet

Oh, and this works for multiple embedded tweets as well:

Status Post Format Multiple Tweets

Conclusion

And that’s all there is to it. Hopefully this post has shown you how easy it is to customize the Twitter Blockquotes plugin which is very flexible indeed, although doesn’t show much functionality out of the box. It’s all about your theme and your styling that gets your tweets embedded the way you like. Thank you for reading and sharing. If you’ve got any questions, thoughts or suggestions, feel free to use the comments section below.

The Twitter Blockquotes plugin can be downloaded for free from the WordPress.org plugin directory. If you’ve got a WordPress.org account make sure you give us some stars rating too! ;)