Active link to other webpage in Pinned Post on landing page?

Help Customization
1

I am wanting to cross link to a couple of other sites without viewers needing to go to a separate page and then click the link. Is there/could there be a way to directly link the title of a pinned post so it goes straight to the link, rather than the post. If that makes sense?

1 Like
2

Yep, that makes sense. I’ve heard this request several times – we’ll definitely add it, just need to figure out how to fit it in with the platform. Ideally, we’d continue using the current Publish -> Pin workflow, and have the platform recognize the post as a direct link.

4 Likes
3

Makes sense. If all there is to a post is a link, off you pop!

2 Likes
4

The other day I discovered a little trick to do just this - replace a pinned post with a link to another webpage.

All you need is the link to the pinned post and the link of what you want to replace the pinned post with. Then add this to your ‘Custom Javascript’:

var a = document.querySelector('a[href="https://blog.cjeller.site/search"]');

if (a) {
  a.setAttribute('href', 'https://search.cjeller.site');
}

And off you pop! Might be a bit of a hack until more customization becomes available, but I think it does the job.

6 Likes
5

It does, indeed!
Thank you very much, very helpful!

1 Like
6

@cjeller1592, I’m confused exactly what text to replace with which link. Could you please produce an idiot guide for me, perhaps with “pinnedpost.com” and “landingpost.com” as the fillers instead of other addresses?

Also, will this work for pages internal to the blog and outside the blog as well?

1 Like
7

I would be glad to explain it a little further.

And actually, there is simpler code to accomplish this (courtesy of @Cat). In your Customize settings of your blog, go down to Custom JavaScript for your blog you can put in this in:

const pinned = document.querySelector('a[href*="https://pinnedpost.com"]');
pinned.href = 'https://landingpost.com';

Let’s break it down. The first step is writing code to find the pinned post whose link we want to change. That is the first part:

const pinned = document.querySelector('a[href*="https://pinnedpost.com"]');

The code says “Called ‘pinned’ whatever element has this pinnedpost.com link.” So in your case, you will replace the above with the link to the post on your blog you want to go to another webpage. For example:

const pinned = document.querySelector('a[href*="https://write.as/cjeller/social"]');

The next line of code is where the magic happens. Now that our code identifies the element with the pinned post link, the second step is replacing that pinned post link to the link for our landing post. That is the second part:

pinned.href = 'https://landingpost.com';

All that code says is, “Hey, remember that ‘pinned’ element you found above? Change the url to landingpost.com instead.” So as with the example case above, I will put in the social page I want it to land on instead:

pinned.href = 'https://social.com/cjeller';

The pinned post can only be pages internal to the blog. The landing pages, however, can be anything internal to the blog and outside of it as well.

Hope that helps and let me know if you have any further questions!

4 Likes
8

Lovely! Thank you, @cjeller1592!

1 Like
9

Does this only work once per blog, @cjeller1592? I tried it on stjosephworkshop.org and it worked fine for my link to shepherdsandhalos.org but adding a second round to link to catholichalos.org broke the first and the second never worked. Thinking I may best just have a pinned “Sister Sites” post. Grin. What am I missing?

EDIT: The error was “Pinned” has already been declared. I changed the second one to “pinned2” but that didn’t work. I’m going to go with a Sister Sites post. It’s kinder to my non-tech skill set. Grin.

1 Like
10

Hi @DeaconPatrick,

You are on the right track with changing the second one to pinned2. The catch is that you also have to change the second line of code to match pinned2. So the second will look like this:

const pinned2 = document.querySelector('a[href*="https://pinnedpost.com"]');
pinned2.href = 'https://landingpost.com';

So in total your custom JavaScript will look something like this:

const pinned = document.querySelector('a[href*="https://pinnedpost.com"]');
pinned.href = 'https://landingpost.com';

const pinned2 = document.querySelector('a[href*="https://pinnedpost.com"]');
pinned2.href = 'https://landingpost.com';

The sister sites page is an equally fine solution, but I just wanted to let you know that this can work on multiple pinned posts. Hope that helps and let me know if you need more clarification.

2 Likes
11

I’ve thought about this a little myself. But wouldn’t it be simpler to use a CSS ::after property rather than using JavaScript to replace text that’s already been rendered?

1 Like
12

I think we are trying to change the “href” of the pinned post instead of the text itself. Do you think that would be possible with the ::after property? On first blush I thought CSS could not manipulate the “href” in that way. If that’s not the case I would be glad to learn how it works.

1 Like
13

Upon further investigation, I think you’re right. My limited experience suggested that it would just insert arbitrary text, which could then be interpreted as its own HTML. But unless the write.as backend does that, I don’t think it would work.

1 Like
14

Yeah, I don’t think the backend does that currently. But like @matt said, we might try to make some adjustments in the future where the backend will recognize a post as a direct link via some kind of markup. Until that point I think the two lines of JavaScript is a good solution but I am more than receptive to alternatives!

2 Likes
15

I gave this a go and it doesn’t seem to be working, I thought a second pair of eyes may see what I did wrong. Thanks

const pinned = document.querySelector('a[href*="https://write.as/timapple/social-feed"]');
pinned.href = 'https://social.timapple.com/';
2 Likes
16

Never mind, I figured it out, I had the first URL screwed up.

2 Likes
17

This works a treat! Does anyone know how I can get this to work, but have the ‘click’ opening up the webpage in a new tab (rather than the same one)?

2 Likes
19

Using Tim’s sample code, if you add the line below, it should open up a new browser tab when you click the link.

pinned.target = "_blank";

2 Likes
20

thanks @dino!

1 Like