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