Social Icons in footer?

Regarding this tutorial, I can get the social icons in the header: How to add social media icons to your Ghost theme

But, I cannot figure out how to get them to show in the footer.

Thoughts?

I’m also looking for the same info. Any help would be appreciated.

This should work as-is for the footer with only minor modifications. The main thing you’re going to need to change is the CSS selectors, to select the footer nav section instead of the header.

So for example, looking at Ruby, a footer link looks like this (inspecting with F12 in the browser):

image

In contrast, the header (with more & different links) looks like this:
image

Looking at the tutorial’s code:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/brands.min.css" integrity="sha512-+oRH6u1nDGSm3hH8poU85YFIVTdSnS2f+texdPGrURaJh8hzmhMiZrQth6l56P4ZQmxeZzd2DqVEMqQoJ8J89A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>
    .gh-head-menu .nav-facebook a {
        font-size: 0 !important;
    }

    .gh-head-menu .nav-facebook a::before {
        font-family: "Font Awesome 6 Brands";
        display: inline-block;
        font-size: 20px;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
    }

    .gh-head-menu .nav-facebook a::before {content: "\f09a"}
</style>

It looks like you should be able to swap .gh-foot-menu for .gh-head-menu.

Have you tried that? What happened?

2 Likes

I tried swapping that, and the first link indeed works, but then after that, they are just empty space.

Show the code? Can’t help without more info! :)

1 Like

I am having the same issue

I can’t help you if you don’t show what you’ve tried and what happened! :)

This is the code from Ghost’s tutorial to include social icons in the Casper theme.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/brands.min.css" integrity="sha512-+oRH6u1nDGSm3hH8poU85YFIVTdSnS2f+texdPGrURaJh8hzmhMiZrQth6l56P4ZQmxeZzd2DqVEMqQoJ8J89A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>
    .gh-head-menu .nav-twitter a,
    .gh-head-menu .nav-discord a,
    .gh-head-menu .nav-github a,
    .gh-head-menu .nav-linkedin a {
        font-size: 0 !important;
    }

    .gh-head-menu .nav-twitter a::before,
    .gh-head-menu .nav-discord a::before,
    .gh-head-menu .nav-github a::before,
    .gh-head-menu .nav-linkedin a::before {
        font-family: "Font Awesome 6 Brands";
        display: inline-block;
        font-size: 20px;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
    }

    .gh-head-menu .nav-twitter a::before {content: "\f099"}
    .gh-head-menu .nav-discord a::before {content: "\f392"}
    .gh-head-menu .nav-github a::before {content: "\f09b"}
    .gh-head-menu .nav-linkedin a::before {content: "\f08c"}
</style>

The code as is works and applies the right social icons in the header. However, I swapped all the .gh-head-menu to .site-nav-footer and only the first icon shows up.

Thanks!

Paste your code please?

1 Like

Following, I’m also interested in populating the footer with the social icons and not the header.

Any developer that managed to do this? Would be very beneficial to have the social at the bottom, I guess it’s also standard practice in UX design. @Cathy_Sarisky what do you think?

To our admins @John and @Hannah I have a question: is there any idea on bringing back the social icons (maybe with toggle on/off for header/footer) in the next casper update?

1 Like

I’m glad to help debug a broken example, but don’t have the time (too much paid work!) this week to install casper and implement the whole solution to see why it’s broken. If you have a publicly available example that follows the tutorial but swaps in the footer div for the head div, I’ll make time to take a look. At the very least, you could post the code injection you’ve created that isn’t working (not the unmodified tutorial). I’ve asked a couple times to see the actual code that’s not working, but no one has done so yet.

To me the social icons in the header near the navigational menu don’t make sense. Also they don’t even open in a new window. It makes me wonder why they removed the previous default setup in casper, where you could have at least two icons on the top right near the subscribe button.
It’s a very bad design idea, I don’t know who is the person that gave the OK to do this on the most important Ghost theme.

1 Like

Instead of primary navigation, I added the links to secondary navigation. Then, I just replaced ‘head’ with ‘foot’ in the auto-generated code and it seems to work fine.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/brands.min.css" integrity="sha512-+oRH6u1nDGSm3hH8poU85YFIVTdSnS2f+texdPGrURaJh8hzmhMiZrQth6l56P4ZQmxeZzd2DqVEMqQoJ8J89A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>
    .gh-foot-menu .nav-linkedin a,
    .gh-foot-menu .nav-facebook a,
    .gh-foot-menu .nav-twitter a {
        font-size: 0 !important;
    }

    .gh-foot-menu .nav-linkedin a::before,
    .gh-foot-menu .nav-facebook a::before,
    .gh-foot-menu .nav-twitter a::before {
        font-family: "Font Awesome 6 Brands";
        display: inline-block;
        font-size: 20px;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
    }

    .gh-foot-menu .nav-linkedin a::before {content: "\f08c"}
    .gh-foot-menu .nav-facebook a::before {content: "\f09a"}
    .gh-foot-menu .nav-twitter a::before {content: "\f099"}
</style>

3 Likes

This indeed works.

One question about a small detail. Latest font-awesome version is 6.3.0 but when I update the CDN href url from 6.2.0 to 6.3.0, it does not work anymore. Is this related to integrity field? Where can I get the correct sha512 key for the corresponding library versions?

EDIT: I found the answer. It is indeed due to SHA hash mismatch. One can find the correct hash for whatever version from https://www.srihash.org/

1 Like

Now the only final touch left is to make the social media icon urls to open in new window when clicked. Any tips would be appreciated.

If you can edit the HTML, add the target="_blank" attribute to the <a> tag. Otherwise, you’ll need to use JS to target the links in question and add the attribute that way.

This doesn’t seem to work for me. The. .gh-foot-menu class doesn’t appear anywhere in my code (Ghost 5.47.0/Casper 5.4.10). Using .site-nav-footer instead produces the same result as reported by @tsathe . The first icon shows up, but the others do not.

Here’s the code injection I’ve pasted into the site header:

<!-- SOCIAL ICONS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/brands.min.css" integrity="sha512-+oRH6u1nDGSm3hH8poU85YFIVTdSnS2f+texdPGrURaJh8hzmhMiZrQth6l56P4ZQmxeZzd2DqVEMqQoJ8J89A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>

    .site-footer-nav .nav-facebook a,
    .site-footer-nav .nav-soundcloud a,
    .site-footer-nav .nav-github a,
    .site-footer-nav .nav-instagram a,
    .site-footer-nav .nav-linkedin a,
    .site-footer-nav .nav-mastodon a {
        font-size: 0 !important;
    }

    .site-footer-nav .nav-facebook a::before,
    .site-footer-nav .nav-soundcloud a::before,
    .site-footer-nav .nav-github a::before,
    .site-footer-nav .nav-instagram a::before,
    .site-footer-nav .nav-linkedin a::before,
    .site-footer-nav .nav-mastodon a::before {
        font-family: "Font Awesome 6 Brands";
        display: inline-block;
        font-size: 20px;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
    }

    .site-footer-nav .nav-facebook a::before {content: "\f09a";}
    .site-footer-nav .nav-soundcloud a::before {content: "\f1be";}
    .site-footer-nav .nav-github a::before {content: "\f09b";}
    .site-footer-nav .nav-instagram a::before {content: "\f16d";}
    .site-footer-nav .nav-linkedin a::before {content: "\f08c";}
    .site-footer-nav .nav-mastodon a::before {content: "\f4f6";}

</style>
<!-- /SOCIAL ICONS -->

I was able to solve this by adding !important to the “content” property and adding an additional style override. I also doubled the right margin to 20px for the benefit of mobile users.

<!-- SOCIAL ICONS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/brands.min.css" integrity="sha512-+oRH6u1nDGSm3hH8poU85YFIVTdSnS2f+texdPGrURaJh8hzmhMiZrQth6l56P4ZQmxeZzd2DqVEMqQoJ8J89A==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>

    .site-footer-nav .nav-facebook a,
    .site-footer-nav .nav-soundcloud a,
    .site-footer-nav .nav-github a,
    .site-footer-nav .nav-instagram a,
    .site-footer-nav .nav-linkedin a,
    .site-footer-nav .nav-mastodon a {
        font-size: 0 !important;
    }

    .site-footer-nav .nav-facebook a::before,
    .site-footer-nav .nav-soundcloud a::before,
    .site-footer-nav .nav-github a::before,
    .site-footer-nav .nav-instagram a::before,
    .site-footer-nav .nav-linkedin a::before,
    .site-footer-nav .nav-mastodon a::before {
        font-family: "Font Awesome 6 Brands";
        display: inline-block;
        font-size: 20px;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
    }

    .site-footer-nav .nav-facebook a::before {content: "\f09a" !important;}
    .site-footer-nav .nav-soundcloud a::before {content: "\f1be" !important;}
    .site-footer-nav .nav-github a::before {content: "\f09b" !important;}
    .site-footer-nav .nav-instagram a::before {content: "\f16d" !important;}
    .site-footer-nav .nav-linkedin a::before {content: "\f08c" !important;}
    .site-footer-nav .nav-mastodon a::before {content: "\f4f6" !important;}


    .site-footer-nav li:not(:first-child) a::before {
        display: inline-block; 
        width: auto;
        height:auto;
        margin: 0 0 0 20px;
        background: transparent;
    }

</style>
<!-- /SOCIAL ICONS -->
1 Like

It always struck me as odd that Ghost’s “social accounts” feature includes a line for a Facebook or Twitter link, but not IG. I realize that we can ultimately do pretty much anything we need to do, through theming and custom code, but it makes a lot of sense to me to have a standard link to the social account most relevant to my blog—Instagram—in the back end, and let my theme interpret that however it chooses to.

1 Like