Social links
The icon row in Quiet's footer: nine accounts from Ghost's own settings, an RSS button, and any other platform through two lines in code injection.
A row of small icons in the footer. Nine platforms come from Ghost's own settings; anything else takes one line of code injection.
The nine built-in accounts
Go to Settings → Social accounts.
Fill in the accounts you have. Ghost validates each address as you type.
Save. The icons appear in the footer in this fixed order.
Instagram, X, Facebook, LinkedIn, Bluesky, Threads, Mastodon, TikTok, YouTube.
The RSS button
Always present, at the end of the row, and it points at the right place on its own: /articles/rss/ when the routes file is installed, /rss/ when it is not. See The archive.
Everything else
Ghost has fields for nine platforms. For anything else, add a meta tag in Settings → Code injection → Site header:
Setting up custom social links in Ghost Admin
Custom social icons in the footer
<meta name="quiet-social-github" content="https://github.com/your-name">
<meta name="quiet-social-substack" content="https://yourname.substack.com">
<meta name="quiet-social-email" content="mailto:[email protected]">Icons are built in for these:
The nine native platform names work here too (instagram, x or twitter, facebook, linkedin, bluesky, threads, mastodon, tiktok, youtube), which matters for the duplicate rule below.
A custom icon
For a platform with no built-in icon, add an anchor block in the same Site header field:
<div data-quiet-social-links hidden>
<a data-platform="telegram" href="https://t.me/your-name"></a>
<a data-name="My forum" href="https://forum.example.com"
data-svg='<svg viewBox="0 0 24 24"><path d="M12 2 2 22h20L12 2Z"/></svg>'></a>
</div>| Attribute | What it does |
|---|---|
href | Required. Where the icon links to. Web addresses only |
data-platform | Use a built-in icon by name |
data-name | The accessible label, for a platform with no built-in icon |
data-svg | Your own icon, as inline SVG |
data-color | A hex colour, for example #444444 |
Keep the hidden attribute
hidden on the wrapping <div> is what stops the raw links flashing on screen before Quiet moves them into the footer. Without it, readers see a stack of bare links at the bottom of every page for a moment.
Duplicates and order
- Native wins. If you set Instagram in Settings → Social accounts and also add
quiet-social-instagram, only the native one renders. - The order is the nine native accounts first, then RSS, then your custom links in the order you wrote them.
Removing a link
Clear the field in Settings → Social accounts, or delete its meta tag. To hide the RSS icon, one rule in Settings → Code injection → Site header does it:
<style>
[data-social-platform="rss"] { display: none; }
</style>With JavaScript switched off
The nine native accounts and RSS still render: they are part of the page. Custom links do not appear, because it is a script that places them.
Navigation
Set up Quiet's menus: a dash makes a header dropdown, overflow tucks into a More menu, and a hash in the secondary menu makes a footer column.
Editorial conventions
Every internal tag Quiet reads, in one place. The ten homepage sections, the introduction layouts, the post and page opening layouts, the drop cap, the portfolio, podcast episodes, films and footer legal links. Read this first.