There are a couple of simple steps to add Facebook, X (formerly Twitter) and LinkedIn share buttons to the header of your story. These allow your readers to easily share your story with their followers. The links are specially formatted links that when selected will open a window with a draft post on the corresponding social platform that includes the story title, description link and an image.
Choosing to show social buttons in the header of your story is optional.
Enable the social sharing buttons
To enable the social buttons, click their ghosted icons in the story header. A panel will pop up, in which toggles allow the selection of the buttons you would like your readers to see:
Adding the story URL for stories published to self-hosting
Shorthand doesn't automatically know what URL your story will be published to, so to ensure that the social buttons link to your story you will need to provide the URL at which the story will finally be hosted. To do this, open the STORY SETTINGS panel by selecting SETTINGS from the top left of the story editor. Here you can add the full URL of where the story will be hosted into the PUBLISHED URL field (ensure you include http:// or https:// at the beginning).
Note: This URL is only used for meta tags and doesn't control where the story is actually published to.
If you don't yet know where the story will be hosted, you can do this step later: at any point before publishing.
Customising image, title, description and other attributes
Shorthand will automatically set a default image, title, and description based on the setup of your story. If you want to customise these you can do so from the SOCIAL SETTINGS panel, which is accessible from the SOCIAL tab:
The first section of the panel enables setting an image, title, and description that a range of sites and apps using the Open Graph protocol will use to reference your story. These include Facebook, LinkedIn and X.
The default card size for Facebook and most other social cards is 1080px wide x 607px high. You can download templates at the right size here and, if you use Photoshop, a .psd tempate with 'smart objects' here.
Aside from the ability to add a custom image, there are two other fields in this section:
Title
The title that will be shown when readers share your story. If left blank, platforms will use the title you have used in the Title section of your story, or the title entered in the Settings panel (this takes precedence). If no title is added to the Title section, the Settings panel or Social panel, then the title that appears in a social-share of your story may be blank or use text from elsewhere in the story.
Description
The description you'd like social platforms to use for shares of your story. If left blank, the subtitle in the Title section of your story or description in the Settings panel will be used. If there is no text in any of those locations, then shares of your story may not contain a description, or may pull other sections of text from your story to use as a description.
Facebook-specific attributes
A section of the Social panel is dedicated to Facebook settings. A field for APP ID enables connecting your story to your Facebook Developer account. This field is optional, and not required for you to enable adding the Facebook button.
X (Twitter) specific attributes
Lower down in the same panel is a section specifically for X (Twitter) settings.
X also uses the Open Graph protocol, so the majority of fields in this section are optional. The information provided at the top of the panel will be used if you leave the X / Twitter section blank, HOWEVER: because X uses specific image and text formats and limitations, to optimise the experience, you may wish to add an image, description, user handle, and short URL specifically for X. This will ensure that your text and image aren't cropped.
X / Twitter description
The default text filled in for a tweet when a reader clicks the X / Twitter share button (the reader can edit)
Via
The X/Twitter handle that the tweet text will say the story has come via (the reader can edit/remove)
Short URL
a short version of the URL where the story is hosted e.g. a bit.ly or custom redirect, to sit at the end of the tweet instead of the full URL
Other sharing buttons
We offer X/Twitter, LinkedIn, and Facebook sharing buttons as standard, but can quote for custom work to add other buttons. Contact us if you'd like to find out more.
Preview & troubleshoot social posts
Facebook, LinkedIn, and X/Twitter provide the following validation tools that may allow you to preview what your social sharing posts will look like, and diagnose issues that will prevent your posts from displaying correctly:
If your social post is showing an image or text that is different from what has been set in Shorthand, it's common for one of these reasons to be cause:
If your Shorthand content is being embedded or rendered inside of a CMS, the social metadata may also be getting set from the CMS, which can override the metadata set in Shorthand.
If you entered a URL into the PUBLISHED URL field under SETTINGS (see further up in this article), the URL may be incorrect. The metadata that Shorthand sets, including where the social image is served from, is based on the URL the page is published to, and the PUBLISHED URL field will override the URL shown in the Publishing panel.
If the social post was previously showing correctly but you updated the image or text, it can often take some time for the social platforms to pick up the change. Using the Facebook or LinkedIn validator tools above may help the platforms pick up the change sooner. You may also need to clear your browser cache.
Create promotional media for your story
Shorthand also provides a way to create social-media-ready images and videos for you to use to promote your story.
Related support document: Share a story link