CMS Integration Guide

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.

      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:

       
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 );

      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”

              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.

                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.

                By default, Tumblr has Twitter Card meta tags enabled, and “smart suggests” the Card based on your post type. However, if you want to further customize the Twitter Cards, you can read this Quora post from Dan Leveille (@danlev).

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

                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!