Embedding Tweets in WordPress with Twitter Blockquotes

Embedding content from third party services like YouTube and Vimeo is not new to WordPress, and we’ve been looking for a simple way to embed tweets from Twitter as well.

There are a few interesting plugins in this area, one of which is the Blackbird Pie plugin by Themergency. It’s cool and lovely but trying to adapt it to existing theme designs, we failed. This is why we decided to give it a go ourselves — we wrote our very own Twitter embed plugin called Twitter Blockquotes.

Twitter Blockquotes started off as an experiment a few days ago and went public on Github yesterday. After all the good feedback we have received, we decided to get our spot on WordPress.org and release it to the public. We were inspired by the Blackbird Pie plugin and took some ideas from them, only made it very simple to use and extend. Basically it works as simple as embedding a YouTube video in your post, but this time it’s Twitter.

Usage

Usage is fairly simple, just copy and paste a URL to a tweet from Twitter on a separate line in your post or page content. The output will be a nice looking blockquote with the tweet content and the author’s name. Yes, the word blockquote in Twitter Blockquotes refers to the blockquote HTML element. The plugin works out of the box and it will use your theme’s default styling for blockquotes.

The reason we didn’t style the blockquote element nicely in the plugin itself is because WordPress themes are different. Some give you an icon on blockquotes, some give you a border, extra margin or padding. Some style the cite element differently too, perhaps some extra margin on the left and maybe an — before the author’s name. So we couldn’t really guess what your theme does and decided to keep it plain and simple. This may not be the nicest output, but wait for our styling and Custom CSS section 😉

Features

Tweets are cached in post meta so you’ll not be querying the Twitter API every page view, and there’s a cache reset function too. This may not sound too exciting but it really is essential since your website will not be wasting time running HTTP queries every time a tweet has to show up, this means that Twitter Blockquotes has a minimal impact on your site’s performance.

The options page has got a custom CSS section where you can give your tweets an even better looking layout. Perhaps a bird icon. We’ll talk more about styling and CSS later in this post, but keep in mind that you can also style your tweets from your theme’s stylesheet.

One more (and probably the most) exciting feature is the different actions and filters inside the plugin code. These are all available for the theme and plugin developers to take advantage of. When we were playing with the Blackbird Pie plugin we thought it was too heavyweight so we made ours very lightweight but extensible. This means that even though the default output won’t show you the author’s avatar, you can still make it show with a couple of filters. We’ll talk about extending with a few examples later on in this article.

Styling & Custom CSS

As I previously mentioned, there’s a Custom CSS field in the plugin options and you can use your theme’s stylesheet as well, it doesn’t really matter which one you use, just pick what you’re comfortable with. The Custom CSS field is output in your site’s head section but that won’t have any noticeable impact on SEO or performance.

The default output has a blockquote element with the tweet class. Inside the block we’ve got a paragraph (p element) inside of which there’s a cite element with a link to the tweet’s author. Of course this structure can be changed or extended if needed. Anyhow, here’s a list of a few selectors that we recommend using to style your tweets:

/* the blockquote element */
blockquote.tweet { }

/* the cite (author) anchor and element */
blockquote.tweet cite { }
blockquote.tweet cite a { }

/* the tweet text */
blockquote.tweet p { }

This will allow you to change the line height, font faces, sizes and colors, margins and paddings and more. Go ahead and try to experiment with the above selectors, here are a few tips to get you started:

blockquote.tweet {
    background: url(https://si0.twimg.com/images/dev/cms/intents/bird/bird_gray/bird_32_gray.png) 0 0 no-repeat;
    padding-left: 50px;
}

That’ll give your quote a bird on the left side. Pretty simple and neat, eh?

You can use some of the official Twitter Image Resources or browse the web to find many more. Here’s another example, it’ll keep the tweet in a white box with a neat shadow (assuming your browser has support for shadows of course):

blockquote.tweet {
    background: white;
    box-shadow: 1px 1px 5px #ccc;
    padding: 10px;
    margin: 30px;
}

blockquote.tweet p { margin: 0; }

Here’s what it looks like on Twenty Eleven:

That wasn’t very difficult, right? Let’s now talk a little bit about extending.

Extending with Plugins and Themes

If you’re not a WordPress developer, you would probably want to skip this section. Basically if you browse the plugin source files, you’ll see that it’s well commented out and easy to understand. You’ll notice a bunch of actions and filters that you can take advantage of. I’ll show you a couple of simple tricks and then you’re on your own. All the code snippets below were added to our theme’s functions.php file.

Here’s how you add an mdash before the tweet author’s name.

add_filter( 'twitter_blockquote_tweet_before_cite', 'my_before_cite' );
function my_before_cite( $before_cite ) {
    return '— ';
}

This is how you add a third-level heading right before any of your embedded tweets.

add_filter( 'twitter_blockquote_tweet_before_blockquote', 'my_before_blockquote' );
function my_before_blockquote( $before_blockquote ) {
    return "<h3 style='margin-left: 46px;'>Here's a tweet for you:</h3>";
}

Finally, here’s a more advanced example that hooks into the raw object received from Twitter to save the followers count and then output that count right after the cite. You can print_r the $raw object to see what other info is available and if needed, store them in the $tweet array as well. The $tweet array then gets passed to the various other filters.

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

add_filter( 'twitter_blockquote_tweet_after_cite', 'my_after_cite', 10, 2 );
function my_after_cite( $after_cite, $tweet ) {
    return " ({$tweet['followers_count']} followers)";
}

This will require a cache reset since the cached tweets won’t know about the followers count key. Use the button in the plugin options to reset all caches when you need to. Following all three examples above, here’s a screenshot of what we got:

The opportunities are endless here, the very same way you can add the user pic of the author, the background URL if needed. You can add reply, retweet and favorite actions, the time of the tweet and the number of retweets. As I said, inspect the $raw object with print_r to see what info is available.

Download and License

That’s about it folks. The plugin’s released under the GPL v2 license and is hosted in the WordPress.org plugins directory, thus available free for download. There’s a Github project for it too so feel free to use the Issues section and/or contribute.

Download License

Thank you for reading and hope you enjoyed our plugin. Use the comments section below to leave your thoughts and suggestions. We’re always open to feedback of any kind and hopefully, together with you, we’ll make this plugin even better in the coming updates. Stay tuned to our RSS feed.

Update: We installed the plugin on our own website too and really enjoy using it, so here’s a real-life example with one of our tweets: