Twitter is slowly rolling out this experimental technology called Twitter Cards which makes it possible for you to attach media experiences to your tweets that link to your content. This very similar to Facebook status. When you paste a link, it adds a preview with title, summary, and thumbnail of your page content. In this article, we will show you how to add twitter cards in WordPress.
How does Twitter Cards work?
When your tweet has a link to a site that has twitter cards enabled, there is an option to view summary. Whenever another user clicks on the tweet, they will see this summary like the screenshot below. You can see the live example by going to our twitter page.
The biggest advantage of having twitter cards is that it increases the number of people following your twitter accounts through content attribution. Often people tweet your links without giving you proper attribution. We have noticed this specifically from some popular content curators. They will tweet our articles without any via @wpbeginner or RT @wpbeginner. This is their right, but we/you as publishers miss out specially when other people retweet your content with someone else’s attributes.
For example if @syedbalkhi retweets a post from @wpbeginner without attribution to @wpbeginner. Then another person retweets @syedbalkhi others are more likely to follow @syedbalkhi rather than following @wpbeginner.
Often content curators do this to keep the tweet lengths short and ensure retweets of their own tweets. With twitter cards, this problem is solved because you get credit to your site from every tweet that mentions your article. Note: we are not picking on content curators. This is a flaw of 140 character limit, and twitter is helping fix it with Twitter cards.
For example when Annie tweeted out our article, she didn’t mention @wpbeginner. But because of proper twitter cards in WordPress setup, we get full credit and exposure. Notice how it has a one click follow button as well.
Now that you know the benefits of twitter cards, lets take a look at how to implement in WordPress.
How to Add Twitter Cards in WordPress
There are two ways of adding twitter cards in WordPress. Let’s take a look at both of them.
Method 1: WordPress SEO by Yoast Plugin
If you are using WordPress SEO by Yoast plugin, then you are in luck. Yoast has built-in integration for twitter cards, so turning it on is a matter of few clicks. Go to the “Social” page of WordPress SEO by Yoast settings page. Check the box for Add Twitter card meta data. Insert your site’s twitter username.
Next thing you need to do is go to your user profile page, Users » My Profile. You will see a new field under Contact Info for your twitter username. Enter your twitter username there. If you are running a multi-author site, then advise your authors to complete this part in their profile. This way each specific author gets credit for their work as well. See the example below:
Notice how it says by David Pegg @iamdpegg, and it also has @list25 as the publisher website.
This method is by far the easiest method. Since we use WordPress SEO by Yoast on all of our websites, we are using this method.
Method 2: Hard Code it yourself
Method 2 requires editing some code. Open your header.php file and paste the following code before the closing of the head tag.
<?php
#twitter cards hack
if(is_single() || is_page()) {
$twitter_url = get_permalink();
$twitter_title = get_the_title();
$twitter_desc = get_the_excerpt();
$twitter_thumbs = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), full );
$twitter_thumb = $twitter_thumbs[0];
if(!$twitter_thumb) {
$twitter_thumb = 'http://www.gravatar.com/avatar/8eb9ee80d39f13cbbad56da88ef3a6ee?rating=PG&size=75';
}
$twitter_name = str_replace('@', '', get_the_author_meta('twitter'));
?>
<meta name="twitter:card" value="summary" />
<meta name="twitter:url" value="<?php echo $twitter_url; ?>" />
<meta name="twitter:title" value="<?php echo $twitter_title; ?>" />
<meta name="twitter:description" value="<?php echo $twitter_desc; ?>" />
<meta name="twitter:image" value="<?php echo $twitter_thumb; ?>" />
<meta name="twitter:site" value="@libdemvoice" />
<?
if($twitter_name) {
?>
<meta name="twitter:creator" value="@<?php echo $twitter_name; ?>" />
<?
}
}
?>
Source: Ryan Cullen @artesea
If you don’t know how to work with PHP or running into issues with Method 2, then please use Method 1.
Final Step: Apply to Participate
Just because you added the twitter card support on your website does not mean that it will appear on the twitter website. Quote from the official twitter cards documentation:
We’re in the process of bringing this new content preview experience to users on Twitter. And over the coming weeks we want to generate content previews for more sites from around the web. To participate in the program, you should (a) read the documentation below, (b) determine whether you wish to support Twitter cards, and then (c) apply to participate.
So it is clear that you have to apply to have this activated for your site. We applied for WPBeginner, and it was approved relatively fast. Here is what you need to do to apply:
- Test your Site with the Preview Tool
- Fill out this Form to apply
In the application form, you don’t have to submit the photo card URL and player card URL. Just submit the example summary card URL, which can be any single post on your website.
That’s it. Enjoy your twitter cards in WordPress integration. If you have thoughts, questions, and suggestions, feel free to comment. If you enjoyed this article, then consider following us on twitter @wpbeginner
Hello,
I having a simple problem. I going to add my twitter username to my profile settings. I just add Reap3R_GHS and turn it into http://reap3r_ghs. What can I do?
That’s weird. Did you post it in the support forum for Yoast to see?
Isn’t in Yoast settings but in profile settings…
Hi,
It’s great but because we call the excerpt outside the loop (header), people could get bad surprises for their description.
So here is a good snippet from uplifted.net that fixes the problem :
function get_excerpt_by_id($post_id){
$the_post = get_post($post_id); //Gets post ID
$the_excerpt = $the_post->post_content; //Gets post_content to be used as a basis for the excerpt
$excerpt_length = 35; //Sets excerpt length by word count
$the_excerpt = strip_tags(strip_shortcodes($the_excerpt)); //Strips tags and images
$words = explode(‘ ‘, $the_excerpt, $excerpt_length + 1);
if(count($words) > $excerpt_length) :
array_pop($words);
array_push($words, ‘…’);
$the_excerpt = implode(‘ ‘, $words);
endif;
$the_excerpt = ” . $the_excerpt . ”;
return $the_excerpt;
}
Then you might replace get_the_excerpt() with this :
get_excerpt_by_id($post_id)
Thanks.
Sorry that wasn’t exactly that :
Call the function this way : get_excerpt_by_id($post->ID) otherwise you’ll get notice !
$post_id is undefined.
Plus get_the_excerpt() is deprecated.
You can also add an esc_attr() on $the_excerpt to avoid broken meta if the excerpt has quotes
Thanks !
Finally made a plugin to solve this issue : http://wordpress.org/extend/plugins/jm-twitter-cards/
There is no needs to use any code , simply use WordPress SEO by Yoast as Syed Balkhi has said which is the best for Twitter card
Hi,
There’s no need to use any code. But still my plugin allows you to choose which type of card you want to use on each post. Moreover you can change meta creator (guest blogging) per each post too. I think it’s worthy
Totally Worthy!
When I preview my twitter card, the error says:
“Internal Error. Most likely an fetcher error.”
What to do?
Thank you for the article! I went with method #1. In the twitter preview, I’m only seeing the summary of the post and not the image. I’ve updated the robot.txt file to allow twitterbot. However, it’s still not showing any image in the preview. Any thoughts on this? Thank you in advance.
Look in your view:source to see if you have the image tags. The image is usually pulled from your featured image.
Good article. I activated the summary card…
Anyway: how do you change the anchor text name of the website in the attribution below?
For instance yours is “WordPress Beginner”, other sites use “example.com”. In my case it uses my name. How do you manage it? I’d like to show a piede of my URL like “example.com”
Just wanted to let you know that this post saved me HEAPS of time trying to get this to work. Clear, clean and to the point walkthrough. It’s very much appreciated.
A followup question. I added all the steps to my blog, TheSocialChic.com, but I’m curious as to how much time it usually takes for them to turnaround an approval process. Will I get an email or anything when I (or if) I am approved for Twitter cards? No worries if you don’t know, but I greatly appreciate any guidance on this topic.
Thanks again for such a helpful post. Keep up the good work and I will be definitely staying tuned to all future posts.
Approval time varies. In our experience, twitter cards were enabled on our account before we received an email from twitter. But yes, we did receive an email from twitter.
Thanks for letting me know. Very much appreciated. Keep up the great work with this site. I will be staying tuned.
I now have this on my site, and very exciting as the first blog post I tried worked – fantastic!
But I’ve tried it with a few others and it’s not showing the summary… any ideas?
Did twitter approve your site yet? Remember, they have to approve the site first.
These are great! Just applied to Twitter for mine and will be sharing this. Thanks.
Awesome article, thank you for all these infos.
I got “Summary Card” working for me by following method 2 for my website which is built usng wordpress. I inserted the code to generate meta data in the single-page wordpress template.
I want to know “how” and “when” to use “Photo Card”
You would use photocards on photo specific pages. For example if you have a photo blog, then it makes more sense for you to use a photocard.
Setting this up today
Thank for the twitter card tip.
under my profile my twitter handle was missing, doh…
Wow! Thanks for keeping us updated with the latests. It seems like this will save a lot of time and we won’t have to attribute the source since it is done automatically.
Thanks for the tutorial.. I was wondering what that twitter card on yoast’s plugin was.
But now I know, I hope I get accepted.
Hello, thanks for article, we’ll try this code to implement Twitter Cards.
I’ve one more question (I know this question is not related to this article): How to get such effects like in your post, when we hover mouse over twitter handle it shows popup with follow button, please tell us how to implement that? Thanks in advance.
Always good articles, congratulations.
I’ll try just the code.
Thank you.