Notes on Hugo for Beginners (and Me), Part 3, Creating Social Links

Part of my rationale for moving to Hugo was to remove the need to manage comments. Instead, I wanted to have comments in LinkedIn or on Twitter.

Very quickly the need to allow people to comment on these mediums came about - credit to Luke Evans (, ) for highlighting the need to comment.

Links within posts

In the above paragraph, I put in links to my guinea pig, Luke. To do this I wrote a short code for each platforminto which I could pass the appropriate value to allow the path to be created.

To create the shortcode is was as simple as creating the html file in the layouts/shortcodes directory and putting the apprporiate HTML for the desired link:

<a rel="external nofollow" href="https://twitter.com/{{ .Get 0 }}" target="_blank" ><i class="fab fa-twitter"></i></a>

The key is the {{ .Get 0 }} statement that gets the first parameter. To use the shortcode I embed the following code into the markdown of the post:

{{< twitter "lukeevanstech" >}}

Comments on social

To do this was a bit more challenging. In the right sidebar of each post I have added a partial to the single.html layout. The partial contains some simple HTML:

{{ $posttitle := .Title }}
{{ $posturl := .Permalink }}
{{ $via := .Site.Params.twitter }}

<div>
    Comment on this post:
    <span class="comment-social">
        <a rel="external nofollow" href="https://twitter.com/share?url={{ $posturl }}&text={{ $posttitle }}&via={{ $via }}" target="_blank" ><i class="fab fa-twitter fa-3x"></i></a>
    </span>
    <span class="comment-social">
        <a rel="external nofollow" href="https://www.linkedin.com/shareArticle?mini=true&url={{ safeHTML $posturl }}&title={{ $posttitle }}" target="_blank" ><i class="fab fa-linkedin fa-3x"></i></a>
    </span>
</div>

The variables are defined as they are used in both of the links that are used to post to the platforms. When embedding the $posturl variable, the safeHTML function is used as we do not want the URL HTML encoded.

The icons use the fa-x3 class to increase the size of the icon to make it more prominent.

Summary

To get the links to poeple in was not to challengeing, and the details for the Twitter link can be found at https://publish.twitter.com/#.

LinkedIn has no documentationation on building a URL so I took it from other sites that have sharing links.