Social Media

How to Add Twitter Cards in WordPress (Step by Step)

Do you feel the frustration of Twitter 140 Character Limit?

… Argghh !

Still, Twitter is Great Platform, Many small businesses, Marketers, Bloggers and Individuals have been using the social media platform successfully for years.

Back in 2013, Twitter Launched this awesome feature called ” Twiter Cards”

How Does Twitter Cards Work?

Twitter Cards makes it possible for you to attach rich media to tweets that link to your content.

This is pretty much like sharing a link on Facebook which automatically displays a preview with title, summary, and thumbnail of your page. When your tweet has a link to a site that has twitter cards enabled, You tweet will look like image below( which is pretty normal these days)

  Vs, Old Fashioned Tweet

 

Notice?

That Difference in the first tweet there is a lot of Information in the tweet fetched from the website. On the other hand, In the second tweet… There is no data included from mentioned link.

Okay,

So how to add twitter cards in WordPress

Method 1: Yoast SEO 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.

Simply go to the “Social” page of Yoast SEO settings page. Enter your Twitter username and save changes.

Twitter Cards

After that just click on the Twitter tab.

Under the Twitter tab, you need to enable  “Add Twitter card meta data”.

Select a default card type to choose. You can choose to show summary or summary with a large image.

twitter rich cards

 

Next thing…

You need to do is go to Users » My Profile page. You will see a new field under Contact Info for your twitter username. Enter your twitter username there.

Please Note,

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.

Method 2: Add Code it yourself

This method requires adding code to your theme or child theme files. Simply open the header.php file and add this code just before 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; ?>" />
<?
 }
}
?>

 

Now that you know the benefits of twitter cards, let’s take a look at how to implement in WordPress.

Final Step: Test and Validate

Before links from your WordPress site start showing Twitter Cards, you need to first check it in Twitter card validator.

Simply head over to the Card Validator page on the Twitter developers website. Enter URL of any post from your WordPress site and click on preview card button.

 

Twitter will show you a preview of your Twitter card.

Twitter rich card

Update: Previously you had to apply for participation in the Twitter Cards. However, Twitter has implemented a system that automatically whitelists domains when you test them with the validator or just share an URL on Twitter.

 

Show More

Leave a Reply

Your email address will not be published. Required fields are marked *

four × three =

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Close
Close