Add linkedin as an option to share posts

support
1

Hello,
I am getting to know Hugo and so far the learning has been very good. I have created a personal website using Hugo to record my learning as blogs. One can view my website @ https://datasingularity.org/

I have used the hugo 2 theme for my website. I have added one post - an introduction to data visualiztion part 1. When reading the post one has an option to share the post via Twitter and Facebook. The share option can be found on the top right corner of the page when scrolling. I would like to add LinkedIn to this share options. This will help me get better feedback on my post.Can you please help me get this configured?

thank you in advance.

2

I did a quick check in the linkedin documentation, seems you need to construct a simple url:

<a href="https://www.linkedin.com/shareArticle?mini=true&url={{ .Permalink }} &title={{ .Title | htmlEscape }} &summary={{ .Summary | htmlEscape }}&source=LinkedIn">LinkedIn Share</a>

I didn’t look in your theme’s code or documentation. You should check if this option isn’t already built in, and if it isn’t, adapt the Facebook button to match your needs.

Happy new year :slight_smile:

3

Hey Brunoamaral,

Thank you for that quick reply and happy new year to you too :slight_smile:

Found the “themes/casper-two/layouts/partials/header-floating-sori.html” file and the functionality was not implemented for LinkedIn and hence I added your code snippet. It is now appearing on my website. I have not yet tested it by sharing a post on linkedin but it seems to be working upto that point.

On a different note, the existing implementation for Facebook and Twitter is as given below.

<a class="floating-header-share-fb" href="https://www.facebook.com/sharer/sharer.php?u={{.Permalink}}"
          onclick="window.open(this.href, 'share-facebook','width=580,height=296');return false;">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z"/></svg>
      </a>

I am new to web development(html, css and javascript), any suggestions on how I can implement the same way for LinkedIn?

4

Copy the code you linked above, and change the values. Switch out something and see what changes.

We don’t teach web development or design in these forums, but we have a list of resources at Recommended Reading Reference to help you along. If you have specific Hugo questions, of course post them to support. :slight_smile: