Sections

Add social media links

Links to social media pages are a common addition to Zendesk Guide themes. This guide explains how to add them anywhere in your Help Center and customize their appearance.

Links to the most popular networks like Facebook, Twitter, LinkedIn or Instagram are often found in the page header or page footer, however following the steps below will allow you to present them anywhere on any page.

The example below uses our default icons and styles, presenting the links in a horizontal list:

  • <ul class="share font-size-xl">
      <li>
        <a href="https://www.facebook.com" class="share-facebook" aria-label="Facebook" target="_blank">
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12">
            <path fill="currentColor" d="M6 0a6 6 0 01.813 11.945V7.63h1.552l.244-1.585H6.812v-.867c0-.658.214-1.242.827-1.242h.985V2.55c-.173-.024-.538-.075-1.23-.075-1.444 0-2.29.767-2.29 2.513v1.055H3.618v1.585h1.484v4.304A6.001 6.001 0 016 0z"></path>
          </svg>
        </a>
      </li>
      <li>
        <a href="https://www.twitter.com" class="share-twitter" aria-label="Twitter" target="_blank">
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12">
            <path fill="currentColor" d="M12 2.184a4.83 4.83 0 01-1.415.397 2.52 2.52 0 001.083-1.396 4.87 4.87 0 01-1.564.612A2.428 2.428 0 008.308 1c-1.36 0-2.463 1.13-2.463 2.524 0 .198.023.39.065.576C3.863 3.994 2.05 2.99.835 1.46a2.564 2.564 0 00-.332 1.27 2.54 2.54 0 001.094 2.102 2.413 2.413 0 01-1.115-.316v.032c0 1.224.849 2.243 1.974 2.476-.363.1-.743.115-1.112.042.314 1.002 1.223 1.734 2.3 1.754A4.857 4.857 0 010 9.866 6.83 6.83 0 003.774 11c4.528 0 7.005-3.847 7.005-7.182 0-.11-.003-.22-.007-.327.482-.358.898-.8 1.228-1.308z"></path>
          </svg>
        </a>
      </li>
      <li>
        <a href="https://www.linkedin.com" class="share-linkedin" aria-label="LinkedIn" target="_blank">
          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" focusable="false" viewBox="0 0 12 12">
            <path fill="currentColor" d="M10.8 0A1.2 1.2 0 0112 1.2v9.6a1.2 1.2 0 01-1.2 1.2H1.2A1.2 1.2 0 010 10.8V1.2A1.2 1.2 0 011.2 0h9.6zM8.09 4.356a1.87 1.87 0 00-1.598.792l-.085.133h-.024v-.783H4.676v5.727h1.778V7.392c0-.747.142-1.47 1.068-1.47.913 0 .925.854.925 1.518v2.785h1.778V7.084l-.005-.325c-.05-1.38-.456-2.403-2.13-2.403zm-4.531.142h-1.78v5.727h1.78V4.498zm-.89-2.846a1.032 1.032 0 100 2.064 1.032 1.032 0 000-2.064z"></path>
        </svg>
      </a>
    </li>
    </ul>

Use font size utilities like .font-size-xl on the list itself to control the size of the icons. Update the href attribute of each link to point to your page and you can then use them anywhere in your templates.

Customizing the icons

You’re not limited to our default icons or styles.

Boxicons is one of countless websites that offer free SVG icons that you can use in your social media link. The example below uses icons from their collection and presents the links in a simple horizontal list:

  • <nav>
      <a class="mr-1 link-facebook hover:no-underline" href="https://www.facebook.com" aria-label="Facebook" target="_blank">
        <svg class="fill-current" width="32" height="32" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M20,3H4C3.447,3,3,3.448,3,4v16c0,0.552,0.447,1,1,1h8.615v-6.96h-2.338v-2.725h2.338v-2c0-2.325,1.42-3.592,3.5-3.592 c0.699-0.002,1.399,0.034,2.095,0.107v2.42h-1.435c-1.128,0-1.348,0.538-1.348,1.325v1.735h2.697l-0.35,2.725h-2.348V21H20 c0.553,0,1-0.448,1-1V4C21,3.448,20.553,3,20,3z"></path>
        </svg>
      </a>
      <a class="mr-1 link-twitter hover:no-underline" href="https://www.twitter.com" aria-label="Twitter" target="_blank">
        <svg class="fill-current" width="32" height="32" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M20,3H4C3.447,3,3,3.448,3,4v16c0,0.552,0.447,1,1,1h16c0.553,0,1-0.448,1-1V4C21,3.448,20.553,3,20,3z M8.339,18.337H5.667 v-8.59h2.672V18.337z M7.003,8.574c-0.856,0-1.548-0.694-1.548-1.548s0.691-1.548,1.548-1.548c0.854,0,1.548,0.693,1.548,1.548 S7.857,8.574,7.003,8.574z M18.338,18.337h-2.669V14.16c0-0.996-0.018-2.277-1.388-2.277c-1.39,0-1.601,1.086-1.601,2.207v4.248 h-2.667v-8.59h2.56v1.174h0.037c0.355-0.675,1.227-1.387,2.524-1.387c2.704,0,3.203,1.778,3.203,4.092V18.337z"></path>
        </svg>
      </a>
      <a class="mr-1 link-youtube hover:no-underline" href="https://www.youtube.com" aria-label="YouTube" target="_blank">
        <svg class="fill-current" width="32" height="32" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M21.593,7.203c-0.23-0.858-0.905-1.535-1.762-1.766C18.265,5.007,12,5,12,5S5.736,4.993,4.169,5.404 c-0.84,0.229-1.534,0.921-1.766,1.778c-0.413,1.566-0.417,4.814-0.417,4.814s-0.004,3.264,0.406,4.814 c0.23,0.857,0.905,1.534,1.763,1.765c1.582,0.43,7.83,0.437,7.83,0.437s6.265,0.007,7.831-0.403c0.856-0.23,1.534-0.906,1.767-1.763 C21.997,15.281,22,12.034,22,12.034S22.02,8.769,21.593,7.203z M9.996,15.005l0.005-6l5.207,3.005L9.996,15.005z"></path>
        </svg>
      </a>
      <a class="mr-1 link-instragram hover:no-underline" href="https://www.instagram.com" aria-label="Instagram" target="_blank">
        <svg class="fill-current" width="32" height="32" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path d="M20.947,8.305c-0.011-0.757-0.151-1.508-0.419-2.216c-0.469-1.209-1.424-2.165-2.633-2.633 c-0.699-0.263-1.438-0.404-2.186-0.42C14.747,2.993,14.442,2.981,12,2.981s-2.755,0-3.71,0.055 c-0.747,0.016-1.486,0.157-2.185,0.42C4.896,3.924,3.94,4.88,3.472,6.089C3.209,6.788,3.067,7.527,3.053,8.274 c-0.043,0.963-0.056,1.268-0.056,3.71s0,2.754,0.056,3.71c0.015,0.748,0.156,1.486,0.419,2.187 c0.469,1.208,1.424,2.164,2.634,2.632c0.696,0.272,1.435,0.426,2.185,0.45c0.963,0.043,1.268,0.056,3.71,0.056s2.755,0,3.71-0.056 c0.747-0.015,1.486-0.156,2.186-0.419c1.209-0.469,2.164-1.425,2.633-2.633c0.263-0.7,0.404-1.438,0.419-2.187 c0.043-0.962,0.056-1.267,0.056-3.71C21.003,9.572,21.003,9.262,20.947,8.305z M11.994,16.602c-2.554,0-4.623-2.069-4.623-4.623 s2.069-4.623,4.623-4.623c2.552,0,4.623,2.069,4.623,4.623S14.546,16.602,11.994,16.602z M16.801,8.263 c-0.597,0-1.078-0.482-1.078-1.078s0.481-1.078,1.078-1.078c0.595,0,1.077,0.482,1.077,1.078S17.396,8.263,16.801,8.263z"></path>
          <circle cx="11.994" cy="11.979" r="3.003"></circle>
        </svg>
      </a>
    </nav>

When using custom icons you can create links for any social network you like.

The brand-specific colors can be applied to links by giving each link a unique class and adding add some simple custom CSS to your theme’s style.css stylesheet. For example, if your Facebook link has a class name of .link-facebook you could use the following CSS to change the icon color displayed:

.link-facebook {
  color: #3b5999
}

.link-facebook:hover {
  color: #3b5999
}

You can also use bold full-color icons like those available from Icons8 if that works with your theme’s overall look-and-feel:

  • <nav>
      <a class="mr-2 text-inherit hover:no-underline" href="https://www.facebook.com" aria-label="Facebook" target="_blank">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px">
          <linearGradient id="facebook-fill" x1="9.993" x2="40.615" y1="9.993" y2="40.615" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#2aa4f4"/>
            <stop offset="1" stop-color="#007ad9"/>
          </linearGradient>
          <path fill="url(#facebook-fill)" d="M24,4C12.954,4,4,12.954,4,24s8.954,20,20,20s20-8.954,20-20S35.046,4,24,4z"/>
          <path fill="#fff" d="M26.707,29.301h5.176l0.813-5.258h-5.989v-2.874c0-2.184,0.714-4.121,2.757-4.121h3.283V12.46 c-0.577-0.078-1.797-0.248-4.102-0.248c-4.814,0-7.636,2.542-7.636,8.334v3.498H16.06v5.258h4.948v14.452 C21.988,43.9,22.981,44,24,44c0.921,0,1.82-0.084,2.707-0.204V29.301z"/>
        </svg>
      </a>
      <a class="mr-2 text-inherit hover:no-underline" href="https://www.twitter.com" aria-label="LinkedIn" target="_blank">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px">
          <path fill="#0078d4" d="M42,37c0,2.762-2.238,5-5,5H11c-2.761,0-5-2.238-5-5V11c0-2.762,2.239-5,5-5h26c2.762,0,5,2.238,5,5 V37z"/>
          <path d="M30,37V26.901c0-1.689-0.819-2.698-2.192-2.698c-0.815,0-1.414,0.459-1.779,1.364	c-0.017,0.064-0.041,0.325-0.031,1.114L26,37h-7V18h7v1.061C27.022,18.356,28.275,18,29.738,18c4.547,0,7.261,3.093,7.261,8.274	L37,37H30z M11,37V18h3.457C12.454,18,11,16.528,11,14.499C11,12.472,12.478,11,14.514,11c2.012,0,3.445,1.431,3.486,3.479	C18,16.523,16.521,18,14.485,18H18v19H11z" opacity=".05"/>
          <path d="M30.5,36.5v-9.599c0-1.973-1.031-3.198-2.692-3.198c-1.295,0-1.935,0.912-2.243,1.677 c-0.082,0.199-0.071,0.989-0.067,1.326L25.5,36.5h-6v-18h6v1.638c0.795-0.823,2.075-1.638,4.238-1.638 c4.233,0,6.761,2.906,6.761,7.774L36.5,36.5H30.5z M11.5,36.5v-18h6v18H11.5z M14.457,17.5c-1.713,0-2.957-1.262-2.957-3.001	c0-1.738,1.268-2.999,3.014-2.999c1.724,0,2.951,1.229,2.986,2.989c0,1.749-1.268,3.011-3.015,3.011H14.457z" opacity=".07"/>
          <path fill="#fff" d="M12,19h5v17h-5V19z M14.485,17h-0.028C12.965,17,12,15.888,12,14.499C12,13.08,12.995,12,14.514,12	c1.521,0,2.458,1.08,2.486,2.499C17,15.887,16.035,17,14.485,17z M36,36h-5v-9.099c0-2.198-1.225-3.698-3.192-3.698	c-1.501,0-2.313,1.012-2.707,1.99C24.957,25.543,25,26.511,25,27v9h-5V19h5v2.616C25.721,20.5,26.85,19,29.738,19	c3.578,0,6.261,2.25,6.261,7.274L36,36L36,36z"/>
        </svg>
      </a>
      <a class="mr-2 text-inherit hover:no-underline" href="https://www.youtube.com" aria-label="YouTube" target="_blank">
        <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="48px" height="48px">
          <linearGradient id="youtube-fill" x1="9.816" x2="41.246" y1="9.871" y2="41.301" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#f44f5a"/>
            <stop offset=".443" stop-color="#ee3d4a"/>
            <stop offset="1" stop-color="#e52030"/>
          </linearGradient>
          <path fill="url(#youtube-fill)" d="M45.012,34.56c-0.439,2.24-2.304,3.947-4.608,4.267C36.783,39.36,30.748,40,23.945,40	c-6.693,0-12.728-0.64-16.459-1.173c-2.304-0.32-4.17-2.027-4.608-4.267C2.439,32.107,2,28.48,2,24s0.439-8.107,0.878-10.56	c0.439-2.24,2.304-3.947,4.608-4.267C11.107,8.64,17.142,8,23.945,8s12.728,0.64,16.459,1.173c2.304,0.32,4.17,2.027,4.608,4.267	C45.451,15.893,46,19.52,46,24C45.89,28.48,45.451,32.107,45.012,34.56z"/>
          <path d="M32.352,22.44l-11.436-7.624c-0.577-0.385-1.314-0.421-1.925-0.093C18.38,15.05,18,15.683,18,16.376	v15.248c0,0.693,0.38,1.327,0.991,1.654c0.278,0.149,0.581,0.222,0.884,0.222c0.364,0,0.726-0.106,1.04-0.315l11.436-7.624	c0.523-0.349,0.835-0.932,0.835-1.56C33.187,23.372,32.874,22.789,32.352,22.44z" opacity=".05"/>
          <path d="M20.681,15.237l10.79,7.194c0.689,0.495,1.153,0.938,1.153,1.513c0,0.575-0.224,0.976-0.715,1.334	c-0.371,0.27-11.045,7.364-11.045,7.364c-0.901,0.604-2.364,0.476-2.364-1.499V16.744C18.5,14.739,20.084,14.839,20.681,15.237z" opacity=".07"/>
          <path fill="#fff" d="M19,31.568V16.433c0-0.743,0.828-1.187,1.447-0.774l11.352,7.568c0.553,0.368,0.553,1.18,0,1.549	l-11.352,7.568C19.828,32.755,19,32.312,19,31.568z"/>
        </svg>
      </a>
      <a class="mr-2 text-inherit hover:no-underline" href="https://www.instagram.com" aria-label="Instagram" target="_blank">
        <svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="48px" height="48px">
          <radialGradient id="instagram-fill-1" cx="19.38" cy="42.035" r="44.899" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#fd5"/>
            <stop offset=".328" stop-color="#ff543f"/>
            <stop offset=".348" stop-color="#fc5245"/>
            <stop offset=".504" stop-color="#e64771"/>
            <stop offset=".643" stop-color="#d53e91"/>
            <stop offset=".761" stop-color="#cc39a4"/>
            <stop offset=".841" stop-color="#c837ab"/>
          </radialGradient>
          <path fill="url(#instagram-fill-1)" d="M34.017,41.99l-20,0.019c-4.4,0.004-8.003-3.592-8.008-7.992l-0.019-20 c-0.004-4.4,3.592-8.003,7.992-8.008l20-0.019c4.4-0.004,8.003,3.592,8.008,7.992l0.019,20 C42.014,38.383,38.417,41.986,34.017,41.99z"/>
          <radialGradient id="instagram-fill-2" cx="11.786" cy="5.54" r="29.813" gradientTransform="matrix(1 0 0 .6663 0 1.849)" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#4168c9"/>
            <stop offset=".999" stop-color="#4168c9" stop-opacity="0"/>
          </radialGradient>
          <path fill="url(#instagram-fill-2)" d="M34.017,41.99l-20,0.019c-4.4,0.004-8.003-3.592-8.008-7.992l-0.019-20 c-0.004-4.4,3.592-8.003,7.992-8.008l20-0.019c4.4-0.004,8.003,3.592,8.008,7.992l0.019,20 C42.014,38.383,38.417,41.986,34.017,41.99z"/>
          <path fill="#fff" d="M24,31c-3.859,0-7-3.14-7-7s3.141-7,7-7s7,3.14,7,7S27.859,31,24,31z M24,19c-2.757,0-5,2.243-5,5	s2.243,5,5,5s5-2.243,5-5S26.757,19,24,19z"/>
          <circle cx="31.5" cy="16.5" r="1.5" fill="#fff"/>
          <path fill="#fff" d="M30,37H18c-3.859,0-7-3.14-7-7V18c0-3.86,3.141-7,7-7h12c3.859,0,7,3.14,7,7v12 C37,33.86,33.859,37,30,37z M18,13c-2.757,0-5,2.243-5,5v12c0,2.757,2.243,5,5,5h12c2.757,0,5-2.243,5-5V18c0-2.757-2.243-5-5-5H18z"/>
        </svg>
      </a>
    </nav>

Once you have created your links you can add them into your page templates.

They can be combined with our standard header layout in the header.hbs page template:

  • <header class="header bg-white border-bottom" id="header">
      <nav class="navbar navbar-light container" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
        {{#link 'help_center' class='navbar-brand mr-auto'}}
          <img class="block img-fluid h-6" id="logo" src="{{settings.logo}}" alt="{{t 'home_page' name=help_center.name}}">
        {{/link}}
        <button class="navbar-toggle ml-2" data-toggle="collapse" data-target="#primary-nav" aria-controls="primary-nav" aria-expanded="false" aria-label="{{t 'toggle_navigation'}}">
          <span></span>
        </button>
        <ul class="nav nav-menu text-center collapse md:flex" role="menu" id="primary-nav">
          {{#if help_center.community_enabled}}
            <li class="nav-item">
              {{link 'community' class='nav-link' role='menuitem'}}
            </li>
          {{/if}}
            <li class="nav-item">
              {{link 'new_request' class='nav-link' role='menuitem'}}
            </li>
          {{#unless signed_in}}
            <li class="nav-item">
              {{#link "sign_in" role='menuitem'}}
                {{t 'sign_in'}}
              {{/link}}
            </li>
          {{/unless}}
          <li class="nav-item">
            <nav class="p-2 flex justify-content-center">
              <a class="mr-4 link-facebook hover:no-underline" href="https://www.facebook.com/" aria-label="Facebook">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12">
                  <path fill="currentColor" d="M6 0a6 6 0 01.813 11.945V7.63h1.552l.244-1.585H6.812v-.867c0-.658.214-1.242.827-1.242h.985V2.55c-.173-.024-.538-.075-1.23-.075-1.444 0-2.29.767-2.29 2.513v1.055H3.618v1.585h1.484v4.304A6.001 6.001 0 016 0z"></path>
                </svg>
              </a>
              <a class="link-twitter hover:no-underline" href="https://www.twitter.com/" aria-label="Twitter">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12">
                  <path fill="currentColor" d="M12 2.184a4.83 4.83 0 01-1.415.397 2.52 2.52 0 001.083-1.396 4.87 4.87 0 01-1.564.612A2.428 2.428 0 008.308 1c-1.36 0-2.463 1.13-2.463 2.524 0 .198.023.39.065.576C3.863 3.994 2.05 2.99.835 1.46a2.564 2.564 0 00-.332 1.27 2.54 2.54 0 001.094 2.102 2.413 2.413 0 01-1.115-.316v.032c0 1.224.849 2.243 1.974 2.476-.363.1-.743.115-1.112.042.314 1.002 1.223 1.734 2.3 1.754A4.857 4.857 0 010 9.866 6.83 6.83 0 003.774 11c4.528 0 7.005-3.847 7.005-7.182 0-.11-.003-.22-.007-.327.482-.358.898-.8 1.228-1.308z"></path>
                </svg>
              </a>
            </nav>
          </li>
        </ul>
        {{#if signed_in}}
          <div class="user-info dropdown">
            <button class="not-a-button dropdown-toggle inline-flex align-items-center" aria-haspopup="true">
              {{user_avatar class="user-avatar ml-2 h-6 w-6 circle"}}
              <span class="nav-link pl-2 pr-0 hidden md:inline-block">
                  {{user_name}}
                  <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 12 12" aria-hidden="true">
                    <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
                  </svg>
                </span>
            </button>
            <div class="dropdown-menu" role="menu">
              {{link "my_activities" class='dropdown-item' role="menuitem"}}
              {{my_profile class='dropdown-item' role="menuitem"}}
              {{change_password class='dropdown-item' role="menuitem"}}
              {{link "sign_out" class='dropdown-item'  role="menuitem"}}
            </div>
          </div>
        {{/if}}
      </nav>
    </header>

Or our standard footer layout in the footer.hbs page template:

For more layout possibilities, including having the links displayed in a fixed position on the page, review our collection of social link patterns.

Questions or feedback about this guide? Let us know