Add instagram link to the navigation

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>