Hi! Is there an easy way to hack default Casper theme to add instagram link to site nav? Thanks!
If you just want to add a link to instagram you dont even need to edit the Casper theme. Login to the admin panel > Click Design and under navigation you can add the link to instagram.
If want something a bit more complex you can edit partials/site-nav.hbs in your theme.
If you have more info on what you need i could try helping you.
I guess you are looking for instagram image previews?
I saw this feature in some premium themes. I guess it’s easy to integrate but I never did it.
actually there i see only facebook and twitter, thats the problem. I just need to get IG icon and link to account there.
How can i do that?
nah, just link to IG account in the nav panel.
OK thats very simple to do. Just a heads up if you do decide to change the instagram account of the link you will need to change it within the theme its not like the twitter and facebook where you can change it from the admin panel.
so what you need to do is add one line to the following file in your theme folder (this is based of a fresh casper download
partials/site-nav.hbs after line 21 you will add the following
<a class="social-link social-link-ig fa-instagram" href="https://www.instagram.com/ghost/" title="Instagram" target="_blank" rel="noopener">{{> "icons/instagram"}}</a>
next you will make a new file called partials/icons/instagram.hbs
in that file you will past the following code
<svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="instagram" class="svg-inline--fa fa-instagram fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg>
and thats all it takes. let me know if it works. but a quick test on my side shows that its all wrking perfectly.
for reference of site-nav.hbs this is that it would look loke
<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 social-link-ig fa-instagram" href="https://www.instagram.com/ghost/" title="Instagram" target="_blank" rel="noopener">{{> "icons/instagram"}}</a>
</div>
2 Likes
I think you must check these types of information on YouTube.
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