How to Add Twitter Cards in WordPress?

How to Add Twitter Cards in WordPress?

Often times, you may notice some tweets include a collection of large or small images, along with embedded audio/ video files. This can be easily achieved via the Twitter Cards feature. It’s a great way to boost your website presence when the content is shared on Twitter platform.

Here, we will guide you through how to add such a useful feature to WordPress using three different methods. Note that, some need-to-know solutions for Twitter cards issues are also included. Now, let’s scroll down to the point.

How to Embed Twitter Cards to a WordPress Site?

Enabling Twitter cards on your WordPress site is a super-easy task that can be done through both automatic and manual methods. As shown, we’ve pulled together the following three options to add the Twitter Card support:

Option 1 – WordPress SEO by Yoast Plugin
Known as an SEO solution, WordPress SEO by Yoast also gives a basic support for Twitter cards amongst the listed features. That means, this multi-purpose plugin has built-in integration for Twitter cards, and you can switch it on within a few clicks. Note that, it is available for free download both from the WordPress dashboard and below “Download URL”.

Download URL: https://wordpress.org/plugins/wordpress-seo/

WordPress SEO by Yoast Plugin

Once logged onto the backend of WordPress, go to “SEO” > “Social” from the left sidebar menu. Then, enter the “Twitter” tab and check the box saying “Add Twitter Cards Meta Data” to turn this feature on. Meanwhile, choose your preferred “Card Type” from the drop-down list. Beware that, there are only two default types to choose from: “Summary” and “Summary with Large Image”.

Add Twitter Card Meta Data

If done, go back to the main section of “Social” and switch to “Accounts” as follows. From here, fill in the “Twitter Username” that will be displayed when the blog content is shared. This should only be your username rather than the URL or “@XXX”. Do click the bottom “Save Changes” button.

Enter Twitter Username

If you’re running a multi-author site, it’s advisable to let your authors enter the Twitter username via “Users” > “My Profile”. In the “Contact Info” section, just complete the “Twitter Username” box and each author would get credit for his/her work as well.

Tell About Twitter Username

Option 2 – JM Twitter Cards Plugin
Compared to the aforementioned plugin, the JM Twitter Cards plugin supports a wider range of Twitter Cards and also allows you to implement a specific “Card Type” for individual post. On top of that, this WP plugin still makes it possible to:

  • Add Twitter usernames for your authors and website in the tweets.
  • Specify the image to be showed in the cards and further customize the image size.
  • Preview the Twitter cards directly from your post editor page and then embed a fallback image in the posts.
  • Supply related app information for your App Card with three optional languages (such as English, Spanish and French).

Note also that, the JM Twitter Cards is fully compatible with WordPress SEO by Yoast and Jetpack plugins. Hence, you’ll be able to use them together without a fuss.

Download URL: https://wordpress.org/plugins/jm-twitter-cards/

JM Twitter Cards

Once installed and activated this plugin, just jump into “JM Twitter Cards” > “General” from the WordPress admin sidebar. Now, input the “Creator – the creator of content” and “Site – the owner of the website” in the following boxes. There are total four “Card Types” to use: “Summary”, “Summary below Large Image”, “Photo” and “Application”. To enable “Open Graph” and “Excerpt”, just choose “Yes” here.

Set General Settings

Inside the “Meta Box” tab, choose to “Display” the meta box so that you can select a card type for a post and also upload a card image from the local computer or elsewhere.

Display Meta Box

Important to Note: Whichever plugin you decide to use, it will be necessary to validate or apply for Twitter cards at last. Taking the example of “JM Twitter Cards” plugin here, just click this “Validator” button within the same “Meta Box” tab.

Card Validator

Once logged onto the Twitter account, simply fill in the URL of a post/page and hit the “Preview Card” button. If successful, you will notice a pop-up box that either displays an approval confirmation or says you should request approval. If there is no “Request Approval” button, then this site has been approved for the chosen card type.

Request Approval

The last step is to click this “Request Approval” button to complete the following form.

Complete Form

Option 3 – Add Meta Code Manually
This requires you to manually edit the meta code of Twitter cards. Simply copy and paste the following configuration code to the “header.php” file located at “Appearance” > “Editor”. Note that, those codes must be put before the “head” tag.

<?php
#twitter cards hack
if(is_single() || is_page()) 
{
    $twitter_title = get_the_title();
    $twitter_url = get_permalink();
    $twitter_thumbs = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), full );
    $twitter_desc = get_the_excerpt();
    $twitter_thumb = $twitter_thumbs[0];
    $twitter_name = str_replace('@', '', get_the_author_meta('twitter'));
    if(!$twitter_thumb) {
        $twitter_thumb = 'YourThumbURL';
    }
?>
    <meta name="twitter:url" value="<?php echo $twitter_url; ?>" />
    <meta name="twitter:card" value="summary" />
    <meta name="twitter:description" value="<?php echo $twitter_desc; ?>" />
    <meta name="twitter:title" value="<?php echo $twitter_title; ?>" />
    <meta name="twitter:site" value="@YourUsername" />
    <meta name="twitter:image" value="<?php echo $twitter_thumb; ?>" />
<?php
    if($twitter_name) 
    {
?>php
    <meta name="twitter:creator" value="@<?php echo $twitter_name; ?>" />
<?
    }
}
?>

Need-to-Know Solutions for Twitter Cards Validator Issues

It’s inevitable that you’ll encounter a few small bumps when installing Twitter cards in WordPress. In the following, we’ve listed potential validating issues with our fixes.

  1. If you receive a message stating that “No Card Found (Card Error)”, the chances are that the meta data of Twitter cards has not added to your “header.php” file. Also, this issue would be triggered when you don’t select the right settings but hit the “Save” button in the plugin.

    Unable to Render Card

    If this error persists and you’re sure all settings are correct, then try using another plugin. For those messages like “Internal Server Error” or “Unable to Render Card Preview”, just try it again a few minutes later.

  2. If you still get a weird message saying that the site is “not whitelisted”, there is a possibility that you use the “Card Type” that hasn’t been validated by Twitter. As there is no effective fix to allow Twitter users to validate a second card type, you’d better switch back to the applied type afterwards.