Extend sticky navbar on posts?

Developer help
1

Hello,
I have a music blog and I provide Apple affiliate links on each posts.
To have a better visibility for those links that make me money, I want to extend the sticky navbar (right on desktop, bottom on mobile).
Is there an easy way to do that? I need to add 2 or 3 links.

Screenshot 2020-06-17 at 7.50.04 PM
Screenshot 2020-06-17 at 7.50.04 PM2880×1800 486 KB

2

Hey @NicolasK :wave:
The best way to do this would be to use some JavaScript in the theme that listens for any additional defined valued on the page. Those values can then be defined in your code injection area.

Here’s some hypothetical code that you would add to your post template, before the end of the closing <body> tag:

<script>

const shareBar = document.querySelector('.m-share__content');

const addToShareBar = (url) => {
  shareBar.insertAdjacentHTML('afterbegin',
  `<a href="${url}" class="m-icon-button filled in-share" target="_blank" rel="noopener" aria-label="Link">
                      🔗
   </a>`);
}

if (appleShareLinks) {
  appleShareLinks.map(link => {
    addToShareBar(link);
  });
}
</script>

Then in your post code injection head area you could add something like this:

<script>
const appleShareLinks = [
  'https://apple.com/firstlink/',
  'https://apple.com/secondlink/'
];
</script>

I haven’t properly tested this, but it’s a good place to start :blush:

3

Not bad for a start. I need to show that icon from Apple:
https://linkmaker.itunes.apple.com/embed/v1/app-icon.svg?hex=000000

4

It seems the URL parameter is not correctly coded.
It shows this : Cracking Da Code - Private Site Access
you can check it out on the page.

5

I can’t see the error you’re referring to? Have you changed it since you posted this?