URL not showing for share button

support
1

I’m trying to share my article using the Twitter, Facebook and LinkedIn icon on the bottom of the article on my page. However, the issue is when I click on any of the icon, only the title of the blog post shows, the URL doesn’t. I have checked the partial for it and it is using it this way:

//...
  <a class="icon-twitter" href="https://twitter.com/share?text={{ .Title }}&url={{ .Permalink }}" onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
            <i class="fa fa-twitter"></i>
            <span class="hidden">Twitter</span>
  </a>
//...

How do I get the current link to show.

Here is the repo

Here is a picture when I’m trying to share with twitter:

huo
huo.png1254×626 68.7 KB

2

The only thing I can see is possibly this from the Hugo documentation:

Permalink
The absolute URL to the resource. Resources of type page will have no value.

By any chance do you have a URL: set in this page’s front matter?

Also, my theme’s Twitter share code has this in-between the title and permalink:

&amp;url=

3

I didn’t set url in my front matter. I don’t seem to know what’s happening though. The original theme I’m using has the same thing I have and it works but mine isn’t. perhaps, I have changed something else where and it affected it. I’m not familiar with Go, so it’s difficult trying to debug

4

The only difference I see is the way the ampersand is coded in my theme’s Twitter share - see full example below (minus the icon part) - note the &amp; right before the url= - try adding that to your html and see if it makes any difference?:

<a class="floating-header-share-tw" href="https://twitter.com/share?text={{.Title}}&amp;url={{.Permalink}}" onclick="window.open(this.href, 'share-twitter', 'width=550,height=235');return false;">
5

Didn’t work :frowning:

6

In your config.toml, go ahead and add your site address:

baseURL = "https://peoray.com"

For some reason the .Permalink in the Twitter share code was not forming correctly when using only "/" as the baseURL - don’t worry, when running this on your local machine it will still work on localhost, but then you won’t have to change it when deploying to github

7

should it be blog.peoray.com or peoray.com. My blog domain is blog.peoray.com, just checking if you realize that

8

Use the actual URL of your site (blog.peoray.com) :slight_smile:

9

Okay, so when I used

baseURL = "https://peoray.com"

It only worked for the home page (styles weren’t applied) but when I tried to click on post, I got a not found. But when I tried

baseURL = "https://blog.peoray.com"

It worked, although the styles weren’t applied. How do I fix the css issue so they get loaded on the page

10

in /themes/ghostwriter/layouts/partials/header.html, add a / in front of ‘dist’

<link rel="stylesheet" href="{{ .Site.BaseURL }}/dist/styles.css">

1 Like
11

Is the code for the share button INSIDE of your article range? I suspect it’s outside and within the .Page context which has no URL. I have nearly the same code and it’s working at all locations I do employ it:

  <div class="col">
    <a class="btn btn-twitter btn-block"
       href="https://twitter.com/intent/tweet?url={{.Permalink}}&via=samui2&hashtags=samui,thailand"
       onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=450,width=800');return false;"
       target="_blank"><i class="fab fa-twitter" aria-hidden="true"></i>
      <span class="sr-only sr-only-focusable">&nbsp;Share on Twitter</span>
    </a>{{/* text is also a parameter */}}
  </div>
12

Ignore my previous post :wink:

Go to your header template:

and add a / between {{ .Site.BaseURL }} and dist.

And please read my (unfinished) post:

2 Likes
13

Thank you so much :heart: This was able to resolve it.

14

Thanks for your help :slightly_smiling_face:

15

FYI this is why URLs for static files should be built with absURL or relURL… they handle baseURLs with and without a trailing slash.

Or just link to the static file directly, e.g.

/path/to/style.css
2 Likes
16

I’m sorry, I don’t understand what you are trying to say

17

Which part is unclear? I’d be happy to give an example.