Adding Twitter Cards to Your WordPress Website

In the past, posting links to your Twitter meant your user needed to click on the link to know more about it. It never showed a synopsis. But, things have changed with Twitter cards. You can attach the title, and a brief preview of the content along with the link. This is almost similar to pasting a link to Facebook status. This is a new introduction to twitter, and using it would help create a brilliant experience for your users. Here’s how you can add Twitter cards to your WordPress website.

Let’s understand how Twitter cards work.

Twitter Cards: How they Work?
Your tweet contains a link, and you have enabled Twitter cards. In that case, the link would come with an option “view summary” which will give out a brief on the link. In case of an article, the synopsis of the article will be read. The idea is similar to posting a link on Facebook, giving the user an overview of the contents. With Twitter cards, you get credit for your article, even when you are mentioned in a retweet. Let’s elaborate on this a bit.

Say, you posted an article, and have tweeted it in your Twitter account. Content curators will retweet the article, but owing to the limitation in number of characters, they will not be able to give you the credit. With Twitter cards, you get the credit automatically, as the name will be shown in the link synopsis. This will help increase followers to your account, and will help boost your social media presence. You may be getting good retweets in the past, but with this you are getting sufficient visibility too!

Adding Twitter Cards
There are two major methods of adding Twitter cards to your WordPress website.

SEO by Yoast
Do you use SEO by Yoast plug-in on your WordPress website? If yes, then you are in for some luck. With an in-built integration provided for Twitter cards, you can easily get started with the process with just a few clicks.

In SEO by Yoast plug-in go to settings>social page>add twitter card meta data. Check this box, enter your Twitter username and get started.

Next, go to Users>My Profile>Twitter username. In case you run a site with multi-authors, then you should necessarily get all authors to fill in this data. This is an easy way to integrate twitter cards to your website.

Hard Code the Twitter Card
Go to header.php file and paste the following code to add Twitter cards programmatically

<?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; ?>” />

<?

}

}

?>

Applying Twitter Cards
Just adding twitter cards to your website does not guarantee that it will show up in the tweets as well. You will have to apply and activate this card to your website. How to apply? It is a two-step process that you will need to diligently follow

  • Use Preview Tool to test your website
  • Fill out a form to apply

You will need to submit an example summary card URL i.e. the URL of any post on your website. That’s it, and you can get started with Twitter cards

Deepa is a passionate blogger associated with Semaphore Software. She loves sharing information regarding WordPress tips & tricks. If you are looking for Hire Dedicated WordPress Developers then just get in touch with her.

About deeparanganathan