Social Icons and profiles
Ghost ships with a few default social media profiles, like Twitter and Facebook. While these are usually sufficient to satisfy SEO best practices, you might want to add more of your social media presence to your publication.
There are a few ways to do this in other themes:
- You can use Ghost's Code Injection to dynamically add social media items
- You can maintain additional profiles using Ghost's secondary navigation
Candidus uses a mix of both of these approaches, without making you use your secondary navigation, to add your profiles and icons.
Add social icons to your profiles
Social profiles with icons can be embedded using Code Injection. Candidus also ships with a selection of Simpleicons, a project published under an Open Source License.
Each profile can be added using Candidus' Plugin System. The generic structure looks like this:
<script>
window.CANDIDUS = {
SOCIAL_ACCOUNTS: [
{
title: "<label-next-to-the-icon>", // e.g. 'Github', 'Reddit', 'Pinterest'
slug: "<link-to-the-icon>", // e.g. 'github', 'reddit', 'pinterest'
url: "<link-to-your-profile>" // e.g. 'https://github.com'
},
{ /* Another social account */}
]
}
</script>Check out the examples to get learn more about added profiles with icons.
Example: Add your Github Profile
Candidus shows your social media profiles in the page's footer, next to tags and secondary navigation.
To add your Github Profile, just add the following piece of code into your page's code injection:
<script>
window.CANDIDUS = {
SOCIAL_ACCOUNTS: [
{
title: "Github",
slug: "github",
url: "https://github.com/tq-bit"
}
]
}
</script>Then, change the following attributes to point to your Profile:
- title: The label next to your icon
- slug: The ID by which the icon is recognized (See Icons Overview for a full reference)
- url: The website to which your profile should link
Example: Add your Instagram Profile
Let's do another one. Let's assume that next to your Github profile, you'll also want to refer to Insta.
Move to Code Injection again and extend the SOCIAL_ACCOUNT from before like this:
<script>
window.CANDIDUS = {
SOCIAL_ACCOUNTS: [
{
title: "Github",
slug: "github",
url: "https://github.com/tq-bit"
}, // <- don't forget the comma!
{
title: "Instagram",
slug: 'instagram',
url: "https://instagram.com"
}
]
}
</script>Check our your front page and - here it is:
Icons overview
The following social icons are available to use in your theme:
#youtube
#github
#website