CMS Integration Guide

Updated on Thu, 2014-06-19 23:45

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.

  1. Login to your Wordpress Admin Dashboard
  2. In the left sidebar, navigate to "Plugins→Add New" (If this doesn't exist, you may need to read this section below)
  3. In the search prompt, type in "Jetpack" and click "Search"

  4. In the Jetpack result, click the "Install" link
  5. 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:

  1. Login to your Wordpress Admin Dashboard
  2. 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:

  3. Next to the Twitter section, click on the "Connect" button and continue to allow your blog to Authorize to your Twitter account.

    4. 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: 

    1. function tweakjp_custom_twitter_site( $og_tags ) {
    2.     $og_tags['twitter:site'] = '@jeherve';
    3.     $og_tags['twitter:card'] = 'summary';
    4.     return $og_tags;
    5. }
    6. add_filter( 'jetpack_open_graph_tags', 'tweakjp_custom_twitter_site', 11 );

    A few things to note before you're on your way:

    • 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.

    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.

    1. Login to your Wordpress Admin Dashboard
    2. In the left sidebar, navigate to "Plugins→Add New" (If this doesn't exist, you may need to read this section below)
    3. In the search prompt, type in "JM Twitter Cards" and click "Search"

    4. In the JM Twitter Cards result, click the "Install" link
    5. When successfully installed, you should see a new entry in the left sidebar named "JM Twitter Cards"

    Configuration

    Configuration of this plugin is relatively straightforward. Here are the basics:

    1. Login to your Wordpress Admin Dashboard
    2. In the left sidebar, navigate to "JM Twitter Cards". You should see the following screen:

    3. 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)
    4. Click "Save Changes"

    A few things to note before you're on your way:

    • 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.

    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.

    1. Login to your Wordpress Admin Dashboard
    2. In the left sidebar, navigate to "Plugins→Add New" (If this doesn't exist, you may need to read this section below)
    3. In the search prompt, type in "Yoast" and click "Search"

    4. In the JM Twitter Cards result, click the "Install" link
    5. When successfully installed, you should see a new entry in the left sidebar named "SEO"

    Configuration

    At the time of this writing, configuration of this plugins is limited to only show Summary Cards. Here are the basics:

    1. Login to your Wordpress Admin Dashboard
    2. In the left sidebar, navigate to "SEO→Social". You should see the following screen:
    3. Check the "Add Twitter card meta data"
    4. Specify your Twitter username
    5. Click on "Save Changes"

      6. A few things to note before you're on your way:

      • 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.



      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:

      1. Login to your Wordpress Admin Dashboard
      2. In the left sidebar, navigate to "Settings→Sharing"
      3. Next to the Twitter section, click on the "Connect" button and continue to allow your blog to Authorize to your Twitter account.

        4. A few things to note before you're on your way:

        • 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.


          • 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:

          1. Log into your Tumblr account and go to the Dashboard
          2. In the right sidebar, navigate to "Customize→Edit HTML"

          3. Inside the <head></head> section at the top, add the following example code: 
            1. {block:PermalinkPage}
            2.  
            3. <meta name="twitter:url" content="{Permalink}"/>
            4. <meta name="twitter:site" content="@mytestsite">
            5.  
            6.     {block:Posts}
            7.         {block:Text}
            8.             <meta name="twitter:card" content="summary">
            9.             {block:Title}<meta name="twitter:title" content="{PlaintextTitle}"/>{/block:Title}
            10.             <meta name="twitter:description" content="{PlaintextBody}"/>
            11.             <meta name="twitter:image" content="{PortraitURL-64}"/>
            12.         {/block:Text}
            13.  
            14.         {block:Photo}
            15.             <meta name="twitter:card" content="photo">
            16.             <meta name="twitter:image" content="{PhotoURL-500}"/>
            17.             {block:Caption}<meta name="twitter:description" content="{PlaintextCaption}"/>{/block:Caption}
            18.         {/block:Photo}
            19.  
            20.         {block:Photoset}
            21.             <meta name="twitter:card" content="photo">
            22.             {block:Photos}<meta name="twitter:image" content="{PhotoURL-500}"/>{/block:Photos}
            23.             {block:Caption}<meta name="twitter:description" content="{PlaintextCaption}"/>{/block:Caption}
            24.         {/block:Photoset}
            25.  
            26.         {block:Quote}
            27.             <meta name="twitter:card" content="summary">
            28.             <meta name="twitter:title" content="{PlaintextQuote}"/>
            29.             <meta name="twitter:description" content="{PlaintextSource}"/>
            30.             <meta name="twitter:image" content="{PortraitURL-64}"/>
            31.         {/block:Quote}
            32.  
            33.         {block:Link}
            34.             <meta name="twitter:card" content="summary">
            35.             <meta name="twitter:title" content="{PlaintextName}"/>
            36.             <meta name="twitter:description" content="{PlaintextDescription}"/>
            37.             <meta name="twitter:image" content="{PortraitURL-64}"/>
            38.         {/block:Link}
            39.  
            40.         {block:Chat}
            41.             <meta name="twitter:card" content="summary">
            42.             <meta name="twitter:title" content="{PlaintextTitle}"/>
            43.             <meta name="twitter:description" content="{block:Lines}{block:Label}{Label}: {/block:Label}{Line} &bull; {/block:Lines}"/>
            44.             <meta name="twitter:image" content="{PortraitURL-64}"/>
            45.         {/block:Chat}
            46.  
            47.         {block:Audio}
            48.             <meta name="twitter:card" content="summary">
            49.             <meta name="twitter:title" content="{block:Artist}{Artist} - {/block:Artist}{block:TrackName}{TrackName}{/block:TrackName}"/>
            50.             <meta name="twitter:description" content="{PlaintextCaption}"/>
            51.             {block:AlbumArt}<meta name="twitter:image" content="{AlbumArtURL}"/>{/block:AlbumArt}
            52.         {/block:Audio}
            53.  
            54.         {block:Video}
            55.             <meta name="twitter:card" content="summary">
            56.             <meta name="twitter:title" content="{PlaintextTitle}"/>
            57.             {block:Caption}<meta name="twitter:description" content="{PlaintextCaption}"/>{/block:Caption}
            58.         {/block:Video}
            59.  
            60.         {block:Answer}
            61.             <meta name="twitter:card" content="summary">
            62.             <meta name="twitter:title" content="{PlaintextQuestion}"/>
            63.             <meta name="twitter:description" content="{PlaintextAnswer}"/>
            64.             <meta name="twitter:image" content="{PortraitURL-64}"/>
            65.         {/block:Answer}
            66.  
            67.     {/block:Posts}
            68.  
            69. {/block:PermalinkPage}
          4. Make sure to customize the value for twitter:siteis your own
          5. Click "Save"

          A few things to note before you're on your way:

          • 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.

          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:

          1. Log into your Blogger account
          2. In the left sodebar, navigate to "Template→Edit HTML"

          3. Click on "Proceed" to bypass the pop-up window (if one appears)
          4. In the editor pane, search for <b:includable id='post' var='post'>. (We promise it exists!)
          5. Right below the <b:includable id='post' var='post'> tag, add the following sample code (so the sample code is "nested" in the b:includable tag: 
            1. <meta name='twitter:site' content='@mytestsite'/>
            2. <b:if cond='data:post.firstImageUrl'>
            3.    <meta name='twitter:card' content='photo'/>
            4.    <meta name='twitter:image' expr:content='data:post.firstImageUrl'/> 
            5. <b:else/>
            6.    <meta name='twitter:card' content='summary'/>
            7.    <b:if cond='data:blog.postImageThumbnailUrl'>
            8.       <meta name='twitter:image' expr:content='data:blog.postImageThumbnailUrl'/> 
            9.    </b:if>
            10. </b:if>
            11. <meta name='twitter:title' expr:content='data:blog.pageName'/>
            12. <b:if cond='data:blog.pageType == &quot;item&quot;'>
            13.    <meta name='twitter:description' expr:content='data:post.snippet'/>
            14. <b:else/>
            15.    <meta name='twitter:description' content='Description about my Blogger site.'/>     
            16. </b:if>
          6. Make sure the @mytestsite above specifies your site.
          7. Click "Save Template"

          A few things to note before you're on your way:

          • 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.

          Again, thanks go out to Blogger How (@BloggerHow) for the great walkthrough and code example!