Ghost Integration

Using Code Injection (recommended)

Before you start

Create a brand kit at /dashboard/kits/new (~2 min)
Create an API token at /dashboard (click “New credential”) (~1 min)
Copy your token — you’ll need it below

Go to Ghost Admin → Settings → Code Injection → Site Header and paste the following snippet:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var title = document.title;
    var ogImg = document.querySelector('meta[property="og:image"]');
    if (ogImg) ogImg.content = 'https://socialcard.studio/api/v1/og?token=YOUR_TOKEN_HERE&title=' + encodeURIComponent(title);
    var twitterImg = document.querySelector('meta[name="twitter:image"]');
    if (twitterImg) twitterImg.content = ogImg.content;
  });
</script>

Replace YOUR_TOKEN_HERE with the token from step 3 above.

Using Handlebars templates (advanced — for own-theme users)

If you manage your own Ghost theme, paste this inside {{ghost_head}}in your theme’s default.hbs:

<meta property="og:image" content="https://socialcard.studio/api/v1/og?token=YOUR_TOKEN_HERE&title={{post.title}}">
<meta name="twitter:image" content="https://socialcard.studio/api/v1/og?token=YOUR_TOKEN_HERE&title={{post.title}}">

Replace YOUR_TOKEN_HERE with your actual token. Do not use {{@site.card_studio_token}} — this is not a built-in Ghost variable.

Optional: add &template=dispatch (or verso or margin) to the URL to choose a template.

Template options

Template	Style
`verso`	Editorial — Spectral serif, spacious layout
`dispatch`	Headline — condensed type, high contrast
`margin`	Quiet — minimal, wide margins

Preview all templates at /studio.

Troubleshooting

If cards show a placeholder instead of your branded card, check your dashboard health page for a breakdown of recent render results and any configuration issues.

Need help? Email support@socialcard.studio