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:
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!
Wow, how did I not know about Twitter Cards? I am feel old right now, lol.
You can learn more about the different types of cards here: https://dev.twitter.com/docs/cards
I didn’t even know this existed! Well, I’ve seen tweets like that, but didn’t know what they were!
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 <.<
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.)
Bam, site approved! So now I should be able to just paste in any URL from the blog and a summary card will show up?
Yep. 🙂
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)” 😀
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
They tweet something on tweeter and then they embed that tweet in a post on their blog later.
Here you have an example, the tweets in the article are from the author of the post:
http://correresmidestino.com/learning-social-skills/
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.
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!” 😀
Ooh I’ve always wondered about this because I always see a preview of the post when I expand your tweets and I wanted to know how it was like that 🙂 Thanks for sharing, Ashley! <33
I installed plugin, validated and was approved. However when I tweet a post it is a standard tweet. What did I do wrong?
never mind it just took a while to refresh tweets..it works great, thank you so much 🙂
Thank you for answering this question! I’m going to install your plugin right now.
This is so cool – I’m going to install it, thanks so much for sharing!
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*
You shouldn’t have to. Did you validate it originally? I don’t have to get all of my tweets approved individually.
Thanks for your quick reply. Yesterday I added a url of one of my posts and got a notice I was approved, but until I entered today’s url it didn’t appear as a summary.
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!
I must have done something wrong on the first try..because now I am rocking the summary cards.
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 🙂
Ahhh, I love this!! I’d never even considered that this was a possibility for blog links on twitter, or that it was something related to the coding of the blog itself… You are seriously awesome for sharing this plugin, Ashley!! 😀
Ashley, thanks for the greay article! I just have one extra doubt. As twitter descripction I´d like to use the meta description of a page/post and not the content. How can I do that manually (with out a plugin).
Thanks!
I love this! I was always curious about these types of tweets but never bothered to really figure out what they were! Thanks for sharing! 🙂
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!
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?
In the plugin code you have to edit this part and change it to your username: