How To Add Twitter Cards To Your WordPress Website

MarketingSalesFacebookInbound MarketingPerspectivesNews

Enter your name and email below to receive all our valuable blog posts straight to your inbox.

Twitter is starting to roll out a new feature called Twitter Cards. You may have noticed this new feature being used by some of your favorite Twitter Users. The summary card looks something like this.

What a WordPress Twitter Card Looks Like

It’s a nice way for your followers to see a snippet of the webpage you are linking to along with a thumbnail.

This handy new feature is not currently available to everyone.
In order for this new feature to work with your WordPress website you have to do two things.

1. Add some code to your header.php file
2. Apply to participate in Twitter Cards

First off, let’s add the needed code to your WordPress website. Login to your dashboard and click the Editor link under your Appearance Menu.

Wordpress Appearance Menu

On the right side of your Editor will be a list of Templates. The amount of files listed depends on your theme but we are only interested in one at the moment. Header.php

Wordpress Template List

Once the Header code has loaded you want to slowly scroll down and look for the end of the head section of code. You will know by looking for the closing tag, </head>.
You will paste the code right before that closing tag. Be sure to change our username to your username in the code before saving or it will not work. Here is the code to copy.

<?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_name   = str_replace(‘@’, ”, get_the_author_meta(‘uhurunetwork‘));
?>
<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=”@uhurunetwork” />
<?
if($twitter_name) {
?>
<meta name=”twitter:creator” value=”@<?php echo $twitter_name; ?>” />
<?
}
}
?>
Once you have updated your file you are now ready to apply. Head on over to the Twitter Card Application page.

Sign Up For Twitter Card

After you have logged in and filled out some of the info you will most definitely want to preview your Twitter Card to make sure you did everything correctly. Twitter will deny your application if something is broken. Copy and paste the link to one of your blog posts.

Preview Twitter Card

Assuming you installed the code to your WordPress site correctly your preview should look something like this.

Working Twitter Card

Congratulations! You have signed up for Twitter Cards. Twitter will now review your application and send an email regarding your status.

Wordpress Twitter Card Installed

Are you using Twitter Cards? Share with us in the comments so we can check them out.

2 thoughts on “How To Add Twitter Cards To Your WordPress Website

Leave a Reply

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

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

Inbound Marketing Strategy: The Foundation for Your Online & Lead Generation Success

“Once creating an inbound marketing strategy is no longer a new concept for you and your team, you’ll be able to confidently implement these tips. Your success begins today—just make the first move and start planning.”

Categories: Inbound Marketing Read Article

The Ultimate Guide to Client Onboarding

Looking at our numbers and the results of others’ onboarding processes, we’ve seen how crucial it is to make sure this is done right. Continue on to get Uhuru’s favorite tips, tricks, and best practices on how to implement a proper client onboarding process in order to build great relationships — and maintain them.

Categories: Business Strategy, Sales Read Article

Creating Custom HubSpot Email Templates [Step-by-Step Guide]

The majority of consumers won’t spend more than a few seconds looking at something in their inbox if it doesn’t have a certain appeal… They want it to look and feel great, they want to be inspired – what they don’t want is something that feels boring or looks like the company didn’t care to put in the proper effort.

In this handy guide, we’ll show you how to create and customize HubSpot email templates for optimal campaign performance.

Categories: HubSpot, Marketing Strategy Read Article