Social Links
Show your readers where to follow you. Meridian supports the two social links Ghost provides natively, plus 20+ others through a single Code Injection snippet.
Meridian renders social links in two places: the site footer and author byline / author archive. Ghost natively supports two social platforms — Facebook and X (formerly Twitter). For everything else — Instagram, YouTube, LinkedIn, Substack, Mastodon, Bluesky, and more — Meridian provides a simple Code Injection snippet you paste once.
Where these links appear
Custom social links appear in the footer by default, next to the standard Facebook and X icons. Per-link placement controls let you scope a link to footer-only or author-only (see Advanced below).
Standard Ghost social links
Ghost lets you set a Facebook page URL and an X profile URL directly in your site settings. These are the easiest to configure.
Open Ghost Admin
Log in to Ghost Admin.
Open Social accounts
Go to Settings → General → Social accounts.
Edit and paste your Facebook URL
Click Edit and paste your Facebook page URL into the URL of your publication's Facebook Page field.
Save
Click Save — the icon will appear in your footer immediately.
X (formerly Twitter)
Open Ghost Admin
Log in to Ghost Admin.
Open Social accounts
Go to Settings → General → Social accounts.
Edit and paste your X URL
Click Edit and paste your X profile URL into the URL of your X profile field.
Custom social links
Ghost only exposes Facebook and X out of the box. Meridian adds support for 20+ other platforms — Instagram, YouTube, LinkedIn, Bluesky, Mastodon, Substack, Patreon, GitHub, RSS, email, and more — through a single snippet you paste once into Ghost's Code Injection field.
Code Injection is required
Custom social links are added through Ghost's built-in Code Injection feature. You don't need to edit theme files or know how to code — just paste the snippet and replace the URLs with your own.
Open Ghost Admin
Log in to Ghost Admin.
Open Code injection
Go to Settings → Code injection.
Paste your social links
Copy the block below into the Site Header box. Each line is one social link — change the platform name and the URL on each line, delete the lines you don't need, and save.
<meta name="meridian-social-instagram" content="https://instagram.com/your-handle">
<meta name="meridian-social-youtube" content="https://youtube.com/@your-channel">
<meta name="meridian-social-linkedin" content="https://linkedin.com/in/your-profile">
<meta name="meridian-social-bluesky" content="https://bsky.app/profile/your-handle">
<meta name="meridian-social-mastodon" content="https://mastodon.social/@your-handle">
<meta name="meridian-social-substack" content="https://your-name.substack.com">
<meta name="meridian-social-rss" content="https://your-site.com/rss/">Save
Click Save and reload your site — the new icons will appear right next to your Facebook and X icons.
One link per line
If a line has a typo or a wrong URL, it only affects that line. Your other links will still appear correctly. To remove a link later, just delete the line.
Supported platforms
Use one of these slugs in name="meridian-social-<slug>":
facebook | twitter (or x) | instagram |
youtube | linkedin | tiktok |
threads | bluesky | mastodon |
pinterest | reddit | github |
discord | telegram | whatsapp |
substack | patreon | medium |
rss | email (or mail) | link |
For email links, use a mailto: URL — for example content="mailto:[email protected]".
Advanced: per-link options & custom platforms
The simple meta-tag form above is enough for almost everyone. If you need any of the following, switch to the <a> block form:
- The platform isn't in the list above (e.g. Goodreads, Twitch, Spotify) — paste a custom SVG.
- You want a link to appear in only the footer or only the author byline.
- You want a different visible label.
Paste this block into the Site Header box (you can use it together with the meta-tag form):
<div data-meridian-social-links hidden>
<!-- A platform that's not in the supported list — paste an SVG icon -->
<a data-name="My Forum" href="https://forum.example.com"
data-svg='<svg viewBox="0 0 24 24" fill="currentColor"><path d="..." /></svg>'></a>
<!-- Show a link only in the footer -->
<a data-platform="discord" href="https://discord.gg/your-server" data-placements="footer"></a>
<!-- Use a custom visible label -->
<a data-platform="youtube" data-name="Watch on YouTube" href="https://youtube.com/@your-channel"></a>
</div>Attribute reference
| Attribute | Required | What it does |
|---|---|---|
href | Yes | The URL the icon links to. |
data-platform | No | One of the supported platform slugs. If you leave this out, Meridian will try to detect the platform from the URL's hostname. |
data-name | No | The visible label (used by screen readers and as the tooltip). Defaults to the platform's name. |
data-placements | No | Where the link appears. Use footer, author, or footer, author. Defaults to both. |
data-svg | No | A custom SVG icon. Use this for platforms that aren't in the supported list. |
Where to find SVG icons
Need an SVG icon for a platform that isn't supported? These libraries let you copy an SVG with one click:
- Font Awesome Brands — official brand marks; this is the icon set Meridian uses internally, so anything you pick here will look right at home.
- Simple Icons — alternative library covering thousands of services with consistent single-colour brand marks.
- Lucide, Tabler Icons, Phosphor Icons — line-style icon sets, useful when no brand mark exists.
Open the icon in your library of choice, click "Copy SVG", and paste it into data-svg='...' (note the single quotes around the SVG — keep those exact).
Author social links
Ghost gives every author a Facebook URL and Twitter / X username field on their profile (Settings → Staff → click an author → Edit). When set, these surface as social icons next to the author's byline on every post they wrote and on their author archive page.
To add more platforms per-author, use the <a> block form above with data-placements="author".
Troubleshooting
A link isn't showing up
Check the URL — it must start with https:// (or http:// / mailto:). If the URL is misspelled or missing the protocol, Meridian will skip just that line and leave the others alone. Open your browser's developer console (right-click → Inspect → Console) and look for warnings starting with [meridian social links].
The whole snippet looks broken after pasting
Some text editors and word processors automatically replace plain quotes (") with "smart quotes" (" and "). HTML doesn't understand smart quotes. If you copied the snippet from a Word doc or chat message, paste it into a plain-text editor first (Notes app, Notepad, or Ghost's Code Injection field directly) so the quotes stay straight.
I want to remove or temporarily hide a link
To remove a link permanently, delete its line. To hide a link temporarily, wrap the line in an HTML comment:
<!-- <meta name="meridian-social-instagram" content="https://instagram.com/your-handle"> -->The link will be ignored until you remove the <!-- and --> markers.
Navigation
Meridian uses Ghost's two navigation lists for two different purposes — the primary nav drives the masthead section bar; the secondary nav drives the hamburger drawer and footer columns.
Editorial conventions
The internal tags, flags, and visibility rules Meridian uses to change rendering. Read this first — these conventions touch most of the other advanced features.