Social links

Social links allow visitors to share articles and other content from your Zendesk help center on social networks.

Social sharing links can be added to the Article page using the Social sharing setting in the Article page elements theme setting group. The links are provided by the Zendesk {{share}} helper, but changes are possible using HTML and CSS.

Standard social links
View code
{{~#if settings.show_article_sharing}}
  {{#if settings.share_title}}
    <div class="flex mt-6">
      <span class="h5 my-0 mr-4">
        {{#if settings.use_translations}}
          {{dc settings.share_title}}
        {{else}}
          {{settings.share_title}}
        {{/if}}
      </span>{{share}}
    </div>
  {{else}}
    <div class="mt-6">
      {{share}}
    </div>
  {{/if}}
{{/if}}

Using the Social sharing title theme setting you can add a heading to the social sharing links that can be tranlated into multiple languages:

Standard social links with title
View code
{{~#if settings.show_article_sharing}}
  {{#if settings.share_title}}
    <div class="flex mt-6">
      <span class="h5 my-0 mr-4">
        {{#if settings.use_translations}}
          {{dc settings.share_title}}
        {{else}}
          {{settings.share_title}}
        {{/if}}
      </span>{{share}}
    </div>
  {{else}}
    <div class="mt-6">
      {{share}}
    </div>
  {{/if}}
{{/if}}

Button groups

Social links in a button group
View code
{{~#if settings.show_article_sharing}}
  <div class="social-share-links align-items-center font-size-lg bg-white border border-radius md:flex">
    {{#if settings.share_title}}
      <h4 class="my-0 px-6 py-3 text-center border-bottom md:border-bottom-0 md:border-right">
        {{#if settings.use_translations}}
          {{dc settings.share_title}}
        {{else}}
          {{settings.share_title}}
        {{/if}}
      </h4>
    {{/if}}
    {{share}}
  </div>
  <style>
    .social-share-links .share,
    .social-share-links .share li,
    .social-share-links .share a {
      display: flex;
      flex: 1;
      margin: 0;
    }
    .social-share-links .share li:not(:first-child) {
      border-left: 1px solid {{settings.color_border}};
    }
    .social-share-links .share a {
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }
  </style>
{{/if}}
Social links in a dropdown menu
View code
{{~#if settings.show_article_sharing}}
  <div class="dropdown" x-data="Widgets.dropdown({ isExpanded: true })" @click.away="close">
    <button class="not-a-button py-3 cursor-pointer" id="toggle" aria-haspopup="true" x-ref="toggle" :aria-expanded="isExpanded">
      <svg class="svg-icon fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 20">
        <path fill-rule="nonzero" d="M15.3 13.5c-.8 0-1.57.3-2.16.83L6.89 10.7a3.15 3.15 0 0 0 0-1.38l6.25-3.65a3.25 3.25 0 1 0-1.02-1.72L5.87 7.6a3.25 3.25 0 1 0 0 4.83l6.25 3.64a3.25 3.25 0 1 0 3.17-2.56z"></path>
      </svg>
      <svg class="svg-icon" :class="{ 'rotate-180': isExpanded }" xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 12 12">
        <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
      </svg>
    </button>
    <div class="dropdown-menu dropdown-menu-start" aria-labelledby="toggle" x-ref="menu" :aria-expanded="isExpanded">
      {{#if settings.share_title}}
        <p class="text-gray-700 px-4 py-2 mb-0">
          {{#if settings.use_translations}}
            {{dc settings.share_title}}
          {{else}}
            {{settings.share_title}}
          {{/if}}
        </p>
      {{/if}}
    </div>
  </div>
  <style>
    .social-share-links .share,
    .social-share-links .share li,
    .social-share-links .share a {
      display: flex;
      flex: 1;
      margin: 0;
    }
    .social-share-links .share a {
      align-items: center;
      justify-content: center;
      padding: .5rem;
    }
  </style>
{{/if}}

Fixed position

Social links can be presented in a fixed position on the screen (for example, in the bottom-right hand side).

Social links in a fixed position
View code
{{~#if settings.show_article_sharing}}
  <div class="social-share-links fixed bottom-0 right-0 mb-5 mr-5 font-size-lg bg-white border rounded">
    {{share}}
  </div>
  <style>
    .social-share-links .share,
    .social-share-links .share li,
    .social-share-links .share a {
      display: flex;
      flex-direction: column;
      margin: 0;
    }
    .social-share-links .share a {
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }
  </style>
{{/if}}

The links can be revealed on scroll using the following JavaScript code. Use the .hidden display utility on the social links container to hide it from view:

<script type="text/javascript">
  ready(function() {
    var socialLinks = document.getElementById('social-links');
    if (!socialLinks) return;

    /**
     * Reveals the Back to Top link when the page is scrolled by more than 100px.
     */
    var onScroll = function() {
      socialLinks.classList.toggle('hidden', window.pageYOffset < 100);
    };
    
    // Add event listeners
    window.addEventListener('scroll', onScroll);
  });
</script>

You could also hide it on small screen sizes and reveal it on medium-sized screens using the class names .hidden .md:block:

<div class="social-share-links ... hidden md:block">
  ...
</div>

The HTML for social links is provided by the Zendesk {{share}} helper and cannot be modified directly.

You can use social links patterns by copying and pasting the code into the position you’d like them to appear on the Article page, which is the only page template that supports the {{share}} helper.

Despite the breadcrumb HTML being generated by Zendesk, it is possible to customize the appearance of the element in several ways:

  1. Update one or more of the Sass variables described below and recompiling the theme stylesheet.

  2. Add your own custom CSS in the theme’s style.css file targeting the .share element.

  3. Use HTML elements and utilities to wrap the .share element, as some of our patterns do.

The following Sass variables are available in the framework:

Variable Description
$color-facebook The color used for the Facebook link.
$color-twitter The color used for the Twitter link.
$color-linkedin The color used for the LinkedIn link.

Related patterns