Beginners Guide on How to Add Twitter Cards in WordPress

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.

Twitter Cards Preview

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.

Twitter Cards Preview Retweet

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.

WordPress SEO by Yoast - Twitter Cards Settings

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:

Twitter Cards Preview - Author

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.

01 <?php
02 #twitter cards hack
03 if(is_single() || is_page()) {
04   $twitter_url    = get_permalink();
05  $twitter_title  = get_the_title();
06  $twitter_desc   = get_the_excerpt();
07    $twitter_thumbs = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), full );
08     $twitter_thumb  = $twitter_thumbs[0];
09       if(!$twitter_thumb) {
11     }
12   $twitter_name   = str_replace('@', '', get_the_author_meta('twitter'));
13 ?>
14 <meta name="twitter:card" value="summary" />
15 <meta name="twitter:url" value="<?php echo $twitter_url; ?>" />
16 <meta name="twitter:title" value="<?php echo $twitter_title; ?>" />
17 <meta name="twitter:description" value="<?php echo $twitter_desc; ?>" />
18 <meta name="twitter:image" value="<?php echo $twitter_thumb; ?>" />
19 <meta name="twitter:site" value="@libdemvoice" />
20 <?
21   if($twitter_name) {
22 ?>
23 <meta name="twitter:creator" value="@<?php echo $twitter_name; ?>" />
24 <?
25   }
26 }
27 ?>

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:

  1. Test your Site with the Preview Tool
  2. 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


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s