Add a Twitter Card to a WordPress Website

Add a Twitter Card to a WordPress Website

2
Enfuzed Twitter Card Featured

Twitter Cards are somewhat of a new thing Twitter rolled out last year which are, in a way, similar to Facebook’s Open Graph. You may have seen them before when browsing Twitter, expanding a tweet will reveal a little excerpt from an article link along with the title and a image thumbnail to go with it. Twitter Cards, though, pack a bigger punch than that of Facebook’s Open Graph. Twitter made it so that, when setting up a Twitter Card, users are able to choose the style that they want their card to appear like when posted on Twitter.

Enfuzed Design Blog Twitter Card Example

Here I will show you how to easily add a Twitter Card to a WordPress website that will have the option for each individual author on your site to use their own Twitter Handle for articles they write. The Twitter Card will display the author’s Twitter Handle on the websites Twitter Card when an article link from the website is posted on Twitter.

There are 7 different types of display modes Twitter offers that decide how content from a link posted on Twitter will be presented within the card, here is a list with descriptions below:

  • Summary Card – This is the default card, it includes title, description, thumbnail, and Twitter handle attribution.
  • Large Image Summary Card – This is the same as the regular summary card but with a larger, more predominant image above the title and description.
  • Photo Card – Somewhat similar to the large image summary card, the photo card puts a large image up front and center. Photo cards are the only cards that support a blank title.
  • Gallery Card – A gallery card is like a photo card with the difference being a gallery card allows you to display a collection of photos (it supports up to 4 different images) within a tweet. It allows you to provide credit to the photographer as well by specifying a creator tag.
  • App Card – Just like it sounds, this card allows you to showcase a mobile app which includes title, description, app icon, rating, and price of the app. This card is not widely available yet and requires special approval.
  • Player Card – This card is for steaming media such as audio and video and allows you to present your content within an iframe inside the tweet. Unlike other cards, with the player card you control what content displays inside the Twitter Card.
  • Product Card – Allows you to present products and retail items to better drive sales. This card displays an image, description, and two other fields of your choosing which could be price, list availability, list sizes, or anything else you could think of.

Now that we have the basics down of what a Twitter Card is and the different types of Twitter Cards you can implement, let’s get to the fun stuff, giving your WordPress website a Twitter Card.

First thing we will need to do is locate your WordPress website’s header.php file within your theme and open it up in a text editor. Once you have that open, locate the closing head tag:

</head>

Make proper spacing, and above the closing head tag, copy and paste the following code:

<!-- Twitter Card -->
<?php
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 = '<!-- Image Link Here -->';}
$twitter_name = get_the_author_meta('twitter',$post->post_author);?>
<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="@<?php echo $twitter_name; ?>"/>
<?php if($twitter_name) { ?>
<meta name="twitter:creator" value="@<?php echo $twitter_name; ?>"/>
<?php } } ?>
<!-- End Twitter Card -->

Be sure to read the comments in the above code. You will have to insert an image link on line 10 where the comment tag is as well as specify the type of twitter card you want on line 12 where it says value=””.

Now we move on to the next step of this process, adding a Twitter handle field to the user profile in the WordPress backend area. This process is optional but if you decide not to do it you will have to replace the PHP call on line 19 with your actual twitter handle. Setting it up like I have it above lets authors on your website have their own Twitter Card using their personal Twitter Handle.

First thing you have to do is locate your WordPress websites’ functions.php file within your theme and open that in a text editor. Once you have it open scroll to the bottom and find the closing PHP tag:

?>

and paste the follwing code right above that:

/* === Twitter Card Field Add === */
function my_new_contactmethods( $contactmethods ) {
 // Add Twitter
 $contactmethods['twitter'] = 'Twitter';

return $contactmethods;
}
add_filter('user_contactmethods','my_new_contactmethods',10,1);

The above code will add a Twitter Handle input field under your WordPress users profile section and will look something like the picture below.
Twitter Handle Input Field
Now you can add your Twitter Handle in the Twitter input field which is located in the users profile in the WordPress backend under the contact info section. You Do not add the @ symbol before your Twitter handle in this input field as it is already added in the head code from earlier.

Now before you get all excited and go apply for a Twitter Card you should test to see if it works first. To do this you’ll need to visit the Twitter Card Validator. It will ask you to sign in, so sign in using the Twitter account you want the Twitter Card to be displayed on. After you sign in a modal window will pop up asking you to select which type of Twitter Card you want. Make sure you select the same card type that you specified in line 12 of the code we inserted into our header.php file. The next page that comes up should look like the one in the screenshot below:
Twitter Card Validator

You may have to click the “Validate & Apply” tab to show an input where you will need to paste a url to an article from your website. Posting your homepage url will not work, it must be a link to an article on your website. If you followed the instructions correctly you should have all green dots and it will render a preview of your card to the right as seen in the above screenshot.

Once your Twitter Card is displaying how you want it to, just apply and wait. It usually takes a couple weeks to get approved and once you are approved Twitter will send you an email informing you that your Twitter Card was approved.

*Although the above code has been tested and approved on multiple websites, Enfuzed is not responsible for anything that may go wrong when editing your website, performing the above edits are at your own risk.*

2 COMMENTS

  1. Great post! Thanks for the step-by-step.

    Just wondering: do you know if you can use more than one type of Twitter card or are you set to just one type?

    • You can only use one type at a time, but you can change it to any time you want. Just make value=”summary” to value=”different card type”

Leave a Reply to Enfuzed Cancel reply