URL not showing for share button

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:

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=

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

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;">

Didn’t work :frowning:

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

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

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

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

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

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

1 Like

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>

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

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

Thanks for your help :slightly_smiling_face:

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

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

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