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
a757d59b6553c3e0ca857caadb1c090ca39e0519f6e86a0537ab9043c767fa2335907d1d89baf86b96c1be14b0f7609f8edb048fe345932f1d175c97f19bbb86699d2b4fa6bfa623ae1469b54f3d9bc7f9cf9a61e5741fb82cbafc7375e671346d926dcc8711586d57145a463419f2db9cf0b5bf4fbf8afc15a93a8ed8445eca6bd108dc87256268b9697625aa309984370da08e0a68989be69db521699a2e983ccb796c0c3377cbb487e6119e35fdf9da8c84f44bd32bed24347dc77b8c0c9bf13338a6493464e04de6cc152e316bc7c0b2897a34db87ab79cd26a30e8e8697e10f31e142049a880db308672b70e797baa5e41b7c5013a8ee51082b1c77b1e42cc52bdfa539123f9779d951c7cece38c96c762af39db2352c09c3ff97d57fd3698c9c319d1eb0c12db8984c88382abc751b15c7fb8d924bc11bb0280f5a149e375c69723666f8c52acfa0e093d567a8917611920a7afcc90464dadd431f2157491176bfcca63e7cdb594bf88427a1b327954c98a94132da7b9ca06d3a27dc763d1f5abbbf41278c4c5313feb5b283ce597cf09d2d01e939c7ca50da8bc92f61cec36d661046042b1821fda623b02028e0819680af6472991e8a37d6a1e108532a409949ac4fc1f507afedb7ea5f22e491470b28ae01e9528e3ac2514601fe5634ebd8a0df37068f9826c3f1efd4a9eb55e3d4c2eb2dd5eb0f05232baa299677f852cda49a311810abb881c4b5f3730354e5ae83bf0e3d8da2e019d923a53e7b3b8eecf4829327c112704365ab5938efeb8db05b7ee988347dc4f999dd5b553e659888c01928429dd0ae5229e5ed640e0c7ddefe52c698161d7b498ac4f2502c803b103cac7b3ea0a45d9ce4b87d2a5adba5a7364c7be69fe8aee930abc0667b4d995745991b200c74e309abe9883be3a2c441c9df283e458c8599ca9180cfac69809f160d9119c5ed412b2e0e5d71e5

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
02f8fe94c903df6d501aebb9140bb895ea9e89c1268488f3284bf3f777c89180f800fa37ae192ae4a8bfe55e51a213510de7668b7fa1adb86c035cb8150274d32cb814d9309f2a96beae8ef4e40eeaa0a2d273da779fc4a969a15be7567da519244298b8c549b4ede63c70aea147ec1bf1cd79ba4c0cd3e66650c74d42b282588e62d4b48e39f364e1db8bd799193dae2776f6578ac26a8436bd161055e1cf162e2f8b093199939dfe11f55f05eaecfe6b6bc3db8e7859d76b143f41d1012be55e19ba96195b4036dc9ec1f14e0e5451f9f4d0bc02ac7fd80de36ab6323bcad1d439021c536d49cd66a57acea32b0e2f5f8a19fd09725e004f6249a5d523a72724e139cf5959016a4ff12026e34eacbc4968e60d25d2f8a555583d74ac737270875396c6e22c4d8ec98c857cfcf841a78fdb44382368f367451772bcc3445cd32e9656d4055d1161fb8c53b075e61aefd6975331074430b6e624a97240ce415fe0b894ab7518e2f01dab59a17a63fd3bcbad68e55896678d967f43559ff757572c650103a59ac0162db3f795cbd9c904b71b7ddaadf79a5ba55e4bcb1caa9e021277a117a60b63e88ed7b0097e6d5e50da4a73705b19731cae26e50adf560144e1697c3999a9f5e9903c087c1fa672872c8f51d4f4e5e080676433c973894ad0fa8fd9d182eccf52e32eafb09fe29afc7a34ee4910c50b4dcd5a3e7bd25e125500053da5839655870ee154f8b063aebdf7653d4588c5f9b3e3e19e4b5a691d665c8faf25351632e886b1946e6b8e6d7d4dc053135163777eb333065d4d9981dc3f275ee8b991f1133b38f53122c5149b849f44379ff1161a3b9288db09064e0f1ad22cecd896b1d20ab7c61cb8783c78573a0bb785370420265c2f4d126b2efe14971d7736e0a3c965f0b8e317864310d30de32d544acbb5d6f97b5837ba82f163739c1e181043a11372cc78808ed16a

Button groups

Social links in a button group
View code
eb68e9cacf0ab56806a52c12c061a54a0e63d3b2da9052f927d6ee1c043e30e2095de47c26a7513b6414307e4718a89e8569accc7aa7469bc239a06f66cc981e4a7f003145cd0f5d9fbc4623dcff43f0e7bb8c7efa12b286f81488c1f5da9d3d1b4d2017e57e9ac60a3bc28eae981ffd55df9ff5a801eb5279af2a7ceda9be6a07a2b30a0c77876aa1c5671c71909018a294b75082e014263e9c7644ef95d2e7e853f1e33fb5285b6510fef8839ca84f6181e2252c846ac4273dd1300e90edfcc4d7f073638b187849b0c1160580564c1d831c497a7de795ee209d588dcd68353dd67d2ab49561939f65a58fbd5151d65268c2b3c0b0daa1d3ad8dea74ef8e14812707c146358b1a9fcf90056e5e3e9f2d283ba9216aed974f078a3c94f630b94509fe97798417111688951cf1a9885c78d9cf765bc3789e119025de386d4d6c9f1c50ac4b123ddd94176a553983a185b37585b4dcb6653605c0cbfd824f8a1f68d8664aee6be70f353825edd7277d65185a494ee0678abdf1badc5191ac3573f9e0727cbd6fe2a6515088ed212e85e8689cdc2c80b6f08b071c8dde3fdf28a7282386627f8acd0e5e8d50eba044734e904da6bcb1332c56e11d7748576bab2ca0388b2ce31e87b04aad587d6cdc964fa62f6aef1cd360d57e17ab6d8bb954c63014edbda4338d0e04023e578491db63ead9574bf7c9a411b856b044facc4c2b107fabd9e9483d8ce1b7b5c589bfffdf484f463a94713e1729039142eb8d22035840bffd82e0a4246e3fb7ffa713c0243a53e942c6fd0645c4e206db4bdc4a4d9cdebf3a72c292a2c61a86bd44ebca0958ab2179a85df5c3043270f18a5c5ea16c691ee97c58c5db4a330afb5703563a5f89ad9f2f7c4fac8e5d9d075fadc0c8edb0429b91c9e800e9c1a8ae738d5bcf4c7b781bf77839b200ca0825ca58ff2234c203cfb9d82042029d46e1e46a5cc661864296709e2794c15a5c56868c52ba4fcef9b43c52ee6c91b080deb310af0fc7bfe0e938de4e2111a75cf061cd8573fa9097c572e94cbbabcdf1930cac9dfe235f301266c53ec9f789c2a453ef0607031aeb928e54702785c99632c6a8948898b180574f3be1344abd8f540fc1a42cf62b2e8eec8aa0be6e502188d6eda52ad2ec0df12c3f7fccd77c2e743cebbe447c111fb86360d1edc580fde2730ef426e2ec14bfff2c8b62595b1c1ce7b27b964c14db7cfa83f6718b5d673cd7d3a235467b43b92e4782255da09a093722ff45b635e02e444aa46f687704340a9ef3c4704a97a73f572d80023901dbe6f4211b59a0da5758a504ca7900f9ad706c9168357cdc5f889d3d7dd1bc82d1439793d8f76150af744232cfb397a72f689ac6298cd8f3efd6a5d37538a6bf8dc383ede517f43f0ea1df0f0e1e107805f29e40fb4f2bf09675e640629fc0daac00a61d3628971ca49f28c348c3c924dd198105e31bc17abda60a29554e9fe78e85dfe28eba39c1c323af253ee262523413a67372fd6fa51bc528d3a0f22aa47851e4a483cfc216c1843567002595557bc00da0c74fd749f4501a7cbd25d7930500bcde6b99c33c5997f945ca66d6993a7847f7739f6db50951be5f4af389a73893851031f7fb6c8e6435a2e1f0cbf2c40ed09b18
Social links in a dropdown menu
View code
176030f633b28c9c0928e687530356bf9b4bed9ad315c4c91d844c611e11cf0b700c0c25790f99de0b271cfd44bf7ac3cc633a590d1d083d0864d58b23616e5374a153a21db92e930aa4ff9003e048d236cca62ae6bc37af1a9f31c374abd96e0da3938b72ebb12481bf44b374b31e24cad122356f1b8971c370853775eb387d8d2f8929eed5961869856363a3e9ab9e260ecca29fb4a362eb505b915720c2e8b9e5f9163422d2677a8e2c236f902f37f4b6bb7382da0a2a5781193db17461f31cf0a8d7be04e6afa4e9ec1ccf62e9e5c8658bded80ab404323efa8b7ccf67654e5b74b535c6e392e2a922510c15c49738c6e1d887aa9b68fd72aaf81e9d78cf40395f1a5c5cff22a5ecb10c16982bc63c4da0fd4cabf0925e04d2f2031bd27d96b60aa52b56ae3140b4c75403e6f1c7189dcf4bb5069b16d6e744d4c96845bd727ad93053f8b826de360fdcc7fb98302aa68400244cb4f2f469f24b4ed303c49734eccd12f15f46070f2b7bef118857b6ba9c0eb875b4534bcec06593e60e6a01ee5b37c02c497d111e2c277c1d3b1e2b0cc319b64598d0fa60e28a7c0ea15297b791678e87861057e0aaf7755323ac08c42fd5a9486d5adb929d41c727f7d9230bc1a2f55034b29650164c4114f651d78ab27fe009164b2d100c5078809570d612a3c58a9a4cc40280248a9dc864c4358c90703c7bd6b924e9f68055e35b89de2b88df9dcaac2392b66ee71924a157e439e0efcb563c3ab2945bc7591e6fd8a19551951f1f94f3955d7f1b8b6b73d78375ba28793d47fff01d60a18ac1a529e49a3129e188203e5800d73c431fd613136d237931ea9ae89288d797070493040333e3cf41ec5ab9185ce452bf626b77edb04a1da0279050151b9b3830d6c5e38a6c01f40e44611223b4dd46cc0781b13766515a52c54478c21c230142e9ed155694eeb18ade6b2e1df25ba21ce3ad86bc05e7d590ff59ae0100640d9f5a0c598d95c9442a282074c996599f90c1bfe2e786e9866100db86a948617a13223c205064ebb484b3298bc4ebf3f19c72f46e34f2b6a5b321a2026221534dd242713a7e358a9c2f5caffa1812126eba8103fb3a36cdca1299a8f0a49e1a64e18a868ca3944db514e55973f1a5454577704943f17c9907419b51657afb665644953e916ada0138c825e3b303761c8278f34fb855cc44ca90bfba01598b045c01f73f35a703e577ea5ce376ab5875149a3e2633c17e14928a1d98d4f90f9e1ab8259b663145c124aedfcaecb6f8f64bdd3c8d7b7a8f8a54310c113b70d487798a3b9704bd5b519c4747dd313503861ee5cb974713200067c7d442ede60c84a8e5372ffde0b6bf840461c4bfdef5503878185c4eb2774be69fb349d7a1e05d75db6800f6a3025da470ed1d0e92fe468fdc4d1c3047b710cdce99436f78f54ea4ce8519aa01d4348ca9103c1285496e3349807a38a3f06620d639b05193f4660033ed8be80f29cbf6e5ae876ffb1e332f70e64b2bad974dbeb1fe853b097a0cf03e9a00c0147979c041ced02bdd98cf699801251ebee7f8ccecf17a90f02d520b1f9511a7ef49a2c7fe43a11e0b7d3c52135e0ec0efca078e44e2fb462af85557ae43f1920e3aff39d92b2897ee6cf106921d6c0e56dad16e11b666dfa48382c693a8e7d19e423a63f85efc7a6e99f0d1fbe1942c1e801a24a945db5dcd8aed20340921a5e9564509fe1c3d89b04f765a2962ac477ec88f840d0e942b85d30e6b10619ea00e392d9f52efe66d1d6d50bfe0883b5d68716652d4b95e1e6f22d65962a61333cb3280e38d6e270a54edfa462f74fb93ed247f0def3068da7e69a4a5f482f0559e96d118bcdb3836f65e1fa7333e5f69c6de74b7a9d99345b4044f6f6b3456d93003366238cf66e3d2e1691648c2f00e86f4c8b09c438caf6d9fe9e0fd9c6e7b9c1fb07b932b3bbd8cfcb5004e8e49de38b93d4d023ace93d12b0f287dbfd57f7b11bf8c43a75fd6a73e89e9f94bdfbb927c716ab5e5690cbd5c6d6efaa880b4b7759f5f4f437efa6a085d6c5128b8859ec4dac02074ce9cc1bd2e1f01b1cb4986b8704a6f002f20fc89636b2f2cd6ba4ccbbda662c834d2ebb90086c095e72cf8ad0dd8bf47214d84d9142defdaa30fe50341ad2bc9de9b1580845281b89409b96e5d87d450c8cfb3fe0604775aa64a6e1772ac317c0b1c3155abffc19a5efc140a378fcc222a5cfa99a0455e1be6bb21d3704df3fd1fca23a98059ff0ec5f18e575acc9dc24ccaa064da5280453b6e74346f1b9b4e459d4f606de3b94fd77e99ec49a4b07ed19b506e82defc915b37a33adb8735885e60e13112b50864050f87b495e296b14f3a8c668b35bf379a1528037a0d1b3b14430a6d15eee1e9a1ba7bb345a66e2aea442271bfe9949dcb1282dd53c1327d5d02cf328a9e5893c9b00d4052cedd99b1bec9134a95b743746337385a63e8811dbc07579f89ffa25ffb3bf73a374fe86f4219e6bf1545f5b23757ac9fcd63e586c6bcdaa5b19660aae2cf875a0fce6fd7dfd9998e1c2fe82fc3651143266efd85068a1e01d67fa048d1d38d23008fb8fa739933455208fdf512c2348c140736ef03c73d44e500ea1e740c9a6adcb69b178f3b2d58f4398eff1d7f22c1211019bb64f0d68c519df4454511fe50d94e8b937f0ab5681c56e286cf81f1f6333b66beda12ef70e53dacd8eebb57e041e874151bb0fa7445d5b3513241dc2b61039a80ffaa04b6c2c9a26deccc49c8761aa36410941763d18566f58b8afc071733bbbf84fb9c75f44173abf64a79e5b239664a115e2a7f8c093d7b685923758717afc1eee4bea3014f9504e2224c5df6e6326a654d9aa8b17fcfbb282cd879faa76e21f1e6eba23c1861995cafe7eceb4d6e797dae488913acc2c43d64c076bab58dd6d4c782166a2caa628337e6c420d339513a0a9ff4c15a0b6b3144f93e0130d0f12977aff2a473c31c654d3d8a6535add8fa5a6daf666405846696acaede4edad1d58024c95d59830d1bc4fac078b1b3ea3567efa8cbda219382e09cfba3bd81fc7846c51d22e08d700ead247bd9c5e6fe44580e14a5aece1524437a967fb00bc65857af73c5bbd1e0ce7a65f3f743d10a6177ad7e043bf040b6f746e7326ed18076aefac173e67ee186d9c2275541ffdb9201ad0eebea0eee0f3dcbaa16dbf5be317ef0abcb4a78f4de

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
533b3ef34a44c6eca9d3333f26d0c6b2355bdd6c4d75b4bbec96ff237f628c386b3117fcf48254630f51403d09aa7f53e1840febc337b98df404b53111eecf47404dc698a03eb20699a1e64689afacabd0c052029d5452a9c2fde1ac9eda574be0254694e98e1b5e066247c1034a74b9b37a999b4a774d7722700714df31158db57ded1843dd74d4db30e8932e9e29ff209ad4fae99d1141a7babdae1bd7fa0488312d617c53eaa058315ec823901ff46b1e1b287f7fd2f69a8bc765d974f8c0a616d0e19f2ce27b5d89babdc91ea47433c8b98b03ae35a9d2c92568cd91ee6c38ec7688a8b3cbb3dbab8023f7fd071229c3f3bcfcee05e7e9230f94dd0857fe8d07a5cdad8c998eab9bd6890799c8f9b91c4307288aacaa8121544625dc9035c7ca663066971d1830559b278acc979986492486b53ff90e2f667e1ff4a6d4dc7b00150fdd91161e333696936d9271d33b84c427be19777aa22796710c33f66bfd37c3b94fa379ee573702944d8445b0b784082167c572640e6ac07c65a261f6f7da1ea439551b872a41ba26a6807bc6c8cc864fd4dd851984e39e20828819f4f9263c2b6a4c8456a80f86e17702fd499b5252da09692b81cafc05123c9e0f7c337992321ac70bae8d2210e53fe72229fefe95a3e0072698b6ccb5ad48b8b819b4c1e1227ffd59157ee9cf7927fa87a36e427c938cdb04cc3d802ed7a7f6a26702e5152139d257a05b2db18adcd45d24ab76d89636ca720c710d53f0cf29afc62e2bda28b78e309e3ca8ea72f6ddbe2040f68db1e3c17ea9caec470e2eff0b8d93fe5cb6bf2b383bb8851a44a766d8b8472933b867d446f5734752231b4a812be771473fb6d532bf599bcc190e6e58696841a973a1eaf9710ea7f13fd984f809769cf7cb25a14128ef0a1934ce42ec9b683a29db1fc11e364a8e1c3c049c65da307dcaad2fc44339e6fd88b79077642c2dcac6180824ba551df3259f0ea382aca6ad5f143a358138be4c8147f562b38adef98a78f90627fe0197f607417f1be5

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