Add Social Icons in Hugo Website Pages

Guide to create a Social Share partial in Hugo

Ashish Lahoti

Last Modified: June 04, 2020

Hugo

Page content

If you are using Hugo as a static site generator tool then you can create a partial to show social icons like facebook, twitter, linkedin, whatsapp etc to share page links on social media.

Create socialshare.html Parital

First of all we are going to create a partial called socialshare.html which is responsible to create social share icons for your hugo blog pages. All you need to do is copy the below code snippet and save it under $hugo/layouts/partials/socialshare.html.

socialshare.html

<!-- Social Share Button HTML -->
{{- if .Param "socialshare" }}
  {{ $title := .Title }}
  {{ $url := printf "%s" .Permalink }}
  {{ $body := print $title ", by " .Site.Title "\n" .Params.description "\n\n" $url "\n" }}

  <section class="social-share">
    <ul class="share-icons">
      <!-- Twitter -->
      {{ if .Site.Params.social.share.twitter }}
      <li>
        <a href="https://twitter.com/intent/tweet?hashtags=codingnconcepts&amp;url={{ .Permalink }}&amp;text={{ .Title }}" target="_blank" rel="noopener" aria-label="Share on Twitter" class="share-btn twitter">
          {{ partial "svg/twitter.svg" (dict "class" "widget-social__link-icon") }}
          <p>Twitter</p>
          </a>
      </li>
      {{ end }}

      <!-- Facebook -->
      {{ if .Site.Params.social.share.facebook }}
      <li>
        <a href="https://www.facebook.com/sharer.php?u={{ $url }}" target="_blank" rel="noopener" aria-label="Share on Facebook" class="share-btn facebook">
          {{ partial "svg/facebook.svg" (dict "class" "widget-social__link-icon") }}
          <p>Facebook</p>
          </a>
      </li>
      {{ end }}

      <!-- LinkedIn -->
      {{ if .Site.Params.social.share.linkedin }}
      <li>
        <a href="https://www.linkedin.com/shareArticle?mini=true&amp;url={{ $url }}&amp;source={{ $url }}&amp;title={{ $title }}&amp;summary={{ $title }}" target="_blank" rel="noopener" aria-label="Share on LinkedIn" class="share-btn linkedin">
          {{ partial "svg/linkedin.svg" (dict "class" "widget-social__link-icon") }}
            <p>LinkedIn</p>
          </a>
      </li>
      {{ end }}

      <!-- WhatsApp -->
      {{ if .Site.Params.social.share.whatsapp }}
      <li>
        <a href="whatsapp://send?text={{ $body }}" target="_blank" class="share-btn whatsapp">
          {{ partial "svg/whatsapp.svg" (dict "class" "widget-social__link-icon") }}
          <p>Email</p>
        </a>
      </li>
      {{ end }}

      <!-- Email -->
      {{ if .Site.Params.social.share.email }}
      <li>
        <a href="mailto:?subject={{ .Site.Title }} - {{ $title }}.&amp;body={{ $body }}" target="_blank" class="share-btn email">
          {{ partial "svg/email.svg" (dict "class" "widget-social__link-icon") }}
          <p>Email</p>
        </a>
      </li>
    </ul>
  </section>
  {{ end }}
{{- end }}

You see that in socialshare.html partial, we have used some svg partials for social share icons. Here are some social share svg partial, which you should save under $hugo/layouts/partials/svg folder

twitter.svg

<svg class="{{ with .class }}{{ . }} {{ end }}icon icon-twitter" width="24" height="24" viewBox="0 0 384 312"><path d="m384 36.9c-14.1 6.3-29.3 10.5-45.2 12.4 16.3-9.7 28.8-25.2 34.6-43.6-15.2 9-32.1 15.6-50 19.1-14.4-15.2-34.9-24.8-57.5-24.8-43.5 0-78.8 35.3-78.8 78.8 0 6.2.7 12.2 2 17.9-65.5-3.3-123.5-34.6-162.4-82.3-6.7 11.6-10.6 25.2-10.6 39.6 0 27.3 13.9 51.4 35 65.6-12.9-.4-25.1-4-35.7-9.9v1c0 38.2 27.2 70 63.2 77.2-6.6 1.8-13.6 2.8-20.8 2.8-5.1 0-10-.5-14.8-1.4 10 31.3 39.1 54.1 73.6 54.7-27 21.1-60.9 33.7-97.8 33.7-6.4 0-12.6-.4-18.8-1.1 34.9 22.4 76.3 35.4 120.8 35.4 144.9 0 224.1-120 224.1-224.1 0-3.4-.1-6.8-.2-10.2 15.4-11.1 28.7-25 39.3-40.8z"/></svg>

facebook.svg

<svg class="{{ with .class }}{{ . }} {{ end }}icon icon-facebook" width="24" height="24" viewBox="0 0 352 352"><path d="m0 32v288c0 17.5 14.5 32 32 32h288c17.5 0 32-14.5 32-32v-288c0-17.5-14.5-32-32-32h-288c-17.5 0-32 14.5-32 32zm320 0v288h-83v-108h41.5l6-48h-47.5v-31c0-14 3.5-23.5 23.5-23.5h26v-43.5c-4.4-.6-19.8-1.5-37.5-1.5-36.9 0-62 22.2-62 63.5v36h-42v48h42v108h-155v-288z"/></svg>

linkedin.svg

<svg class="{{ with .class }}{{ . }} {{ end }}icon icon-linkedin" width="24" height="24" viewBox="0 0 352 352"><path d="M0,40v272c0,21.9,18.1,40,40,40h272c21.9,0,40-18.1,40-40V40c0-21.9-18.1-40-40-40H40C18.1,0,0,18.1,0,40z M312,32 c4.6,0,8,3.4,8,8v272c0,4.6-3.4,8-8,8H40c-4.6,0-8-3.4-8-8V40c0-4.6,3.4-8,8-8H312z M59.5,87c0,15.2,12.3,27.5,27.5,27.5 c15.2,0,27.5-12.3,27.5-27.5c0-15.2-12.3-27.5-27.5-27.5C71.8,59.5,59.5,71.8,59.5,87z M187,157h-1v-21h-45v152h47v-75 c0-19.8,3.9-39,28.5-39c24.2,0,24.5,22.4,24.5,40v74h47v-83.5c0-40.9-8.7-72-56.5-72C208.5,132.5,193.3,145.1,187,157z M64,288h47.5 V136H64V288z"/></svg>

whatsapp.svg

<svg class="{{ with .class }}{{ . }} {{ end }}icon icon-whatsapp" width="24" height="24" viewBox="0 0 24 24"><path d="M20.1 3.9C17.9 1.7 15 .5 12 .5 5.8.5.7 5.6.7 11.9c0 2 .5 3.9 1.5 5.6L.6 23.4l6-1.6c1.6.9 3.5 1.3 5.4 1.3 6.3 0 11.4-5.1 11.4-11.4-.1-2.8-1.2-5.7-3.3-7.8zM12 21.4c-1.7 0-3.3-.5-4.8-1.3l-.4-.2-3.5 1 1-3.4L4 17c-1-1.5-1.4-3.2-1.4-5.1 0-5.2 4.2-9.4 9.4-9.4 2.5 0 4.9 1 6.7 2.8 1.8 1.8 2.8 4.2 2.8 6.7-.1 5.2-4.3 9.4-9.5 9.4zm5.1-7.1c-.3-.1-1.7-.9-1.9-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-.9 1.1-.2.2-.3.2-.6.1s-1.2-.5-2.3-1.4c-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6s.3-.3.4-.5c.2-.1.3-.3.4-.5.1-.2 0-.4 0-.5C10 9 9.3 7.6 9 7c-.1-.4-.4-.3-.5-.3h-.6s-.4.1-.7.3c-.3.3-1 1-1 2.4s1 2.8 1.1 3c.1.2 2 3.1 4.9 4.3.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 1.9-1.3.2-.7.2-1.2.2-1.3-.1-.3-.3-.4-.6-.5z"/></svg>

email.svg

<svg class="{{ with .class }}{{ . }} {{ end }}icon icon-mail" width="24" height="24" viewBox="0 0 416 288"><path d="m0 16v256 16h16 384 16v-16-256-16h-16-384-16zm347 16-139 92.5-139-92.5zm-148 125.5 9 5.5 9-5.5 167-111.5v210h-352v-210z"/></svg>

CSS for socialshare.html

Please note that the provided CSS is just for your reference. You might need to tweak or write your own CSS based on your hugo theme.

style.css

.social-share {
	position: relative;
	top: -0.5em;
}
 
.social-share ul {
	margin: 0;
}
 
.social-share ul li p {
	display: none;
}
 
.social-share .share-icons li {
	padding: 0 !important;
	padding-bottom: 10px !important;
}
 
.social-share .share-btn {
	padding: 0.25em;
	width: 3em;
}
 
.social-share-nav .share-btn h3{
	color: #ffffff;
}

ul.share-icons {
	cursor: default;
	list-style: none;
	padding-left: 0;
	margin-top: 1em;
}

ul.share-icons li {
	display: inline-block;
	padding: 0 1em 0 0;
}

ul.share-icons li:last-child {
	padding-right: 0;
}

ul.share-icons li > * {
	text-decoration: none;
	border: 0;
}

ul.share-icons li > *:before {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	text-transform: none !important;
}

ul.share-icons li > * .label {
	display: none;
}
 
.share-btn {
	display: inline-block;
	color: #ffffff;
	border: none;
	border-radius: 4px;
	box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
	outline: none;
	text-align: center;
	text-decoration: none;
}
 
.share-btn:hover {
	color: #ffffff !important;
}

.share-btn:active {
	position: relative;
	top: 2px;
	box-shadow: none;
	color: #e2e2e2;
	outline: none;
}
.share-btn .widget-social__link-icon {
	margin: 0;
}
 
.share-btn.twitter     { background: #55acee; }
.share-btn.google-plus { background: #dd4b39; }
.share-btn.facebook    { background: #3B5998; }
.share-btn.linkedin    { background: #4875B4; }
.share-btn.stumbleupon { background: #EB4823; }
.share-btn.pinterest   { background: #BD081C; }
.share-btn.reddit      { background: #ff5700; }
.share-btn.email       { background: #444444; }
.share-btn.whatsapp    { background: #25d366; }


.share-btn.twitter:hover     { background: #4c9ad6; }
.share-btn.google-plus:hover { background: #c64333; }
.share-btn.facebook:hover    { background: #2f4779; }
.share-btn.linkedin:hover    { background: #4069a2; }
.share-btn.stumbleupon:hover { background: #d3401f; }
.share-btn.pinterest:hover   { background: #AD0000; }
.share-btn.reddit:hover      { background: #e54e00; }
.share-btn.email:hover       { background: #363636; }

SocialShare front-matter

You can control whether you want to display social share icons on specific page. If socialshare is true, social icons will be displayed on that page otherwise not be displayed.

blog-page.md

---

...

socialshare: true
---

SocialShare config.toml

You need to add following configuration in config.toml file. You can enable and disable social share icons site-wide using this configuration.

config.toml

[Params.social.share]
  facebook = true
  linkedin = true
  twitter = true
  whatsapp = true
  email = true

Add socialshare.html partial to single.html

You need to add socialshare partial to single.html file as below:-

single.html

{{ define "main" }}
<main>
	<article>
		<header>
          ...
        </header>	
          ...
		<footer>
          ...
		</footer>
	</article>
</main>

...

{{ partial "socialshare.html" . }}
{{ end }}