As of 28th November 2014, the video subscription has been shutdown. All videos are available for FREE to watch.

Display Twitter Cards in Drupal Using Meta Tags Module

Twitter Cards make it possible to attach media to Tweets. The media can be a summary of a page, image or a video. For example, when you see an article summary with a teaser image below a Tweet, that is a Twitter card.

Displaying Twitter cards on your site is simple, all you need to do is add a few meta-tags to your page. These meta-tags are very similar to Open Graph meta-tags that Facebook uses.

Adding the required meta-tags on a Drupal site is pretty easy thanks to the Meta Tags module, just enable the sub-module called "Meta tags: Twitter Cards".

In this tutorial, we'll have a look at the three required steps for setting up Twitter cards.

Step 1: Enable Meta Tags and Meta tags: Twitter Cards Module

In the current stable (7.x-1.0-beta4) version of the Meta Tags module, there is a major bug in the Twitter cards sub-module. Download the 7.x-1.x-dev version or apply the patch in issue #1846978 on drupal.org.

Once you have the right version downloaded, enable "Meta Tags" and "Meta tags: Twitter Cards" module. If you have already used Meta tags module in the past, then configuring Twitter cards should be easy.

1. Go to Configuration -> "Meta tags" (admin/config/search/metatags).

2. Click on Override on the Content Row.

3. Click on the "Twitter cards" field-set to expose the required fields.

Fig 1.0

If you can't see a "Twitter cards" field-set, make sure you have enabled the "Meta tags: Twitter Cards" sub-module.

4. Select "Summary (default)" from the "Twitter card type" drop-down and simply configure the rest of the fields.

The only fields that are required are the "Page URL", Title and Description field. For more details, check out the documentation page.

Fig 1.1

5. The last piece of configuration we need to do is define the twitter:site property. This property item can only be configured from the Global meta tag or any meta tags that are been inherited from the Global meta tag.

Fig 1.2

6. Clear site cache.

Step 2: Test and Preview Meta Tags

Once you have set everything up, go to the Twitter card preview and make sure it displays properly.

Fig 1.3

If the preview is not working check the following:

  • View your page source and make sure the meta-tags are actually appearing.
  • Make sure that the site that you are implementing the tags on is accessible on the Internet. Your localhost site will not work.
  • Clear the site cache.

Step 3: Submit Application

The final bit of work you need to do is submit an application to have your domain whitelisted. Twitter cards will not appear until Twitter approves your site. Make sure you have setup the meta-tags on your production site before you submit the application.

Once your site has been approved by Twitter, you'll be able to see the Twitter cards by clicking on the "View summary" link below each tweet.

Fig 1.4

If you have any questions, please leave a comment.

Tags: 

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 6 years and has successfully completed several large Drupal projects in Australia.

Connect: Twitter drupal.org LinkedIn App.net

Comments

Submitted by Samiksha on

Hi,

I followed all above steps. But when I clicked on tweet button the twitter cards screen which are appearing on twitter validator screen not appearing in my drupal website. Please guide me if I am missing any step.

ivan's picture

Submitted by ivan on

Sorry, I don't quite understand the problem. What do you mean "Twitter card Screen not appearing".

The cards don't appear on your website, they appear in Twitter's timeline.

Submitted by Samiksha on

Hi,

Thanks for replying. Ya this problem is solved. But now when I am validating my url in https://dev.twitter.com/docs/cards/validation/validator then for my development site where i was implementing yesterday Invalid card type is error is showing. And twitter card is not appearing.

Similarly if I registered my url of live website denied by robot.txt error is showing.

Because of these errors the twitter cards are not appearing Twitter's timeline.

There is no option to attach image otherwise i attaches the screenshots of errors.

ivan's picture

Submitted by ivan on

View the HTML source and make sure the "twitter:card" meta tag is visible. Search the Twitter Dev site and find out what "Invalid card type" means.

Also, make sure your development site is not blocked. It needs to be publicly accessible.

Submitted by Maya on

Hi, I'm testing this out, and do have a few questions.

- Can the Twitter Cards be set for individual pieces of content? I see the Twitter Card fields available in the metatags section of a content node, but even when I've changed these, the Global tags still appear to override.

- When submitting the Twitter to validate, do you only need to submit the base URL of the site?

Thanks!
Maya

ivan's picture

Submitted by ivan on

- Can the Twitter Cards be set for individual pieces of content? I see the Twitter Card fields available in the metatags section of a content node, but even when I've changed these, the Global tags still appear to override.

Yes, you should be able to modify meta tags on each node. Try changing other tags, if you're still having trouble then it could be a bug with the module. Have a look in the Metatag queue for other people with a similar problem.

- When submitting the Twitter to validate, do you only need to submit the base URL of the site?

The URL has to point to a page that has the required meta tags. Most often, this would be a node page (example.com/node/1).

Submitted by Sebastian Panache on

For whatever reason, my twitter:image metatags are blank, so there are no images in the summary card. I use the CKEditor module to replace D7s editor. What do I need to tweak to get article images tagged for Twitter to pick up?

ivan's picture

Submitted by ivan on

You need to manually define which image is going to be used. Drupal won't automatically grab an image from the article.

Also, only a single image can be used in twitter:image.

Submitted by Sebastian Panache on

...though this now begs the question, how do I manually define the file to be used? Is there some flag I can attach to the picture from inside CKEditor (e.g. image properties) that metatag could recognize as the photo selected for the twitter:image?

ivan's picture

Submitted by ivan on

Is there some flag I can attach to the picture from inside CKEditor (e.g. image properties) that metatag could recognize as the photo selected for the twitter:image?

No, you can't do this using the Metatag module.

There should be a vertical tab called "Meta tags" where you can manually change the meta tags (twitter:image) for a specific node.

Add new comment