How to Install Twitter Cards on Your WordPress Blog

How do you install twitter cards? The twitter API isn’t very clear on what I’m supposed to do and all the tutorials I’ve found online are outdated. I can’t figure it out and I would love to have them! Thanks Ashley!
Jessica

Hi Jessica!

First, for those who don’t know, Twitter Cards are a way of showing expanded information/previews inside your tweets about your blog posts. Here’s an example of the “summary” style Twitter Card:

Twitter Card (Summary Style)

Just that single URL triggers the post title, a short description, and an image from the post. Cool!

There are several different card types (summary, photo, gallery, app, product, etc.), but I’m mostly going to be talking about the summary card today, because I feel it’s most suited for a book blog.

For the summary card, there are three pieces of required information:

  • The type of Twitter Card you want (summary)
  • The title of the post/page
  • A description of the post/page

And the optional field is an image URL. You should also include the Twitter “creator”, which is just your Twitter handle.

Each of these fields requires a piece of code to go with it to tell Twitter what the value is, and all the pieces of code should be placed inside the <header> part of your template. The key thing here is that these values will vary for each post, so you have to add the values dynamically. Your title, description, and image should change depending on which post you’re viewing.

Here’s an example of one from my site:

<meta name="twitter:card" content="summary"/>
<meta name="twitter:site" content="@NoseGraze"/>
<meta name="twitter:domain" content="Nose Graze"/>
<meta name="twitter:creator" content="@NoseGraze"/>
<meta name="twitter:title" content="Review: The Iron King by Julie Kagawa (The Iron Fey #1)">
<meta name="twitter:description" content="Meghan Chase has a secret destiny—one she could never have imagined… Something has always felt slightly off in Meghan’s life, ever since her father disappeared before her eyes when she was six. She has never quite fit in at school…or at home. When a dark stranger begins watching her from afar, and her prankster best…">
<meta name="twitter:image" content="https://www.nosegraze.com/wp-content/uploads/2012/06/the-iron-king-julie-kagawa.jpg">

So basically, we’re using a bunch of meta tags to set the name (which Twitter tells us about on their Summary Card Documentation) and the value (which comes from our post).

How do I enter these values dynamically in WordPress?

As I said before, these values must be dynamic, meaning they change with each post. So you can’t just enter static HTML into your header, because then your Twitter cards will be the same for every single page!

In order to make them dynamic, we’ll use a PHP function.

function cw_twitter_card_summary() {
	global $post;
	$twitter_handle = '@NoseGraze'; // Change this to your Twitter handle
	$domain = get_bloginfo('name');
	
	echo '<meta name="twitter:card" content="summary"/>';
	echo '<meta name="twitter:site" content="' . $twitter_handle . '"/>';
	echo '<meta name="twitter:domain" content="' . $domain . '"/>';
	echo '<meta name="twitter:creator" content="' . $twitter_handle . '"/>';
	echo '<meta name="twitter:title" content="' . get_the_title($post) . '">';
	echo '<meta name="twitter:description" content="' . $post->post_content . '">';
	
	/* The image */
	$featured_image = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );
	$ubb_image = get_post_meta($post->ID, '_ubb_book_image', true);
	if(!empty($featured_image)) {
		echo '<meta name="twitter:image" content="' . $featured_image[0] . '">';
	}
	elseif($ubb_image) {
		echo '<meta name="twitter:image" content="' . $ubb_image . '">';
	}
}
add_action('wp_head', 'cw_twitter_card_summary');

This code needs to be placed inside your theme’s functions.php file. Then in the last line, we tell WordPress to add this code to your theme’s header.

Make sure you edit the value at the top where it says $twitter_handle = '@NoseGraze';

The unique bit of information here is in /* The image */. What we do here is first check to see if the current post has a featured image set. If it does, we tell Twitter to use that as the Twitter Card image. If it doesn’t have one, then we check to see if an Ultimate Book Blogger Plugin cover image is set (for reviews!). If so, we tell Twitter to use that as the Twitter Card image instead.

Download the plugin

I have created a simple plugin that includes all the above code (plus another custom function to get the post excerpt). You can install this plugin if you prefer not to edit your theme’s functions.php file. Note that you will still have to edit your Twitter handle in the code!

Request Approval

Once you have the code in place, you need to paste one of your URLs into the Twitter validator tool. after doing so, you should see a button called Request Approval. You have to click that to get approval from Twitter for your cards.

When you’re approved, your tweets should start appearing with the Twitter cards!

Photo of Ashley
I'm a 30-something California girl living in England (I fell in love with a Brit!). My three great passions are: books, coding, and fitness. more »

Don't miss my next post!

Sign up to get my blog posts sent directly to your inbox (plus exclusive store discounts!).

You might like these

33 comments

  1. Oo, this is awesome, I didn’t even realize I could do this! So I’ve installed the plugin, but just pasting the url to a review in Twitter doesn’t seem to be doing anything? Does it just take a bit or do I need to use a special URL? >.> Also I feel cool that I managed to edit the php without breaking anything by the third time <.<

    1. Run your link through the Twitter validator tool. Then there should be a button to “request approval”. You just have to get your site approved by Twitter. 🙂

      (I’ll add that into the post.)

  2. Great articles again 🙂 Though I have mix feelings about Twitter cards really. I can’t believe the number of people who are using it to… display their own tweets in their own blog posts. It feels like quoting yourself! –> “Look what I said, it’s SOOOO interesting!!! (and here is a nice Twitter box around me)” 😀

    Lily recently posted: Oust, Hiver, Oust !!!
    1. Wait.. so you mean they install Twitter cards, then they tweet about something on their blog, then they embed that tweet inside another post on their blog? Am I getting that right? O_O

        1. Hm that is a bit strange. I feel like if I were making a post like that, I’d just upload the images onto my blog and put a caption beneath it (instead of embedding a tweet).

          But ultimately that’s because my worry would be: what if the tweet gets deleted? I’d just rather have all my blog content hosted on my own site, rather than embedding from a third party.

          1. That would make perfect sense for images.
            But just text? Why would you “quote” yourself?
            I just find it weird… and a bit funny. I feels like “Oh look! I said something cool!” 😀

            Lily recently posted: Oust, Hiver, Oust !!!
  3. So I was approved and test card tweeted but today’s tweets aren’t summaries. Then I went and entered url for post on Twitter validator tool and it approved and posted immediately. Does it mean that every time I want a summary tweet I need to go to that validator site and make one? If I tweet from button at bottom of my post it is not summary. Do I need to set up tweet from WordPress. *my brain hurts, help*

    kimbacaffeinate recently posted: Ashes and Bone by Stacy Green
    1. You shouldn’t have to. Did you validate it originally? I don’t have to get all of my tweets approved individually.

        1. Well if it continues to happen, then that’s something you’d probably have to contact Twitter about. 🙁 Because if your twitter cards are valid then there’s no reason it shouldn’t be working for all posts!

  4. I know this article is for WordPress users but I want to throw out there that in it works for Blogger too, sorta. Summary will appear as expected but won’t show an image. Has something to do with how Blogger resizes your thumbnails. Tweet will validate, validation itself will show an image but the actual tweet is only text.

    Still worth doing. Makes your tweets look professional 🙂

  5. I have downloaded your plugin and will give a try. I just started with Twitter development and found your article to very helpful. Thanks for sharing!

  6. I have your tweak me site theme so I don’t want to touch the themes functions file. I’ve added the plugin but where do I need to go to edit the twitter handle on it?

    1. In the plugin code you have to edit this part and change it to your username:

      $twitter_handle = '@NoseGraze'; // Change this to your Twitter handle
      

Recent Posts

    Random Posts