Additional social accounts in general settings

Ideas
70

There is no short answer to this in my opinion but maybe the Ghost Staff can chime in here. I’m not even sure this will work with the Ghost hosted solution because I run my own server and ghost blog but here is how I did it with the stock Casper theme:

What I did was find a svg version of the social icon that I wanted to use. In my case it was github. You can find an example here:

Download that svg and copy the text from that file in a text editor. You’ll probably need to open it with something like notepad on windows or textedit on mac. Don’t just double click on it because it will probably open as an image - you want the text content of the file.

Create a new file at /content/themes/casper/partials/icons called github.hbs (in this example I used github.hbs because that was the social link I wanted to add; you should name it whatever is appropriate for the site. e.g. facebook.hbs, instagram.hbs etc.) and paste the contents of the text of the svg file you downloaded into the new file. Save that file.

Open the file /content/themes/casper/partials/site-nav.hbs and add the following code replacing the href and the {{> “icons/github”}} values with the url of your social link and the name of the icon without the .hbs extension. Here is an example:

<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">{{> "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">{{> "icons/twitter"}}</a>
        {{/if}}
        <a class="social-link" href="https://github.com/jamespayne">{{> "icons/github"}}</a>
    </div>

You should be able to see that I’ve added the link:

<a class="social-link" href="https://github.com/jamespayne">{{> "icons/github"}}</a>

Take note: The svg file that we created has an .hbs extension. You don’t need that in the {{> “icons/github”}} code.

You should make sure you include the class “social-link” as above to keep some consistency. Keep what you altered in the same class. I’m not sure what the outcome would be otherwise.

Restart Ghost and do a hard refresh in your browser to check to see if it is working.

I’ve used this on my site here.

You can repeat this process for each social icon and site you want to add.

I’m not claiming this is the right way to do it. It’s just what worked for me. I hope this helps and let me know if you have any questions. :+1:

@DavidDarnes Is this the correct way to do it? If not, please let me know and I’ll update my response.

3 Likes