Skip to content

How to Add Unsupported Social Links in Ghost Using Custom Settings

Ghost supports Facebook, X/Twitter, LinkedIn, Threads, Bluesky, Mastodon, TikTok, YouTube, and Instagram for publications and staff profiles. Add these under Settings → General → Social accounts, then render them with Ghost’s social_url or social_accounts helper.

For a network Ghost does not support, use Custom Settings to add a field to the admin and expose its value to the theme. This keeps the link editable without changing theme files each time.

Custom Settings supports five field types: select, boolean, color, image, and text. This example uses text fields for Dribbble and a public email address.

In the theme package.json file under the config key, add the following:

"custom": {
  "dribbble_page": {
    "type": "text",
    "default": ""
  },
  "email": {
    "type": "text",
    "default": ""
  }
}

Upload the theme to your website, and you will be able to access the new fields at Settings → Site → Design & branding → Customize → Theme → Site wide

In your theme file, where you want to show the values of the fields, you can use the @custom object to access the value for each field. I will use the #if helper to check if there is a value and then output that value.

{{#if @custom.dribbble_page}}
  <a href='{{ @custom.dribbble_page }}'>Dribbble</a>
{{/if}}

{{#if @custom.email}}
  <a href='mailto:{{ @custom.email }}'>{{ @custom.email }}</a>
{{/if}}

Use a descriptive setting name and validate any URL before adding it to the theme.

This post began as an answer to the forum question Configure Social Accounts in General Settings. It was updated after Ghost added more built-in social accounts.

More from the Blog

Latest Ghost Themes