Developer docs

How to add social networks to your Ghost site

With the introduction of the secondary navigation in Ghost, it’s possible to build out a custom set of links without affecting your main site navigation. In this tutorial we’ll show you how to create a set of icons that link out to your presence on social media networks.

Prerequisites

Before beginning this tutorial it might be wise to make yourself more familiar with how to download and customise a Ghost theme. Check out our extensive Handlebars theme documentation.

To add items to your secondary navigation head to the Design view within Ghost admin. Add items using the green “+” button on right and reorder items using the handle (dots) on the left.

Secondary navigation within Ghost admin

Note that in the screenshot above the labels have been written in lowercase. This is deliberately done as we’ll be using this label as an identifier for our social icons. Once all the links have been added click the save button at the top of the view.

In this example we’re using Casper, which displays the secondary navigation in the top right of the theme.

Right site of Casper theme with secondary navigation items

Customising your theme

Now that the links have been added, the theme needs to be modified to display icons rather than the labels. Download your Ghost theme and use a code editor to locate the {{navigation type="secondary"}}. In Casper the helper can be found in the site-nav.hbspartial.

<figure class="kg-card kg-code-card">

    {{#if @site.secondary_navigation}}
        {{navigation type="secondary"}}
    {{else}}
        <div class="social-links">
            {{#if @site.facebook}}
                 <a class="social-link social-link-fb" href="{{facebook_url @site.facebook}}" title="Facebook" target="_blank rel="noopener noreferrer">{{> "icons/facebook"}}</a>
            {{/if}}
            {{#if @site.twitter}}
                 <a class="social-link social-link-tw" href="{{twitter_url @site.twitter}}" title="Twitter" target="_blank rel="noopener noreferrer">{{> "icons/twitter"}}</a>
            {{/if}}
        </div>
        {{#unless @labs.members}}
            <a class="rss-button" href="https://feedly.com/i/subscription/feed/{{@site.url}}/rss/" title="RSS" target="_blank rel="noopener noreferrer">{{> "icons/rss"}}</a>
        {{/unless}}
    {{/if}}

<figcaption>Code snippet from Ghost theme Casper</figcaption>

</figure>

The above code has been copied from Casper. Not only is the secondary navigation being displayed here, but it’s also replacing the standard site social links. This has been achieved using the {{#if @site.secondary_navigation}}…{{else}}…{{/if}} that wraps around the secondary navigation and the alternate set of social links.

If your theme is missing the the secondary navigation use the {{navigation type="secondary"}} helper to insert it anywhere within your Ghost theme. To find out more about theming with the secondary navigation check out our navigation docs.

Customising secondary navigation

The Handlebars navigation helper uses a preset template to render the navigation items in an unordered list. The template can be overwritten by creating a new navigation.hbs template file in the partials folder.

<figure class="kg-card kg-code-card">

    <ul class="nav">
        {{#foreach navigation}}
            <li class="{{link_class for=(url) class=(concat "nav-" slug)}}">
                <a href="{{url absolute="true"}}">{{label}}</a>
            </li>
        {{/foreach}}
    </ul>

<figcaption>Default navigation.hbs file</figcaption>

</figure>

For our navigation template we want to customise the secondary navigation, but not the primary. This can be checked with the {{#if isSecondary}}…{{/if}} helper. Here’s an example of using the helper to check for the secondary navigation and customising its structure, while still giving the primary navigation the same structure as in the preset template:

{{#if isSecondary}}
    <!-- secondary navigation -->
    <ul class="nav">
        {{#foreach navigation}}
            <li class="nav-{{slug}}">
                <a href="{{url}}" class="social-link">{{slug}}</a>
            </li>
        {{/foreach}}
    </ul>
{{else}}
    <!-- primary navigation -->
    <ul class="nav">
        {{#foreach navigation}}
            <li class="{{link_class for=(url) class=(concat "nav-" slug)}}">
                <a href="{{url absolute="true"}}">{{label}}</a>
            </li>
        {{/foreach}}
    </ul>
{{/if}}

Adding social icons

To add icons to the navigation we’re going to be creating an SVG Sprite. A sprite is a single element that contains a series of graphics, each graphic can be plucked from this element using an identifier. An SVG is a Scalable Vector Graphic, an image that can be resized without losing detail.

The other reason we’re using SVGs for our social icons is that when they are built into a sprite each SVG icon can be referenced with a named identifier, just like the lowercase labels in the secondary navigation. If you’d like to learn more about SVGs and SVG Sprites check out this write up on CSS Tricks.

Head over to Simple Icons and use the search bar at the top of the page to download the social icons you need. Once you’ve downloaded all the icons head to SVG Sprite Generator and upload all your icons. The site will generate an SVG Sprite for you to download. For reference here is an example of an SVG Sprite:

<svg width="0" height="0" class="hidden">
    <symbol viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="facebook">
        <title>Facebook icon</title>
        <path d="M23.998 12c0-6.628-5.372-12-11.999-12C5.372 0 0 5.372 0 12c0 5.988 4.388 10.952 10.124 11.852v-8.384H7.078v-3.469h3.046V9.356c0-3.008 1.792-4.669 4.532-4.669 1.313 0 2.686.234 2.686.234v2.953H15.83c-1.49 0-1.955.925-1.955 1.874V12h3.328l-.532 3.469h-2.796v8.384c5.736-.9 10.124-5.864 10.124-11.853z"></path>
    </symbol>
    <symbol viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="github">
        <title>GitHub icon</title>
        <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path>
    </symbol>
    <symbol viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="instagram">
        <title>LinkedIn icon</title>
        <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path>
    </symbol>
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="linkedin">
        <title>Mastodon icon</title>
        <path d="M23.193 7.879c0-5.206-3.411-6.732-3.411-6.732C18.062.357 15.108.025 12.041 0h-.076c-3.068.025-6.02.357-7.74 1.147 0 0-3.411 1.526-3.411 6.732 0 1.192-.023 2.618.015 4.129.124 5.092.934 10.109 5.641 11.355 2.17.574 4.034.695 5.535.612 2.722-.15 4.25-.972 4.25-.972l-.09-1.975s-1.945.613-4.129.539c-2.165-.074-4.449-.233-4.799-2.891a5.499 5.499 0 0 1-.048-.745s2.125.52 4.817.643c1.646.075 3.19-.097 4.758-.283 3.007-.359 5.625-2.212 5.954-3.905.517-2.665.475-6.507.475-6.507zm-4.024 6.709h-2.497V8.469c0-1.29-.543-1.944-1.628-1.944-1.2 0-1.802.776-1.802 2.312v3.349h-2.483v-3.35c0-1.536-.602-2.312-1.802-2.312-1.085 0-1.628.655-1.628 1.944v6.119H4.832V8.284c0-1.289.328-2.313.987-3.07.68-.758 1.569-1.146 2.674-1.146 1.278 0 2.246.491 2.886 1.474L12 6.585l.622-1.043c.64-.983 1.608-1.474 2.886-1.474 1.104 0 1.994.388 2.674 1.146.658.757.986 1.781.986 3.07v6.304z"></path>
    </symbol>
    <symbol viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="mastodon">
        <title>Instagram icon</title>
        <path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913a5.885 5.885 0 0 0 1.384 2.126A5.868 5.868 0 0 0 4.14 23.37c.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558a5.898 5.898 0 0 0 2.126-1.384 5.86 5.86 0 0 0 1.384-2.126c.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913a5.89 5.89 0 0 0-1.384-2.126A5.847 5.847 0 0 0 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227a3.81 3.81 0 0 1-.899 1.382 3.744 3.744 0 0 1-1.38.896c-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421a3.716 3.716 0 0 1-1.379-.899 3.644 3.644 0 0 1-.9-1.38c-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 1 0 0-12.324zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405a1.441 1.441 0 0 1-2.88 0 1.44 1.44 0 0 1 2.88 0z"></path>
    </symbol>
    <symbol viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="pinterest">
        <title>Pinterest icon</title>
        <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.401.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"></path>
    </symbol>
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="youtube">
        <title>YouTube icon</title>
        <path d="M23.495 6.205a3.007 3.007 0 0 0-2.088-2.088c-1.87-.501-9.396-.501-9.396-.501s-7.507-.01-9.396.501A3.007 3.007 0 0 0 .527 6.205a31.247 31.247 0 0 0-.522 5.805 31.247 31.247 0 0 0 .522 5.783 3.007 3.007 0 0 0 2.088 2.088c1.868.502 9.396.502 9.396.502s7.506 0 9.396-.502a3.007 3.007 0 0 0 2.088-2.088 31.247 31.247 0 0 0 .5-5.783 31.247 31.247 0 0 0-.5-5.805zM9.609 15.601V8.408l6.264 3.602z"></path>
    </symbol>
    <symbol viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="twitter">
        <title>Twitter icon</title>
        <path d="M23.954 4.569a10 10 0 0 1-2.825.775 4.958 4.958 0 0 0 2.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 0 0-8.384 4.482C7.691 8.094 4.066 6.13 1.64 3.161a4.822 4.822 0 0 0-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 0 1-2.228-.616v.061a4.923 4.923 0 0 0 3.946 4.827 4.996 4.996 0 0 1-2.212.085 4.937 4.937 0 0 0 4.604 3.417 9.868 9.868 0 0 1-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 0 0 7.557 2.209c9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63a9.936 9.936 0 0 0 2.46-2.548l-.047-.02z"></path>
    </symbol>
</svg>

This SVG Sprite will need to be inserted into your Ghost theme immediately after the opening <body> tag, which will most likely be in your default.hbs file. Save this change and switch back to the navigation.hbs file.

The icons are present in the theme, but they need to be referenced in a specific manner so they will appear in the navigation. For that we need to use an <svg> and <use> tag. Replace the anchor, <a> tag, of the secondary navigation with the following code:

<a href="{{url}}" class="social-link">
    <svg width="16" height="16" role="img" aria-label="{{slug}} icon">
        <use xlink:href="#{{slug}}"></use>
    </svg>
</a>

The {{slug}} helper shown in this code will output the label in each of the navigation items. This will reference the appropriate SVG icon within the SVG Sprite added to the theme.

Here’s another example along with the rest of the navigation.hbs file:

<figure class="kg-card kg-code-card">

    {{#if isSecondary}}
        <ul class="nav">
            {{#foreach navigation}}
                <li class="nav-{{slug}}">
                    <a href="{{url}}" class="social-link">
                        <svg width="16" height="16" role="img" aria-label="{{slug}} icon">
                            <use xlink:href="#{{slug}}"></use>
                        </svg>
                    </a>
                </li>
            {{/foreach}}
        </ul>
    {{else}}
        <ul class="nav">
            {{#foreach navigation}}
                <li class="{{link_class for=(url) class=(concat "nav-" slug)}}">
                    <a href="{{url absolute="true"}}">{{label}}</a>
                </li>
            {{/foreach}}
        </ul>
    {{/if}}

<figcaption>navigation.hbs code with customised secondary navigation</figcaption>

</figure>

Upload and test

The final step to is to ensure all the changes have been applied, zipping the theme up and uploading it to the Design view within the Ghost admin. Once the theme has been activated view your site and check if the social icons are appearing and have the right URLs added.

Use our GitHub Actions integration to automatically upload changes to your theme whenever you push code to your GitHub repo 🚀

Casper with a customised secondary navigation, with icons

Icons are inheriting the styles that already exist for the facebook and Twitter social links

Summary

Woohoo! You’ve just made your own custom social network navigation 🙌. Not only are you representing your social profiles on your website, but you’ve also created a logical configuration for maintaining and updating your social media profiles. This same technique can be used to add sharing buttons to your articles. Check out some of our other navigation helpers to improve how your audience navigate your site.