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
a9f31e8e49c80ff133a27f3a73132787100092638055a7550ffafb8da4bf51306adb983a00849e04280bb9a4c4d507830f347e0af37e7d948f2aa1851a6978cc0c373ed785bbd570894d27f9d9ef5b4d5b5676dc1e8df17d54599aecc1e1c3a8fd0b5864dc45f1f98767f265a1024328ac95e22778a300ee288ce0c72ca25bc6dd562150b960161a74680a46d9b86c62133c1a22960769ace5caf9366456844e39754348532e121a661dd6ccc028b774190d3d297d28d5e61dc145b7897d8fe032abce3d07e2fa9f9ad249b8d6f04c252c9e7352287f0b1674707cb4f5524196e25fcc1339f9a3854f98d894cd4d7bb529aa32e68303c09f6cfe505abd94a3a5344257eafb4017e19f52b53cc929703a1fc0acd67f91fd9a34e10da21768147b2da9a5e90890d3dbe314e9b0e1e6d16e4a874773fab80ee9f7d5ca1f9a6252c9117b970856bce9cb4ff25757d0f67231559d64fac8762d9ced6b0673715bcacbab384265592b28ee6d093045e93813a91bc2dd25505063f97a530fbfec64e4a3420ab22a9e56768d55b0c707aaf2ced56972ea26d909230349838123ee479322b5744f1cef5c4d47da6e9c7d13253b1c4d7be28a998993f0bf0e260726bb996d213e7fc4e1dd9631b85e8eedb739ec4bc2e367949062440b278a846a98f1492f3244828ec1cc16a3843ee8e4336184a94a952d5f3a709a4d9ecf2fc8cf564d1736c4ac6cb15cba6f3a3dc819c846372b6958f9843c155183209c920f70196a87670a070d28c835f87f2aca68abdfe718d20c9eb083205290be7403c825388a1f9243430f6107b701ab5cce5393a94650e0b1e1d5737089180150f342d5fb0b5a6ed14106c3ec433ae8358e907cc00de78ba1e1b35e2c2171dd383609df498dcefd2bcdb93b3f62f4994ca86dd6cbd30431d29709b998f08ff4baf677e0b46c7a9c1e337d11721807623b0d34fe486a66

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
261967474144a0ee56a6d908484ef9290575c20e7d9e2208048186f71c8e7c4fcc0a5b84a99c58549c5859e0a6ed5aaaa69379f774ed9be439681e023c772680f91c0f95a6019e867b51e36cfe4d6988f1e571f42945f18f7aa7418cfcd1d0861ca03a0693b3c6d0118a631cd04106a89bcceeeb3a77d2484e74329dda5349a6e7be42007011ac3087d40c3b43efc75d36b50c5642f08c4b404278653e89af223e841d1bcc9c9e84226517dd1e4fafefddae9dd4d36800ae327a991c3a4112423634728bdcfa5dfc0494e32655f182fe9ce09a0bf744572b529227326b07f1a215dc165ffc5ab8f1414692b46b12338d0f55f32cc11c0afccdd01a3a64e08fc55283cb7d264dbcd4442bb3c018cddf9b99eb7110a85fbb25e0cbf77a722230620fd714f788d0c561a8484b427da17f7693dc1302a356815f4e5fc764ac69dffc100e7d5c583efb962636d5c44c23188c1f57e5cfdc24a2d84045adfa67f82356b2f22e0a8e24bba19aeaa26ca0a2f70507c16963337fa90f11748a4acea5c85cf94402185be7d962d43a949e00645beb640e5396417b57ed4d2ec3940f8adf5013c26585f4d93a8b550bd872d491227aeec001a8d7960d66a946718d54b3fd2b8fb28c7443cd2cd7bdffd9336d7031ef104607003c1919c8d0a6d6b09692bc9f8dda22340740f8e6a9ff5cd6cbd71d8c3e9a422c327cf150c864c165196e3d662c1066ca9bd09330558d626c9f657f52e195bf9d4de115f8fbc073a691b1a67a93a6ceb99642740310d2a4732b655a0b798ff04291c79a65efdf85f22d310c2ed4485bca7abeff9c4fa5a45bc4d4cf20ea7eaf97f90dcd0c84d0c63a2c2f928facc6b7ea7cdc2668449ab911f22e456a433e9a229b124e7eea4258fbfd907bb9c1f1cef62e0b36c0449f677fbe60a7cbfd355140d10c20935f2d7c4e0b806dd60e20ffe9c4946ecdcc22267b8873b623

Button groups

Social links in a button group
View code
04a6afc415a9c75cdfafcad892491ef4122f8e1dca8cb8db4db586d76d8984a7fb64a8791cd4226ff96ede13a08016fd3c4cb0ff7cb23d28bbe134e9c21e1cda8a03c6e0ce257b2071a47f3776f6c9a98098137ddb7e6be75c8b922168923ca400d7068c80620e19c3c648a26248cc002ca0bd549eb624a37cbf13b5ea2880737fed8807f812379c258bbcb7aa671f94392fa91c9c258053ce27317ef9191f3735da8d5a3281d3923da1778994af533306440de3d18a7d2827f7688a34c3704e4d22ca04c645b6afab4e11016a50b088371ab7c2605ef83e8fc6526f9b922e87ef9fa1091e869aabe7115bf98b293ce3ddebf48c29be28a49a18b871832a1a25c8a1e59e9774c9c4d024a0ca84c5cfea5a0d60469b0dc879e53ff29ff4600598f67e704fa5783b3b5a0a651c915d925c4056c23fd07cb25d9e5728a950a9e027eb86d2d65f0227e2bfd3f7716e80c1e3a9c39704ceb520bdcf0f540f9566600b9344bf744625a254ee44f684a27a14c0003ee652e320553abe888c629d15c80c93df269d12866030da17b06cd10fe8c33e94b08fdd05234a3adf55a7d42799470db86e75670870a6d340ca1bb3ff29f371e09dbcb82fe22ddb07558f72cce9db85c2d9d953417e57ec2ea9a795bdf2a078cb12cf9d43a4eb6a1cbc2488671cf8409f870ef74fe5ecb4a4108e1eee7753a95c50e2a1b3c4e3263ad2ae8483c2c8981cd074d984f9018f486493486fc31ffa00e791bf7ded592c9cdcd72a8662f0601475c18a42cac439a2cc3fb70f204092482b510a994236670109788da0d5232a64fc8152a92fa9545aa87a7a25002dd171929b5c07761119d4b1f222c4e4360a4c7691a652da1654d038b06b31e2855fd77f4f9c5d811d18b1ac09ce1409acbf35a72815718b9c57dbdca19a5dfe183b613cb0c2ece5a361fd628cfcaf6750ad64bab5f09223f1582781530999465a08da9199950778fb5d3103c9c4a8b7e08c0a7c74a880f114714bf6109acf064a71d678dd32a05a16ab9423afcac3148f030536f099a5664e99cd313a27476a62ea10b26ccc0ef6f9098f674442030741dc7204882801f28e91518fab94210665b5461c4dc56b644d1b10a3286cf78aea3e8ae004784635a7966d292357ee56777a2cc24f8cb78323a79ebc7e72e45d96e1a9da9972f18922b4661dbb25a83bc9bea65039bd6e52eb6163cf8bae7c9ea6c7265e0b8554acdf58b31e2e53541881dbc9eef02a590605cf7ae8c0cf909b8f665b1812269da66ed9618efd18eda85539f088f59217f4288a162f21038cf227aa025852613b377754e0cfc5ae68e1019a853ae639874a49629c3a50ef8f6c146c8c56164364594eed2ea09cdd2c1c73204f0f15c6e240064f25ba136b4f9e4646961692c7da4636935eccea6aa3bb27453f9a430cadf547978aa7ef7561792592361facdca903cdfdb6c15ab690dfca346a7ff0a958aa4425411de790c42f0ab570edcbc61da712f4acacadfce4dec4e40f4981e06a6e4c5feb497a6c64fc5701f8a9f0da1114d1b838ae7222ef3d453ea518080c2af6f111d45932685ab9dbc2a1cee15fbc8b9d657c967a43ec5624d805f5cc88615df7d9c3f9b2e95a806272ed24d839be00d879cbbf445c1541b2
Social links in a dropdown menu
View code
a450b502de7488dec4162e430a152a90b04bc62684060b9aa45f1f3cbb648ba217310edea72f3aa49e369fc122f5269bdc58d159acb600ef8cbff585486f810ae8e88f17b104de7ba201efec587d67f6d8b3ca04bd2bab188273a66f8dfa79a3c15bfdb00526594a3f2ab2707c65141cbfb8637c0df989e0435f1f26f72eacb451c08cf36bf9e95cf484a5d3fabee1e8ba41a775bd60992579975fc9e384b02b3be83fb3154d0e9826b0a30c640c881083692a04be294cd95cb9d9d4eb8a88a3180de83f8ac9b5ecdf00fb4990d5a89eb3dd7c2fd329136b5711d154e60d0adf9f90388e586a200272ba2dfb0bee9eb7c20cef3ba98b75b87d671a379cea4685a16d86c18901ecf5504eba1b50ddb6c13ac315993d19aae293eba40b1e10f2b52461858bf55a7d0deb7039df2a05d095b35c8a17d40d3a55343be6a7f34141a5d69ee41d7b2bf4a0584d981c13cafb017c065a157b64eaf2b2309c8e35eab611c15ad27347385e91d3d86c2cd7de9107df79905436e09292c84169d9d28319311927652cfd3fd66a2e13b5fb1f0bf0121a603fbda3f6fc359173c0b978944b8978b48a4df22f093135262749ad6d6050abbb22c7c7c504b5966196481eac5d083a6493a526922b5e345a5d20e1a4f96a450ce4df2a0799b58f71165a3edc245d0f799e1ec556cedcb40c9d1a2219961051fbda335b4e34fb943b90437ef424af43ba393c032f6acdf527db5a5fb9069d9b03feddd05b17f756448e1474dc5227b9667d03312ff04688f4e6d13aa31a8185703bfe3b618427332cafa70edd97c289bdcc05a12d7e01d87a5456ae6591414a6e1a9e4d36552538f2aa5eef60596ffe0258d74434ce7dc59e93471d72e2459f7306ffe946f607e67ef141e543ff7cbb54fd33455fc5512ab62d3c946cd5df972abe1aded3326e568ee250cc48fad463600ec2c0078bc2282cd16daaa6a05cd208bce7c288617189a9a0574d4f9886f33bc842abe7704c7bc7d77f83df2fd6ea68ee96e4e9ee3c2464cc13f53a7bc4deac4d54db0b941d63d596787daaf51010603a3d9db0fcb044a857732aa1fa131112817341ea3fe46b531939a90307df818fe69fe6cd6c40d7d3d054ca85c0dcf59fe61211960f8dba0474f24fc091c891446939b6fcf9a8e1c0d27969f14f4117ed8210e185eb5cc7d4cdd3ad05896ea28617facec37e356ef2b0003578926c5268aa78012a9b33a5002f16a7c04b45efc40688c169f93363756a4558c50efacc8bb17717b977a1b1cfe2678bac1c68f7e1034d8c260e8ebcb4b92a5c5189fdfc0d813255bfa0d4f8dd8dd274cdae950c8089cbbb0329b05d4e0e4b8db42fdd657d98821499431797f0dbdf9e1fa380d04debfe6abdfb9bd8fbdf4678a9ab716c997deee9292f3d0e8fbe27a877ce6a547610f4231059a092cb2342243adb78f8e8c84764d76efb422b86823644f76032122152523cc9be85ed1266a7436275951b92475afae0b7452fef3e791f28dbab10659891a70524e6736fb32364e3d5b487d584d6f6678b430970d8ea3f96e67cd20690af9beba42e48e7126fe2f9b494aac69e1599bd7eeb84df3c2f43640761353e249a11615c1d3cb65df908d02b42e46c6a069e51ca383fd77d65033f39e30a639036a9c8b048c674ef7250484c08e9b530d2602ee758d39dd87ad8756b52ed54741dc9afb247926c779e022e33ef9e32eaef25512717ef837ad12834d3156038e6a2d19e0fa0a2bb8bceb9aff481bfb807bdd6159ae39f2b1976569343306cc48c023ed4874510632e4e91307e9882bd606a9ce64300aedb6f3cd9ac7c64e65be6aa4fb40ddeea35e1c184dd1e05938fe6d093e0cee0e7c9fa189af7af18a7f28f5bb55ce3ce7deaef89eb9ccdf5c820484a4dbbcb7838b3d4782628c0917091158ed02bd18d142d18ffca0e03e01b3adfb6d4d4d60315e9bc032edcd0c3f4db902bb66131f03eb150dbc84414f8210e9511e87849d625796b4c7459ef821825a563539fae8c5691ebd87878302b85524473c1083468af650622cff2399243d791db48722c75be59dd66e00c73f6f427b85f895f510f3af057ea3f9af3e8d0c2c54eb16174146a3fb7366cdb9e0acf129bc4e30068f9011b368d581584aa950e44053c125b142b272f16e8d41592afbf422eed1d124e6e915d112592771d26860b2649d53dba43b1c860bbbe93ae4a456cb174b850f8476c4733852faaa864d7d1792aada7e2beca438115d76df8f4a5f2f90742faa3ed13f9c720e204191a838079cec64b5e8f2fde3773b9bbab1b17f212c9004ddc20b305a776e912a1b19b28c9ada0042e9603a34b128c5d34631ef52e709404ff82c529473a55721ee99aa0b1f4f8c676d1412c7b63191ebfd0228cf83ad038d877d9309967b13404677d00dc4f5e613984eb0439f0be0d71dad3e73812d0cf9057a5ddac6bbe542d393fae57d4a7ac0292ff06e0786f859be139cb98a86b7722511d0f50c703473977959563876aeb97e1757d52ab28de7e6b307501e4768e094a4ac6d1dc5fae4171460d26a1aa2551cfa538b887c24673ca6442c9b3a03788b18367f9c75823618669508de3ad1bb6bd8e46dc1231633ff58b47a34e9e4efe4de6df95b515b67e06fb9678e0b2ebc1258328557a7ac150167755773eac6e26ba7926764936758da04a35047e8454cb1b7f40ed6cc063359bb0d7e4755c61004dd8a71baf639c73c04e8d85f4e7e2e45bd586a0a94776646331cf0076f70c6085732c46a6e6450fc231d32513d6138cc0ecc9b13caa0c89a52e6da817f784a351e1d7794f84ac30e25207a1b7b845bf422e7b177660fe55cea90f776e19be3b3c6e2f972def3c3442c8a7ee41497d2b319d7040a3b0046b9e216adbefcc73f7fa0edc92f5f0721dda4d184fb1bb94179f1b6970d5decd06424c6ca9a98511f79dd2fd263fef8090b3e8f6571eb579fe9c7a2b1f42358303d9aecc50bb92980f1f02fc7e0aec7f79df058527b7c6fe991107fc776b5b129f913a83e2b7ada37a3e2404e930d59a699bb003b4e9437ac467cb86f7a6d149bdb75d9cfb15b05a1b65637176167bd71cbc032a4ede511fc18723d066ff22b96fb953b92cd08cdefa0430305b6272b84449c933b155db4c72c051bf38a13274201e891892f115937b1fa4a59fae5e763d09888d2d50f74aeebb9fdfe8037de2

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
774d3a62defacfd5c5f3a63d3f5a0c229092bf30960f1b92a6ca13efe2fc846aac49dbb16e968b10cce500df97285d049a22bb9e3a4e28af337dd7086c2cb672611105de375d9765cfe70007ded8e788c70f74885e2ecc6a0dfec1587b0f5a8773b80de4fc32ab07953a2c0122f44176ce87d5db74fcffec11dac14d4fec4697ef0b9c6bf41f0ab56e86977250a37a2c003adaaedfa6e754d02535a0f664bdb582094f7a72a6f6dedbd9b3b468f72a0658bb61c17b1cd69a772f4f88bcc61385ed69758fdd8569f1225859344eff5cbee1149a53333a3c6f56d446da02f87bd02bd8229e1e98ad0035ff19da49b2aa2c4e075121c9a31c50825fe97ab22a866f2fb813234c4b392533cfcfbb7edb27f007d8387f02899e5f39d01a1cb9addf2994fa0e1f56d81131e36a10cd1022c1e4e0107b6005880fd4b6d7da62faf34e0e293b4c6d0a4be15e4c06074eede614ff8aa57ab9220afe9b69cef0688d6421a18974cd3d9f002cb8eacc14a475dce3de2ad2b67c154b70b75361c8c06da51fb9397978fcf2340e09d5fb6a1879444abddb77e9c2357ee98bf263cdda43363eb50339342bc5fbe94c9cad995e60d868c2d3a8f958b7f32920c29f03c34b3a1fa8aaf9691df60841b829fa1e18a5b6d967d7528b29f61d7d70f6857545e3d28c6837d616585df17fa25a089d67123be9feffb5f4fd2c1706d115d1e84e3d8ddc273951fdae9f50a3dbc09b370ed9962539ef134060f0b540d919f447d9f3554f077d8c32c23352c88edc1ad50ef08400fa753234e3f29a497db3584f87aa6b1d2742e28913d8d56574d58ddeeab46f8f095921d15a8c753ec76addae86e053fa3cf52848fb4d0daf1185f604562b49945ad8c1b215d42d11c20843400eac66df4ead4c8e574b95202efd475cdd28fd78f4466fd5b5fa8f04c0f8b60b1cd60bcd35af8fb87982690be34dbf733974372d9c743787e2abe87f6f4722dc877d49586e4ebff4b28e3fa3cf05f49bdac201a389818a249ada0e14f8f6d627e5c559fdc7

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