This page has tips for integrating Twitter Cards into popular CMS systems like Wordpress, Tumblr and Blogger. If you have feedback or additional references we should add, please tell us in the forums. Thanks!
Wordpress Site, Self-Hosted or Third-Party Hosted
The Wordpress publishing platform is one of the most popular and widely used CMS systems in the world. It provides rich plugin support for additional functionality, including various plugins for Twitter Cards.
Three plugins in particular make it easy to integrate your Wordpress site with Twitter Cards. They are Jetpack, JM Twitter Cards and WordPress SEO by Yoast.
Jetpack Plugin
Jetpack automatically scans the contents of your post and determines the best Card type. Additionally, Jetpack allows for easy-posting of your blog entries directly to Twitter via the "New Post" interface.
Installation
The best way to install the Jetpack plugin is via the Wordpress Admin Dashboard. Below are basic instructions. For additional help and support, visit the Jetpack plugin site.
- Login to your Wordpress Admin Dashboard
- In the left sidebar, navigate to "Plugins→Add New" (If this doesn't exist, you may need to read this section below)
- In the search prompt, type in "Jetpack" and click "Search"
- In the Jetpack result, click the "Install" link
- When successfully installed, a "Jetpack" section will appear in the left-hand navigation, as shown below:
Configuration
Before you're ready to go with Jetpack, follow these quick instructions to connect your blog to your Twitter account:
- Login to your Wordpress Admin Dashboard
- In the left sidebar, navigate to "Jetpack" and then scroll down and find the "Sharing" section. Click on "Configure". The section looks like the below:
- Next to the Twitter section, click on the "Connect" button and continue to allow your blog to Authorize to your Twitter account.
function tweakjp_custom_twitter_site( $og_tags ) {
$og_tags['twitter:site'] = '@jeherve';
$og_tags['twitter:card'] = 'summary';
return $og_tags;
}
add_filter( 'jetpack_open_graph_tags', 'tweakjp_custom_twitter_site', 11 );
- Make sure your site is accessible by Twitter's web crawler by going to the Dashboard and configuring "Settings→Reading→Site Visibility" to allow search indexing.
- Be sure to submit one of your example posts via the Twitter Card Validator. Once you have the confirmation e-mail, a tweet with your site URL will have a Card attached.
- Login to your Wordpress Admin Dashboard
- In the left sidebar, navigate to "Plugins→Add New" (If this doesn't exist, you may need to read this section below)
- In the search prompt, type in "JM Twitter Cards" and click "Search"
- In the JM Twitter Cards result, click the "Install" link
- When successfully installed, you should see a new entry in the left sidebar named "JM Twitter Cards"
- Login to your Wordpress Admin Dashboard
- In the left sidebar, navigate to "JM Twitter Cards". You should see the following screen:
- In the top-most section, be sure to supply the following:
- Type of Card to use (Summary, Summary w/ Large Image or Photo)
- Personal Twitter Account
- Twitter Account for your Website (or use same as above)
- Meta key associated with Twitter Account (or use same as above)
- Click "Save Changes"
- Make sure your site is accessible by Twitter's web crawler by going to the Dashboard and checking "Settings→Reading→Search Engine Visibility"
- Be sure to submit one of your example posts via the Twitter Card Validator. Once you have the confirmation e-mail, a tweet with your site URL will have a Card attached.
- Login to your Wordpress Admin Dashboard
- In the left sidebar, navigate to "Plugins→Add New" (If this doesn't exist, you may need to read this section below)
- In the search prompt, type in "Yoast" and click "Search"
- In the JM Twitter Cards result, click the "Install" link
- When successfully installed, you should see a new entry in the left sidebar named "SEO"
- Login to your Wordpress Admin Dashboard
- In the left sidebar, navigate to "SEO→Social". You should see the following screen:
- Check the "Add Twitter card meta data"
- Specify your Twitter username
- Click on "Save Changes"
- Make sure your site is accessible by Twitter's web crawler by going to the Dashboard and checking "Settings→Reading→Search Engine Visibility"
- Be sure to submit one of your example posts via the Twitter Card Validator. Once you have the confirmation e-mail, a tweet with your site URL will have a Card attached.
- Login to your Wordpress Admin Dashboard
- In the left sidebar, navigate to "Settings→Sharing"
- Next to the Twitter section, click on the "Connect" button and continue to allow your blog to Authorize to your Twitter account.
- Make sure your site is accessible by Twitter's web crawler by going to the Dashboard and configuring "Settings→Reading→Site Visibility" to allow search indexing.
- Be sure to submit one of your example posts via the Twitter Card Validator. Once you have the confirmation e-mail, a tweet with your site URL will have a Card attached.
- Log into your Tumblr account and go to the Dashboard
- In the right sidebar, navigate to "Customize→Edit HTML"
- Inside the
<head></head>
section at the top, add the following example code:{block:PermalinkPage}
<meta name="twitter:url" content="{Permalink}"/>
<meta name="twitter:site" content="@mytestsite">
{block:Posts}
{block:Text}
<meta name="twitter:card" content="summary">
{block:Title}<meta name="twitter:title" content="{PlaintextTitle}"/>{/block:Title}
<meta name="twitter:description" content="{PlaintextBody}"/>
<meta name="twitter:image" content="{PortraitURL-64}"/>
{/block:Text}
{block:Photo}
<meta name="twitter:card" content="photo">
<meta name="twitter:image" content="{PhotoURL-500}"/>
{block:Caption}<meta name="twitter:description" content="{PlaintextCaption}"/>{/block:Caption}
{/block:Photo}
{block:Photoset}
<meta name="twitter:card" content="photo">
{block:Photos}<meta name="twitter:image" content="{PhotoURL-500}"/>{/block:Photos}
{block:Caption}<meta name="twitter:description" content="{PlaintextCaption}"/>{/block:Caption}
{/block:Photoset}
{block:Quote}
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="{PlaintextQuote}"/>
<meta name="twitter:description" content="{PlaintextSource}"/>
<meta name="twitter:image" content="{PortraitURL-64}"/>
{/block:Quote}
{block:Link}
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="{PlaintextName}"/>
<meta name="twitter:description" content="{PlaintextDescription}"/>
<meta name="twitter:image" content="{PortraitURL-64}"/>
{/block:Link}
{block:Chat}
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="{PlaintextTitle}"/>
<meta name="twitter:description" content="{block:Lines}{block:Label}{Label}: {/block:Label}{Line} • {/block:Lines}"/>
<meta name="twitter:image" content="{PortraitURL-64}"/>
{/block:Chat}
{block:Audio}
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="{block:Artist}{Artist} - {/block:Artist}{block:TrackName}{TrackName}{/block:TrackName}"/>
<meta name="twitter:description" content="{PlaintextCaption}"/>
{block:AlbumArt}<meta name="twitter:image" content="{AlbumArtURL}"/>{/block:AlbumArt}
{/block:Audio}
{block:Video}
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="{PlaintextTitle}"/>
{block:Caption}<meta name="twitter:description" content="{PlaintextCaption}"/>{/block:Caption}
{/block:Video}
{block:Answer}
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="{PlaintextQuestion}"/>
<meta name="twitter:description" content="{PlaintextAnswer}"/>
<meta name="twitter:image" content="{PortraitURL-64}"/>
{/block:Answer}
{/block:Posts}
{/block:PermalinkPage}
- Make sure to customize the value for twitter:siteis your own
- Click "Save"
- Be sure to submit one of your example posts via the Twitter Card Validator. Once you have the confirmation e-mail, a tweet with your site URL will have a Card attached.
- Cards will be shown for individual URLs referenced by permalink to your site.
- You can customize the code above (for example, to add Card meta tags to your root page) by reading the Tumblr documentation.
- Log into your Blogger account
- In the left sodebar, navigate to "Template→Edit HTML"
- Click on "Proceed" to bypass the pop-up window (if one appears)
- In the editor pane, search for
<b:includable id='post' var='post'>
. (We promise it exists!) - Right below the
<b:includable id='post' var='post'>
tag, add the following sample code (so the sample code is "nested" in theb:includable
tag:<meta name='twitter:site' content='@mytestsite'/>
<b:if cond='data:post.firstImageUrl'>
<meta name='twitter:card' content='photo'/>
<meta name='twitter:image' expr:content='data:post.firstImageUrl'/>
<b:else/>
<meta name='twitter:card' content='summary'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta name='twitter:image' expr:content='data:blog.postImageThumbnailUrl'/>
</b:if>
</b:if>
<meta name='twitter:title' expr:content='data:blog.pageName'/>
<b:if cond='data:blog.pageType == "item"'>
<meta name='twitter:description' expr:content='data:post.snippet'/>
<b:else/>
<meta name='twitter:description' content='Description about my Blogger site.'/>
</b:if>
- Make sure the @mytestsite above specifies your site.
- Click "Save Template"
- Be sure to submit one of your example posts via the Twitter Card Validator. Once you have the confirmation e-mail, a tweet with your site URL will have a Card attached.
- Cards will be shown for individual URLs referenced by permalink to your site.
- You can customize the code above by reading the Blogger help documentation.
When properly configured, you will see a "Publicize" section in the right-hand pane of a New Post page. Click the "Edit" link to customize the content of the Tweet. See below:
Advanced Configuration
Additionally, you may want to customize your Twitter Cards further, including adding your own twitter:site. To do so, you can include the following code to your theme's functions.php file:
A few things to note before you're on your way:
Thanks to Jeremy Herve (@jeherve) of Wordpress/Automattic for the twitter:site hint. You can read the full thread here.
JM Twitter Cards Plugin
Installation
The easiest way to install the JM Twitter Cards plugin is via the Wordpress Admin Dashboard. Below are basic instructions. For additional help and support, visit the JM Twitter Cards plugin site.
Configuration
Configuration of this plugin is relatively straightforward. Here are the basics:
A few things to note before you're on your way:
Yoast SEO Plugin
Installation
The easiest way to install the Yoast plugin is via the Wordpress Admin Dashboard. Below are basic instructions. For additional help and support, visit the WordPress SEO by Yoast site.
Configuration
At the time of this writing, configuration of this plugins is limited to only show Summary Cards. Here are the basics:
A few things to note before you're on your way:
Wordpress Site, Hosted on Wordpress.com
Automattic/Wordpress supports hosting of Wordpress sites on their Wordpress.com domain, with over 72M sites and counting.
By default, Wordpress-hosted blogs are enabled for Twitter Cards. Wordpress automatically scans the contents of your post and determines the best Card type. Additionally, Wordpress allows for easy-posting of your blog entries directly to Twitter via the "New Post" interface.
Configuration
Before you're ready to start posting, follow these quick instructions to connect your blog to your Twitter account:
A few things to note before you're on your way:
Tumblr
Tumblr has quickly become one of the most popular blogging platforms for content and photos, with nearly 145M sites and counting.
Configuration
The best example to enable Twitter Cards on a Tumblr site is is on Quora via Dan Leveille (@danlev). A brief of his original post here:
A few things to note before you're on your way:
Again, thanks to Dan Leveille (@danlev) for the great sample code!
Blogger
Google's Blogger is a great platform for publishing rich content. We found the best example code of how to integrate Twitter Cards from Blogger How (@BloggerHow). Our version below:
Configuration
The easiest way to enable Twitter Cards on a Blogger site is the following:
A few things to note before you're on your way:
Again, thanks go out to Blogger How (@BloggerHow) for the great walkthrough and code example!