Social Networks
Configure your social media links in the CMS dashboard and display them on your site. Social links are returned alongside your content in the API responses.
Supported Platforms
Configure links for any of these platforms in your workspace settings under the Social Networks section:
instagram
facebook
linkedin
X (Twitter)
x
TikTok
tiktok
YouTube
youtube
Discord
discord
GitHub
github
How to Retrieve Social Links
Social links are included in the site object returned by the Collections and Blog endpoints. You don't need a separate API call — they come with your content:
Social links in the API response
{
"pages": [...],
"site": {
"name": "My Workspace",
"domain": "example.com",
"defaultLocale": "fr",
"locales": [...],
"socialLinks": {
"instagram": "https://instagram.com/yourpage",
"linkedin": "https://linkedin.com/company/yourcompany",
"x": "https://x.com/yourhandle"
}
}
}{
"pages": [...],
"site": {
"name": "My Workspace",
"domain": "example.com",
"defaultLocale": "fr",
"locales": [...],
"socialLinks": {
"instagram": "https://instagram.com/yourpage",
"linkedin": "https://linkedin.com/company/yourcompany",
"x": "https://x.com/yourhandle"
}
}
}Only configured links are returned. If no social links are set, socialLinks will be null.
Displaying Social Links
Example: Footer social icons
// Fetch pages (social links come in the site object)
const res = await fetch(`${CMS_URL}/api/public/collections/team`, {
headers: { "x-api-key": CMS_API_KEY },
});
const { site } = await res.json();
function SocialLinks({ links }: { links: Record<string, string> | null }) {
if (!links) return null;
const icons: Record<string, string> = {
instagram: "Instagram",
facebook: "Facebook",
linkedin: "LinkedIn",
x: "X",
tiktok: "TikTok",
youtube: "YouTube",
discord: "Discord",
github: "GitHub",
};
return (
<div className="flex gap-4">
{Object.entries(links).map(([key, url]) => (
<a
key={key}
href={url}
target="_blank"
rel="noopener noreferrer"
aria-label={icons[key] ?? key}
>
{icons[key] ?? key}
</a>
))}
</div>
);
}
// Usage
<SocialLinks links={site.socialLinks} />// Fetch pages (social links come in the site object)
const res = await fetch(`${CMS_URL}/api/public/collections/team`, {
headers: { "x-api-key": CMS_API_KEY },
});
const { site } = await res.json();
function SocialLinks({ links }: { links: Record<string, string> | null }) {
if (!links) return null;
const icons: Record<string, string> = {
instagram: "Instagram",
facebook: "Facebook",
linkedin: "LinkedIn",
x: "X",
tiktok: "TikTok",
youtube: "YouTube",
discord: "Discord",
github: "GitHub",
};
return (
<div className="flex gap-4">
{Object.entries(links).map(([key, url]) => (
<a
key={key}
href={url}
target="_blank"
rel="noopener noreferrer"
aria-label={icons[key] ?? key}
>
{icons[key] ?? key}
</a>
))}
</div>
);
}
// Usage
<SocialLinks links={site.socialLinks} />