Sharing content on Twitter is a great way to drive traffic to your site. Yet, the actual Tweet itself doesn't really provide much information about the content being shared. In best case a standard Tweet would simply contain a small amount of descriptive text written by the user tweeting, a link to the content, a manually uploaded image, and maybe one or two #hashtags or @mentions.
All quite standard stuff, none of which was dynamically retrieved. Besides, if your Tweets are being retweeted your original tweet (and the tweeted content) gets minimal exposure - Twitter Cards changes all of this. Twitter Cards offers the ability to automatically retrieve content from the URL being tweeted using the popular Open Graph Protocol.
Content such as an excerpt of text, an image, or even video, plus much more, can all be dynamically retrieved and displayed within the relevant Twitter card. Not only that, each card will also display direct links to your Twitter name and even allow for 1-click following. That means, if your tweets get retweeted, your information (and shared content) is in a prime location to attract attention, not the user doing the retweeting. This is ideal to increase the number of your Twitter followers.
Two ways to integrate Twitter Cards
Let us take a closer look at how we would go about implementing this game-changing feature into your WordPress site. Implementing Twitter Cards into WordPress can be done in multiple ways. One is via the use of a plugin. Secondly, by modifying your theme code via the use of a child theme.
The first option we will explore is by using a plugin. There are multiple plugins that allow you to easily implement Twitter Cards into your WordPress website. Simply download and install one of the available and popular plugins for this purpose. Plugins can be downloaded through the Plugin Directory or within your WordPress dashboard when you navigate to Plugins.
Twitter Cards Meta Plugin
The Twitter Cards Meta plugin allows you to easily implement Twitter Cards into your WordPress website or blog. When activating the plugin, an options page within your WordPress dashbaord is being created. You can access it via the Twitter Cards admin menu.
Now you can start configuring the Twitter Cards Meta plugin. Fill in the details relevant to your Twitter account, add a default image URL, and select which image you would like to be displayed within your Twitter cards. Finally save your options by clicking the Save Options button.
Yoast SEO Plugin
One of the most popular plugins available for WordPress is Yoast SEO. It is currently counting over one million active installations. This powerful WordPress plugin comes complete with Twitter Card integration out-of-the-box. Most people have this plugin installed for SEO optimization. So chances are, you may already have this particular feature available to you without realising.
Download and install the plugin as normal, and visit the SEO => Social admin menu within your WordPress dashboard. Enter your Twitter username in the field marked Twitter Username and click the Save Changes button. At the top of the page there are tabs for various social media outlets. Now click the Twitter tab to open the Twitter-specific options page with the Yoast SEO Plugin.
Ensure that the Add Twitter card meta data slider is in the Enabled position, and select which card type you would like to use from the drop down list. Once you've completed this step, hit the Save Changes button again to save your options.
One last step is to add your Twitter username to your sites' user account. You can do so via the Users => Your Profile admin menu in your WordPress dashboard. Scroll down your user profile page until you see the For Twitter Cards Meta heading. There you can add your Twitter username in the field provided. Be sure to click the Update Profile button to save your changes properly.
JM Twitter Cards Plugin
JM Twitter Cards is another plugin which allows you to easily integrate Twitter Cards with your WordPress website. It supports all card types, and doesn't conflict with Yoast SEO. This allows you to still make use of other Yoast features if you prefer to use this plugin for your Twitter Card needs.
Upon activating the plugin, you can visit the options page in your WordPress dashbaord by clicking on JM Twitter Cards. Simply fill in the requested details, such as your Twitter username, card type, image size. Now upload a fallback image that will be displayed if a post image doesn't exist.
You're also able to provide additional data that will link to various mobile device stores such as Google Play and the Apple Store. This will allow you to self-promote Apps that may be connected with the content being shared. Using the Post Types tab at the top of the options page, you're further able to select whether your posts, pages and/or attachments will offer you the opportunity of further customize each of your Twitter cards on a per-post basis.
Add Twitter Cards without plugins
Theme developers alike and people who just want to get their hands dirty with some code, can implement Twitter Cards into their WordPress theme with comparative ease. Using a child theme of the particular theme you have activated, simply add the following code to its functions.php file:
function my_twitter_cards() {
if (is_singular()) {
global $post;
$twitter_user = str_replace('@', '', get_the_author_meta('twitter'));
$twitter_url = get_permalink();
$twitter_title = get_the_title();
$twitter_excerpt = get_the_excerpt();
$twittercard_image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');
$twittercard_thumb = $twittercard_image[0];
if (!$twittercard_thumb) {
$twittercard_thumb = 'https://www.example.com/default-image.png';
}
if ($twitter_user) {
echo '<meta name="twitter:creator" value="@' . esc_attr($twitter_user) . '" />' . "\n";
}
echo '<meta name="twitter:card" value="summary" />' . "\n";
echo '<meta name="twitter:url" value="' . esc_url($twitter_url) . '" />' . "\n";
echo '<meta name="twitter:title" value="' . esc_attr($twitter_title) . '" />' . "\n";
echo '<meta name="twitter:description" value="' . esc_attr($twitter_excerpt) . '" />' . "\n";
echo '<meta name="twitter:image" value="' . esc_url($twittercard_thumb) . '" />' . "\n";
echo '<meta name="twitter:site" value="@mhthemes" />' . "\n";
}
}
add_action('wp_head', 'my_twitter_cards');
All we have done here is created a PHP function called my_twitter_cards. This function is hooked into the wp_head action, and assigned some data from whichever post is currently being viewed, to some PHP variables. Don't forget to change the value for $twitter_user to your personal needs and provide the URL of the fallback image for $twittercard_thumb. This data is then being used as the posts' meta data. It is exactly this data that Twitter Cards retrieves and displays on-screen.
Validating your URLs
Upon carrying out any of the above options to implement Twitter Cards into your WordPress website or blog, you need to test the validity of one of your post URLs that can be shared to Twitter. This way you can ensure that the Twitter Cards feature has been correctly implemented and is working properly on your WordPress website as expected.
In some cases - depending on your choice of card type - your domain will automatically be added to a whitelist. That's why it is highly recommended you carry out this validation process. You can do so by copying and pasting a URL from one of your posts into the Twitter Card Validator. Once validated, you will see a preview of how that particular post would be displayed once shared to Twitter. You're now ready to make use of Twitter Cards and share your content with the world!
