By the way, if you use captions for your Instagram, then I am sharing the link ( https://eleggible.com/best-instagram-caption-generator/ ) of a best Instagram caption generator with you, with the help of this you can generate very good Instagram captions easily and use for your Instagram account can do.
Hey 
Just put together a tutorial on how to use the secondary navigation in Ghost to create a set of social network links:
Hope you find this useful 
2 Likes
This worked for me and was much easier to follow as a newbie than the official ghost tutorial. Thanks! I got IG added to the links in my secondary nav, but the only issue is that the icon for IG seems to be broken. It’s showing up as a box with an x in it, but it links to my IG. Hey, I’m halfway there, so thank you!
I am guessing since they used fa-instagram, that is Font Awesome and you need to include its library. Alternatively, you could use the SVG similar to how it is there for FB and Twitter in the theme. See here: How to add social media icons to your Ghost theme
1 Like
Thanks for this 
I’m finding it difficult to make it work in Edge theme. I’ve got it working except the icon is displaying huge in the browser and haven’t found the right way to scale it properly with CSS yet. If anyone can come up with a good way to make this work in Edge theme I’d appreciate it…
I couldn’t get the tutorial secondary menu method to work in this theme because it’s hidden. (new Edge theme update has this menu back now)
This was super helpful! Thank you so much.
Do you think you could also provide SVGs for TikTok and an email icon too? I am a complete neophyte to this and don’t know how to generate working ones.
I was looking for this solution for quite a long time by the way, Thanks @kmutahar for these details.
Hi! Now there are many tutorials dedicated to this topic.
This is needed. Thanks.
1 Like
Hi everyone,
I am trying to do something a little bit different, but I thought that someone could help me here.
I am using Dope theme and want to add the social media in the footer center of the theme.
So, I copied this code :
<footer class="gh-foot gh-outer">
<div class="gh-foot-inner gh-inner">
<div class="gh-copyright">
{{@site.title}} © {{date format="YYYY"}}
</div>
<div class="gh-social">
<a class="social-media-icon" href="https://link.airprepa.co/facebook">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Facebook</title><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
</a>
<a class="social-media-icon" href="https://link.airprepa.co/instagram">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Instagram</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.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.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-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.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.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 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.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.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-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.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.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 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.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/></svg>
</a>
<a class="social-media-icon" href="https://link.airprepa.co/twitter">
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter</title><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>
</a>
</div>
<div class="gh-powered-by">
<a href="https://ghost.org/" target="_blank" rel="noopener">{{t "Powered by Ghost"}}</a>
</div>
</div>
</footer>
The result is okay, but the icons are too closed from each other and when adding in code injection :
<style>
.post-template .gh-content p,
.page-template .gh-content p {
text-align: justify;
}
.gh-social {
gap: 1.0em;
}
.social-media-icon svg {
width: 1.5em;
fill: grey;
}
</style>
the color applies correctly, but the gap does not work.
gap only applies if the element has a display type of flex or grid.
You could try this:
.gh-social {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}
There are likely some other tweaks you’ll want to make to ensure everything also looks good on mobile.
1 Like
thank you very much ! it is working now. it is exactly what I needed.
but indeed on mobile, it is not vertically centered, I mean, the 3 divisons of the footer are not equally spaced. what should I add to change that ?
You could try this:
@media (max-width: 767px) {
.gh-powered-by {
margin-top: 0;
}
}
.gh-foot-inner {
row-gap: 2rem; // Adjust to your pref
}
.social-media-icons {
line-height: 1;
}
1 Like
Did you check out the tutorial?
This tutorial does not mention anything about Secondary navigation or adding social media icons at the footer though. It is about the header. Do you have any guides regarding that?
We hope to add support for adding the icons to the footer in the future, but it looks like you’re already getting some help in this thread:
I gave up for now. I’m ok waiting. Any ETA?
No ETA at the moment.
1 Like
I think that you might use your instagram profile as a basis for finding layouts. Just remember that there is always that risk to be blocked by Instagram social network it will find lots of fake or “dead” subscribers.