LinkedIn Share button not working

[jamesbraza]

When turning on shareSocial in my config, I observed the LinkedIn share isn't working for me. When I click the link, here's what I get:

When running hugo server -D, here is the URL behind the LinkedIn icon that leads to this error page: https://www.linkedin.com/shareArticle?mini=true&url=http%3a%2f%2flocalhost%3a1313%2ftags%2f&title=Tags&summary=Tags%2c%20by%201248%0a%3cnil%3e%0a%0ahttp%3a%2f%2flocalhost%3a1313%2ftags%2f%0a&source=http%3a%2f%2flocalhost%3a1313%2f

[1bl4z3r]

That is confusing. Coz, it works on my machine 😅

Nevertheless, I will check this.

[1bl4z3r]

It is in fact not working. Blindly copying from https://sharingbuttons.io/ was a bad idea, as the URL given there is itself not working

[1bl4z3r]

Found the bug. Turns out if you have a share to LinkedIn from localhost, it will be blocked. Using the "example site" as an example, I can create a post on LinkedIn.

Nevertheless, I have done few changes. You should make your site public with an URL before sharing to LinkedIn.

Closing Issue

[jamesbraza]

Alright, thanks for looking into this! Now running hugo server -D with Hugo v0.120.3 and trying the LinkedIn share:

https://www.linkedin.com/shareArticle?mini=true&url=http%3a%2f%2flocalhost%3a1313%2fabout%2f&source=http%3a%2f%2flocalhost%3a1313%2f&title=About&summary=About%2c%20by%20James%20Braza%0a%0a%3cnil%3e%0a

It still doesn't work:

Just to confirm from your comment:

Nevertheless, I have done few changes. You should make your site public with an URL before sharing to LinkedIn.

Were your fixes supposed to help with local dev too? Or they only apply to a fully-live site? I am wondering if we can somehow get it working for local dev too.

[1bl4z3r]

According to this Stackoverflow Issue, we cannot consume LinkedIn API from localhost.

My changes are related to correctly produce Author name and Article description, and nothing to do with LinkedIn share.

If you are unsure, feel free how this would respond using the demosite's share. Tested, its working as intended

[jamesbraza]

Give me a few days and I will see what I can turn up on the matter. https://stackoverflow.com/a/61583006 also has some useful info, mainly the LinkedIn Post Inspector (which doesn't work with localhost).

[1bl4z3r]

Microsoft, making things unnaturally complicated for no reason.

Your Stackoverflow link is helpful BTW

[jamesbraza]

One discovery is a sort of workaround:

1. Build site (hugo --minify), which fills in .Site.BaseURL with the configured baseURL (and not localhost)
2. Go to a post's HTML (open public/posts/index.html)
3. The LinkedIn share button works

---

Alternately, I made this post investigating if there's some way to avoid localhost: https://discourse.gohugo.io/t/how-to-get-hugo-tomls-configured-baseurl-during-local-dev/46995

Reading the responses, apparently it's recommended to use absURL "" over .Site.BaseURL, though it's not stated why. Switching to absURL doesn't fix the localhost issue though

[1bl4z3r]

What you can do of you want LinkedIn share working is to extend the partial and prefilling source and url of your page.

LinkedIn seems to check if there's a valid page or not, so you can't put example.com and call it a day.

absURL prefills on the basis of BaseURL. So, as replied in your discourse, it would be totally useless.

The URL returned by this function depends on:

   - Whether the input begins with a slash
   - The baseURL in site configuration

[1bl4z3r]

Since I haven't made an account on Hugo Discourse, I wish to let you know why this is happening

Yeah I was playing around with this, the issue faced here is the rest of the site no longer works when manually passing hugo server -D --baseURL "https://foo.com".

This is because the css and js are served not from foo.com but hugo is trying to fetch the resources from foo.com/style.css. So unless you map foo.com to localhost from host file; the whole theme will fail.

You can see on which path css /js fetch are pointing to from source

[jamesbraza]

Ah I see per hosts file, that's good to know! And thanks for sharing the follow-up suggestions.

When it comes to CSS, I have basically no idea what's going on haha. Anyways, I conclude the LinkedIn share not working for localhost is fine 👌

This one is already closed, so nothing else to do here. Thanks again!