Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
10th February 2013

How to implement Twitter cards into a website

Attaching Twitter Cards to tweets shown on your site gives a richer experience when sharing via Twitter

How to implement Twitter cards into a website

Twitter Cards are a great way of adding rich share content to your website. When a user clicks on a Twitter share button or shares a URL via twitter.com, Twitter will crawl the site for tags that add additional content to the tweet. These tags sit in the section of your site and contain information such as the title of the post, a short description of the post, and any media that may appear in that post.

In this tutorial we will show you how to implement these tags on both a static website and WordPress website. We will be using the Twitter Bootstrap for the static section of the tutorial. It is not a requirement, but implementing it gives us a great starting point for our site design. Twitter Bootstrap allows you to quickly get a base CSS in place, with many cool features, such as responsive design and fancy buttons. The tutorial assumes that you know how to set up a WordPress site, and edit a header PHP file in a theme. If you are unsure how to do this, read through the WordPress Codex.

DOWNLOAD TUTORIAL FILES

Create a document

As we’ll be implementing Twitter Bootstrap
into our static website, we need to use the HTML5 standard headers. Create a new HTML document in Dreamweaver and replace the section with
the following. You can change the Title tag to anything you wish, and the viewport tag will be used in our responsive design.

001 < !DOCTYPE html>
002 < html lang=”en”>
003 < head>
004 < meta charset=”utf-8″>
005 < title>Twitter Cards< /title>
006 < /meta>
007 < /meta>< /head>

Add Bootstrap

Grab the Bootstrap files from the resource disc or twitter.github.com/bootstrap and add them to the root of your working directory. Underneath the viewport meta tag from the previous step, add the following code – this will add all the necessary files.

001 < script src=”js/bootstrap.js” type=”application/JavaScript”>< /script>
002 
003 < style type=”text/css”>
004 body {
005 padding-top: 60px;
006 padding-bottom: 40px;
007 }
008 .sidebar-nav {
009 padding: 9px 0;
010 }
011 < /style>
012 < link href=”css/bootstrap-responsive.css” rel=”stylesheet”>

Adding a template

Open step03.html from the resource disc – this file contains a basic template that you can use for your static site. We will change this by adding a Twitter sharing button. If you scale the browser up and down, you’ll notice that the site is responsive.

Add Twitter button

On line 74 of our template, you will see a button that appears in the slider area. Replace the Learn more » with the following code – this will allow us to add a Twitter share button that will act as the entry point for our Twitter Cards crawl. Change the attributes to your details.

001 < a href=”https://twitter.com/share” 
class=”twitter-share-button” data-via=”terrorfall” data-size=”large” 
data-related=”terrorfall” data-hash tags=”WebDesigner205″>Tweet< /a>

Share button JavaScript

Now we’ll jump down to the bottom of our code and add some JavaScript to make our share button work. Just before the closing tag, add the following JavaScript. If you run the page now, you will see that our standard button has been replaced with a Twitter share button.

001 < script>!function(d,s,id){var 
js,fjs=d.getElementsByTagName(s)
[0];if(!d.getElementById(id)){js=d.
createElement(s);js.id=id;js.src=”//
platform.twitter.com/widgets.js”;fjs.
parentNode.insertBefore(js,fjs);}}
(document,”script”,”twitter-wjs”);
< /script>

What’s the meta?!

The Summary Twitter Card is the most common, and will allow you to add basic information as well as a description of an item to URL share. Add the following code within thesection of your page, setting the variables to your own Twitter account. You can add a Twitter account for both your website, and a personal one.

001 < meta name=”twitter:card” content=”summary”>
002 < /meta>< meta name=”twitter:site” content=”@terrorfall”>
003 < /meta>< meta name=”twitter:creator” content=”@terrorfall”>

Page URL

Underneath the last step, add the following. It is important that this is publicly accessible, as Twitter will use this when crawling the page. If you are developing on localhost, it’s a good idea to upload to a server. Once you have done that, add the URL of your page.
001 < meta name=”twitter:url” content=”http://terrordesigns.com/WD205″>

More meta data

We will add a couple more meta tags after the last step. These tags add a Title to our Twitter card, as well as a description. The description is a useful way of getting around the character limit on Twitter as it does not count towards your actual tweet, but still appears in the timeline.

001 < meta name=”twitter:title” content=”Implementing Twitter Cards”>

002 content=”This is a template for a simple 
marketing or informational website. It 
includes a large callout called the 
hero unit and three supporting pieces 
of content. Use it as a starting point to 
create something more unique.”> 


Add an image

Every Twitter Card requires an image of some kind. If the content you are sharing does not feature images, then it may be worth adding your site logo into this attribute. Add the final meta tag in underneath the previous step. Save the file and upload to a server to test your card.

001 < meta name=”twitter:image” content=”http://terrordesigns.com/WD205/img/lolcat.jpeg”>

Testing a card

Go to dev.twitter.com/docs/cards/preview. Here you can test that your meta tags have been added correctly with a manual page crawl. Copy the URL of the page that you just uploaded to your server and paste it into the form. If all has gone well, you should see a preview of your Twitter Card.

Other Card types

There are two other types of Twitter card – Photo and Player. Photo displays an image thumbnail and player displays an embedded video. You can edit which type of Card you are displaying by editing the first meta tag. Change our Card type from Summary to Photo, with the following code

001 < meta name=”twitter:card” content=”photo”>

Two more tags

When we change our Card type to Photo, we need to add two more additional required tags. These tell the Twitter Card the width and height of the image. Add the following code after all previous meta tags. Preview again via the tool to see the changes.

001 < meta name=”twitter:image:width” content=”273″>
002 < meta name=”twitter:image:height” content=”398″>

Player card type

The second card type is Player – this allows us to embed a video from an external source into our card. Change the Card type to Player as per previous instructions, and add the following required tag. The content must come from a secure server with a valid certificate. You can grab the embed URL from any YouTube video.

001 < meta name=”twitter:player” content=”https://www.youtube.com/embed/QH2-TGUlwu4″>

Height and width

As with the Photo Card previously, we need to specify a height and width to note the dimensions for our player. Edit the photo dimensions from the previous Card type to match the following. By setting these values small, our content will be displayed correctly everywhere.

001 < meta name=”twitter:player:width” content=”435″>
002 < meta name=”twitter:player:height” content=”251″>

Set up WordPress

We’ll now show you how to implement Twitter Cards onto a dynamic site powered by WordPress. Set up a new instance of WordPress and open the header.php file in the default theme folder, found at WP-Content>Themes>twentyeleven.

Set up WordPress (2)

With your header.php file open, navigate to just before the closingtag and add the following. This code will make sure that our meta tags are only included in our page, if we are viewing a single post. It will prevent the tags from being added on list of posts.

001 < ?php if(is_single() ) {?> 
002 < ?php } ?>

Add standard tags

Within the previous if statement, add the following. These are our standard tags, and don’t need changing from post to post. You may wish to create a function that changes the card type based on a post category. Otherwise, set all Twitter Cards to Summary.
001 < meta name=”twitter:card” value=”summary”>
002 < meta name=”twitter:creator” value=”@terrorfall”>

Add page link

Adding a page link meta tag to our Twitter card can be done through the get_permalink function. Add this line of code under the previous step to automatically add the URL of the blog post into our meta tag. For more information on WordPress functions and what you can do with them, see the Codex on wordpress.com.

001 < meta name=”twitter:url” value=”< ?php echo get_permalink(); ?>”> 

get_the_title

get_the_title is another WordPress function that allows us to quickly add information to Twitter Card meta tags. Underneath the previous step add the following code. This will add the blog post title into the meta tag dynamically.

001 < meta name=”twitter:title” value=”< ?php  echo get_the_title(); ?>”>


Add a description

Go into your WordPress admin panel and add a custom field to a blog post. Call the custom field
‘tw_description’ and add a short description into the value field. Click Add Custom Field and update your blog entry. Adding the following line of code will allow you to add that description to your meta tag.

001 < meta name=”twitter:description”  value=”< ?php echo get_post_ meta($post->ID, ‘tw_description’, true); ?>”>

Post thumbnail

Use the Featured Image tool on WordPress to add an image to a blog post via the admin panel. In your code, add an if statement that checks for a thumbnail image – you can do this with the following code. Note the addition of another closing curly bracket to close both if statements in this section.

001 < ?php if (has_post_thumbnail($post->ID)) { ?>
002 < ?php } } ?>

Add the thumbnail

The full if statement follows. This final block of code will grab the URL of the featured image and add it to our meta tag. The use of the full variable determines the size of the image and can be set to, small, medium, large or full. Use the Twitter Card test tool to verify that everything has been added correctly.

001 < ?php if (has_post_thumbnail($post->ID)) {
002 $image_url = wp_get_attachment_image_
src(get_post_thumbnail_ id($post->ID), ‘full’);
003 ?> 
004 
005 < ?php } } ?>

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.