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 7ebcd8a7759ea03d91504709715b937be00cb04948d1eff4301da0dae486b18c1079f7ff4e6d7792cd0cfe2d55a76ab27445be5baa12e475d63e422144dffd29aa542aaf2228c562426cb7c2eb88736a46750bd5b19684f1022c9a712f6a4380f440adfeefacb4401474aeedb6aea5c78cc6311f470f55d5b9cff2a411e37b781328aea29edd7a5ad2ef152d167c9252976ae481604db50e8d4f5ee2d1d58e738fc4218cc0bd2f618e4f6f5d427ee28d4e9f721ef833f7ae3e89ecfde9d95cd8771c588fa07ffdc689ed9f889e66329e8cd5b28a44a9e8db44e68486f71aa9630a89d578ab8aaa6ee572a0b1ab9aa6df3edffdd760d444318c048cc450c06355e80da49d1b0b7d6f88ad89dffe53a13ff09549ce1237961423add4fdd5aca7865e8aa1aa4bebde59bba99f81b7e7c56bcf48cbec6b663c4466e320013bc5b0ae19739262e4c3452c7b348dc2752f6e17cdd69ab81e3ffabbaebce0786ef9ada455abf89f1b9b8f2b11630cab6763481fc3cfbe8ea785f0ab6bd132e90e38d3c37b48189e3904889767203da5b971fd64c70403ec2a133cd399e6e1e88e8d4a6ad41b7b7dd31aafd0efd9901403c637e021b6bd64317829d9e8a0ff9d9a8a60dcba466603e66821c1e11f8cbb44b4188d95c0ec75f6fd3c6de5ed806b7c20dc9084810a0fc5b76b85bc3dd92c5fb4964aae51947bb37724fc39f5d4e52a8197f458e0b0c259234551366bde6c3d46a1b4b33af3319ebeb4cc463991dd6a723f503b5dd15ab5b4e181f66ad8e7a7d4f59744949a70e23e99ad7f202aa46f91c2ec22c9cb467dbc851f6dc05f82107b3f16a0acc7339bc2db6cf2ef07835bfe8e8309417ad5b97724d80e72e59fe93f3092c481de931bf94802a36defe703764774141b6a5d7f5ffc1b8c00a79957e6b19ee4f217a0186ff8ff0d55c897c4b8ac0e5d5d2895bdce3e783225307d14effb27
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 16d6e93c9f02be244607cff8a1047a5b0daacb51439cabc932e5cc082589d404a5fc114e421cf324c2850a09a69702b8a4297f44d30abc869ddaed818e61f70e7eb85ccd0fbced1c73bd84f5736c149dad9afd391770416446d22f9634734636c08cd3eb319081f92aa87f8be8093732fdfc29290ae4b32317a64de6d91761016439910820ab62351ee815434a5c4fbba6271287ad69d85ef1eaf709289f9cd47e65bb7901109ecb554a7a1bbdd988b792dc368c30b850a4747ecadcf2014c132aba353dd15c1b2205fd08eebc316b5d0c0cde068a84385f8d2078c320a154e8c857e9aa6fdde8a87b5b00106af4206dcc108d579fed24a3a3c568994741823d5a978000376ae8ce19419fe1f303249482d8907d3353ca61329ac8746effdc02bc6ccae50ba056f32a7112f8124382ce12c58f039ebd5f96eede00c166b3df4d82524df50d9aab0fb03596997dea48d513d4c5b505d393b73f492bbb150a1296f63442c2585d4e850272254579279a02a9ac9f94882f66a911a7cc161b1751333921e0b13d63b2b9572cca2db6891fff00aa52c7df905150f0b271a811a15b570c0ffa6826bf489dba8a54aa652ef93b0673a6fb1e91cfa2485bf94f5f3471da6da061da720bb39a59c9b75a9d53a230ff24263bf5cd806b2a6db3f5c5afed955bfa819c7a8105b9c19e9a0e665f541f0b6bc021febdb3001a34157a6de001db9591a5be66f02156a05fe5492101f7ff0695565be5cbcc6c62225a3f5d8a3583751d54d8180f405dd3e1c1d18836ea12f87803ed77cd87f7b72b85317acbaa9e542e017def405eba47194eaef2073bafd00150fc3dfa05a74b9bdff1de18580b26830046e1d8077fe3109d36bff6098044c8511426a20e027c6da64987cb8c89d017c511e16d5859716cedecbd23389d59b4921288c5592c8654d1e11712bc99271e1a865eef03e6fcfa39ff521b96ed
Button groups
Social links in a button group
View code 8f746a4db9832a15d8b6321ec8567b8c4abcb5d4037955ef3f4ca9c7580448f239c29b50d9cd2cd23fa292a7ffaf7311bc51c9aeeed6e7f9b17ff6f3b1824a731e52733999c404f6995b36bad5908720360cba070a1c963bb6fa6672dce1baa5f4d662eae76a940ff405b1be3b476f329358768c3844f73e6545c96157ea393ab6195cf00e1d3b6572b83a8a3f1c4f5f96addb1df68bcb0cddb51964cd883f91c7127f7313fa8318dff87eaebe6426ea1103dc0e39697d5724f3dc4a2ff033f45d3c930be7195853b7ed3b2bec82fe1b9f52c4f37ad1dd4f95daa1060184faf1ed284f22308a232e0b6d6d814902f290380a4a3aa2b9a5029837fb655c38e2c8cc851e912e0e3abbd483893c6f6c9a01d9f5cd27c163c81d7c41f804640cbb6c03766f2c05d880c0545f9108a7d5370408558133e3b4160c234c01088c3bc5192b042bb064a5610d54e222835b29d506a4442d81614d608aa73e3e26c273017c2998f14ed05d9c9eee3553da5422dd2b4777079c84a7f19c63a098b7a5b102dea38c3a352f44336a7695a285e7c486944545db6ab16280427cac5babce5345e162fc3ff4594842601d5f8cabcf21efe59b720ecdd5ee16703342be6926c2dcac599c0b2cb020681fe3974a79ebd09e93b7c23afcb86c195cdb09f68a86182dd3c776b10909b27125757fbe36f1f9f32c15d229485d8611ecbdf061e9049ba51b59e7cbd4ceb6032e8293df87cbaf6092a03d1ea8c4867370d10d28d0a3cf60593b71d5dbe634be9e0ef5afbd44cf9ce8953f1388bd7fcea37eb30cc57f7c3feb5e45b19fc81a6d610de044f7796e043286ca81eddc4a6ff9149a5891fafb65c8d05d91f07a270ded55a60775badaf209cc33602dc08e3a681a2c00aa85d74ccd5f78310773cd87636c854a2f2eddbbcb934c34af27dff48d51409688c3fe21c56b49c27f30814f8c3ee783c65bd9e6c89ffb4cb1a981e3b3d57f9dce7c918246c8fbe1820d2373a6024facbbedbf7860530416d7b0e0e8dd00c935579e3793c27c98fab4cf569e513687022da07991defd8035e2182111bdbbd708d1e46ac2e89e402bff423f8c83794022e974d2f6c716625bdcad245cd85625b548a67d64b3c08fc2ce28b46df00f8d0882123f8e1b279d290c7552242d28a16ceca19b2a032121b43d0e3d22bb6fa05112e88526187e2e416ebd4ec7dbb269a8e2e5e3fddaeaa4870903ea14fa58873f0783cd42ce749910633935e6e4b87d4615da9e0875774d7d17f60420943ec8e5cb76a4ab00ab534e5161900f73902053270f80be35a9be7f36413154da150a4281a517969521de9a0d5a9e41ffbca47a8f93ecd06a855f129afeb4ba243ba7b8eb9fdd424995a6dad5deb6a2302dd58defa3aa74bec910e377461b6c84003cbb0f670ed1eb44884801e4e9e64265528b5f55b0dae59fb33a05a71e610ac7c0676d9f72051345e023616b61849c0e27800965f56f11a8100d1d6057f4a1415a98f5e7ac3f949c5167ff5b1338ae0be55763630a8243fb8e492373b2a40415d780f767f24cf5a594cf67d982421351a6c33b46caac871ea74a07a93c518f290230449d6cc494eedc23d14cdeae41e8ddeb32367f8c153b686493e4d2d54050e0a2614eb06c21
Dropdowns
Social links in a dropdown menu
View code 9dcf85ea9eb1ab0b5f73210ff7f42da6dfb429162c6119d934b354c9dde767e45fb9a98b3f7428e1129c1bb89aa6fdba2c6f15e20c55f4975bcced876de8ad12cd19085d18e1d6f3711068a32ff58b683e19ff329b82b2b60452f17fb2d94bcac4e35dca5444a6c82257aad152fc03690743d0877c7edea909de34075a848c55adc74b953f4c64f44b439e889a9a5d366f74819b62cb9f4d095981396efa8b7356b903c8b1c27ca8150694087dfc1d871ebd8b54406924c46268dc33bb15c47e4f3d4128425e00572b9d32a20eba36bfcfd8efb47115afda6a5b179cf5edf41f9e37c7255fdb5eda3307e728fd1d2cf7e4c547c4384b7171bf2d807416578221a5366d15b4e3a6af833251b4cf6634836eeebdbfd545dfcd9ae56b835d4d9118edd0fc170998f70be76f22a863ac85d4c220221569885ff5da8845279fd99e5d22fecce9755449aafa77f7f9be81d27471b1df76b346614bb4c225bff7f9da4d6b8292b6575ec690a34909571eab168ac9b66c7524004ce4c643d28be1815e19a8962779e3c62e9475f269650f433a123afe084fdf60906a983d344480809fdd57cd0eeb0d7b1c039d1b681d68f2bd8f3e1688d1aa0f3547fc0a15aad79bea8e2abccaa710f6e7749aa13b760e7b98e7b25ca4e4212fdaf8c621562e0ca740479f6f5d26efce30d27b6ce932483f279550fe58507d7b79f966aeba6d2fb1ebeba44b573636bb9f1e96485d6b424332d6c2e971c9d981037cce92d70d561e5a23b389a65453c2a6652d7a833a62239daca0e1ec1fad8260f7d1b518a00fe95dc391f35a84af534b647d81cae533b24e5ad0d70c42647f806fb7acad0edf4d8d1ef01e37965f44fb7cd13fb03c2f2ec9177cbd3a510752d9ea89e94a58e21d9a0ede7d1ded1264ddce54b33682703c775d4bcd74b312fc1e36b6d8cdb4a5a533d103d00501e397c4a4d429ea63a47cab7706058d332f25f2b9d856403e4b2d5a4b29e0a8e47977e82ccd1c00f3f5b2379f3319dfad9fe9b778741bd0737986d54309d253a9c11457d419c3df1aff9be519a95485301431540a8dea40810a098896b43619d3688387777623035f0b2d47fe32c75ee0aa7e3aa925af0eb57cba1a7a1676459b76598502694de035079a3f63d396c6d54f260361a9a97dd705bb9075accdcc2657117a7296beb9c39605b486dd5c3b5b7d7b9b41ce1dc1bd86add4850c9f452c5959d73dccfb8792ccb978f1bbe13a16a62f7afb556563ccca46ff76c1f8c305f2d61ddbdd83545fc3548cec63f1ca7fc85063de4f28a0e3480f38b7ebe044b52099824428d3af11c14012a25add70c44f032d762ee4367a7f7a012a19e89fe9d659dacdafcaf5937f6ba559e68ab8a88aec9256239b80aae3c5af87c6b7e2aca512ff95cc676ac0b79bbae17bf259c701bb9aed09fe07771be3372434d11d542c23d2e855ac5e8515ae2babbb85b59e3e97ff520a92255c4286f1fbb9d701cbc9f76193add56de59583ee6b4d323cf19a9332662cafad2073a925ee28f321a1c8e790cffe68c3ea66971128f6417d6bacdfba6cd0debfa709ee73e3f8d44e7dd923c78ec2ed0035e50dd4da93d7827ff10d2045ec3ecc8645744f0dc5b6a9f0862e35e6109ad8aad40bf9c1d3f15ab03c60046e6d6edf5c0df4099bb58e6ed2a534ac1deebdab9d7596971c304e9eded96a210e5757069bde5ef2dd19f3a7f039f2ce25af94808d1bb06e95b06a8470163d14f79a6c80d5878749a7c280e1234cd01788e705e61f0a6196db73f5042d1348d49fdb4e9420049f2871c3092200757b509c1e14c2d9bd3273e284bfccf0e87b2e775c49d546aad7a324df9ddf25b3e8bb3ca388b50e5d260d22258f50d3f34707306ec1f5b10003572592d009a4823a9501e8e825a09714e1a3a29ebaa05cd9b3e1865a32e9ee5b3c6adc2b1a12ed8dee2990758ce3533e724c34fca438cd30eb38df577848c60fbc7dcfc99f87c580033a68a9e4b28b59e23c53e92d359bdf2aac1bf75bea0451bd15b4f7dd398113f07d2381a822cd51b52a3cd81af433cab91683c353f56de666b0a5e5038a65bd127631600d99b23e37a8748c8c91094ae19947dcb2a7e29e25061249b50b128b2facd6719f6c6740fd6a589ec4e8b1b41fda3c9c11d77f8dc79f0952ed0e9a67a30e434d07a4a3335ab436601d3f925f0f90fb061e795a29bc1f95f38048b51c3a1a925d6b9419438039df59f31671adad7fe41bdd10d1dd7ba452f49c3a3d22276c3ac3170e79133ee8b47895b5ce90eb9959bd9c239650f0ef341fa4877891b2d43baeabe6f263df701d6783b3da8442a05d6a4a7d8fd27a44d7a31c3c404620512f82a1ede4324978f22b993483dd7c77d95137bba4e918ae18e74e46189f6f536ad728b5748b07d6c4b5fc612fc129668c52b3d6462d10d3ba07d955cf422b393721bf9a8268361d25872b824a74bf5d83dba383e4562208b5c97fb115a535adb27151c789ac15e37e3ad3cfe4bf70622d8ccd3834e76d25ad7c90a99c6ec8d55ce2927b9d3cdc20d766bc28a3d439bad463d354876fecb91494af764ee1d6d78bb4eaba0eb6f994f2c977d870a1b1ad6f77da07cbc096082057b89fabc652822992eaeff4140ae91dd56fe37beef9f4c5fd4e5301f6a94ff26a47c9098d8e6d363770a0a6adf42727aa9834ea3046be4882fe67bc7a6bead4627d3fd5fb8ffff4daf778dd9126d6e7441ec171508c1c358561cc3df571e256f1042ebc2ce95ccf8d2972fe5f161f1db8dbc32b0735fbce093d018b6d33da96f05b18a17f958c8c8db07c1c78c1ec96701433f890dce2ee46e0654758ac0ee9b991d1348a55797cc7cf75f31cbf89b25c7b78fe7c54b167a173dfd7269979120f4522ea305d907252498ded0b0cf4a308c728b9aabfaf87e11d4be61dd03d3c2efa0e4e952cc088139ee233239df75d3316b921d4f299bd9148f83fc945bd3ac61e796479750ec38c477ceb599ddb64595cea59d838a2370e269fd11047adff4956c13e279403c99d8a053238089d4b3e6a26e5f8b37f03cba07ba3b4b46af52dfb088078159e3b3a39ebe629c8dbf8e4e1404eaba97fd56b54dce415b7e918f3afcb924caacd07f79d1828682ebe299cc338b68658b9b448b17d4734fc5d74d9c2ad6cdc8d323bad40593b26f7919fc24517dcb45fdbfd4cc4d066f64441
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 1d630a39316d7273713f763a15f2f8c6e6f3dd4e80075215bae09d7f73c0ff4c8acd3664adf09b1ff6d5171efbddddd1e195ebf60dedebc8816a34f4a93f01f7402eb0eb89323c7236e7f4e8399d5f782f55d55ab4184518d683335efa26ef2aa23a76b311034ca7226811566e94c029c0daf40652cb4b1120a67512b24353df4e3c9e428e6c62ff10de625c7c9c59053585b922a93daaa5629791e5d387493a506cad9c8bbf8fb8ab8203e0cc5239192f0cc6e4f6ed376bd8735870b18f88967adae5715f30e1f2bf9035b1ea85c5f308650218494853f0159d13eff0b8225cee6552926251cae1b92aa87801402fd959fff54351ac968c40e64e2f66c1cc32dead94e4931a48be0647b216afa8a9a9aa7c045dd919870487001d617ec6cc50b932989405e45614b1bb4b5b2971284a2b585d315d58ab3dc07aad45765296ef73cfcaec14f897e935a8055a3fb6e0fd15c65c4f80ead094d2ec04620ce3a95901022bde91b28d7271c592b71d0c58220e6e1fef9c5bddc2f9b680f1f506da3bdc7403c90f26ef3ca69b71d365d89bc656efc48d67343bb6f77c45934edc0ce3e20bbe4ab8c2c7ffe1ffe9b471345110671da2950f08ea73607e615115b156ebf43a6353da69d5003d68e7963a404447891de1106aff01224ccc02c63760cb988a82bd9d208334da27dc2ce51e1e55e1f1cc4161c4d257f888e5e1cc66b2a8d87829dcff131df3f63b1c08022a77693bca76d5266cab348b442bfa075b3147fda5934d84a8a7f32b922c4aff7c800d4ee747b894cf4d0c9ff1a741e561784e94c6b3ad219d9755863f8b9af452cfef5ffdfb7fdd47dea2b9d7596504e103648380f86a5ba8c863d0c0200f88ce0b98db84018a76a821a82ce8cb14291e83451b4f5dc958552a31dd27cbe8599e06696242f17ec20ae0db1a3e764506aa2513abb56bf20977308b3bc374280958a909c725d42ece435419ba28e77b2ed6c8c43b1b9d0081e4a22745d3aeab2fdfe876e18e9040379fb4368ec21df0d15e5b8411
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">
document.addEventListener('DOMContentLoaded', 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. That said, our themes allow you to replace the output of the helper with custom HTML defined in a micro-template.
To create your own HTML using a micro-template simply wrap the {{breadcrumbs}} helper in an element with a data-element="breadcrumbs" attribute and a reference to your micro-template:
<div data-element="share" data-template="share" x-cloak>
{{breadcrumbs}}
</div>And then add your custom micro-template to the page or footer theme template.
<template id="tmpl-share">
<ul>
<% links.forEach(function(link) { %>
<li>
<a href="<%= link.html_url %>">
<%= link.title %>
</a>
<p>
<%= link.description %>
</p>
</li>
<% }) %>
</ul>
</template>The micro-template, which can be created manually or sourced from our collection of patterns, receives an array of links, with each object having a title (title) and URL (html_url).
Whether you use the standard {{share}} helper or a custom micro-template, 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.
Customizing social link output
Despite the breadcrumb HTML being generated by Zendesk, it is possible to customize the appearance of the element in several ways:
-
Update one or more of the Sass variables described below and recompiling the theme stylesheet.
-
Add your own custom CSS in the theme’s
style.cssfile targeting the.shareelement. -
Use HTML elements and utilities to wrap the
.shareelement, 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. |
