How to set up Twittercards

Twittercards are a way of adding nice previews of your website content, shown when someone tweets a link to it. Fortunately, Impact Stack provides a very simple way of setting these up for your site:

Go to Manage > Advanced Setting > Site settings > Metatag and click "Override" or "Edit" next to “Content”:

Click the plus sign next to the “Twitter card” section:

(If you don’t see this section, just ask More Onion Support to enable the “twittercards metatag” module)

Most of the fields should already be filled in for you – all you need to add are:

  • Twittercard type (see below)
  • Creator's Twitter account – add your organisation’s main Twitter account
  • Creator's Twitter account ID – this is a number. Find this by entering your Twitter account name into sites like https://tweeterid.com/ (if this site doesn't work, simply search for “find twitter id” for alternatives)

And click “save”

Examples of different Twittercard types

Summary:

Summary with large image:

 

Setting up your Twittercard for an action

Reach the "content" editing step of your action. Then, open the "Open Graph meta tags (e.g. for Facebook sharing)" section by clicking on the + on the left of the section.

By default, the title of the card will be the title of your action and the card description will be the summary of the action. To add a custom summary to your action, scroll up to the "Content" part of the same page and click on the red "edit summary" near the "main text". If no summary is entered, the first lines of your main text will be used.
 
The image displayed in the Twittercard can be customised under the "Thumbnail image". Please note the following conditions for the picture to be used by the Twittercard:
  • Do not use a generic image such as your website logo, author photo, or other image that spans multiple pages,
  • Image must have an aspect ratio of 2:1,
  • Image must have the minimum dimensions of 300x157 or maximum of 4096x4096 pixels,
  • Image must be less than 5MB in size,
  • JPG, PNG and GIF formats are supported. Only the first frame of an animated GIF will be used. In particular, SVG is not supported.

Please note that these settings are also used for the links shared on Facebook, for example.

Testing your Twittercards

After doing the above steps and having published your action, go to https://cards-dev.twitter.com/validator First you’ll need to log into Twitter. Then paste in the URL of one of your Impact Stack pages you want to be shared on Twitter, and you should see the preview appear.

Make sure to test all potential URL versions of your action! The list of internal redirects of an action can be found under the action first wizard step > Show advanced settings > URL redirects.

Further reading

Twitter provides a more advanced documentation about cards of the type "Summary with large image" on their developer site.

Special thanks to Jonathan Nichols from Friends of the Earth UK, who wrote the first version of this article! Visit their Impact Stack installation: act.friendsoftheearth.uk

Have more questions? Submit a request