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 68b9429a2bcde302c1a6d10f463f9e2fb44ebb6c6fa02cb07f627ce694e5ef27c3cbb799f3de30b8fa2cb860978705093d602c10dce4423b4fbc658d1bb3a5236637e29fae3f019426e25c257323e90ee7299beddabc18a67fd17608653783fbc2255559c7ab4e879cdf3e928c5f63c6c5e793180615041090354857bdab712fb7d0153fa4fc21fb09887a30205563f0241776901e60abb55f593e6c87ed54c8e3de71a6683a58798eafd96062faba5c981290efdbcae66f713dd1edb4c5bc18d06076c6e229016e5d27ffafa67f6e8dcef72803aff802e109c6b8603ea86c131724c9bf74455e6559eb1893a86dd79537dd5f9aac194f6190fdfad7f47339ef909fb6d4813395e3082e49df809e1ee192c5bfe63a04058cbebd7996062c851a5451dbb6abda2b1a6bdc3a567ae51b0f6e600209b5d14b178dbf122095bcabe5751b4213baab5742bd55ccf1c0d01f7483f368b6f3707721c40693e8a0e1beedfded491480b2df38771f369305e091c9312488a7fbd25d2a81ab817e09f71cf5e97a9e088dfef1f5cb82776b6550f98f78ab8ca3454650d709efffbec914ca6db3b8abf401ee04803998148553217e7cd87827192e3ddbcd378a4a07eeb0a5ba06e6c75b70f04d5dfae7cd229702ff0c6c248b353931763d3d95df5f51c87eb018e8d8670f8d192940da0ac0d8002ea5d085fa32dbbfaeec332dd1a34d3adc04c7f4abd285866339f88c0aca071a05d88f9c02c9678468c7356f1411cc9c5112b05679fcaed406ad9f21ceaa24a3646d0b52a9339d45071b03c602ff70f388af3bb0e4a4dc059b1d1c6b841cc8e9768759b914ea012f1295ff36ce4ec6f9234b83de8f11c9d2a3b3eea17bfbc433bfd7392a25bd692acab1099915f8dedb354b209f394d4064c91de83ec91b57c888844b210ea95036c932ddf2696d741750ed40fe90d02688aeee4326e23109435ba0
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 1a09ae8ed15c9cbf61993809848cdbf86498ed3020bfda874d23ae242f1499b5742c3380cb2900934a9c0b908818ee85468d2b1c059e84133db75b1cf0da1a19649f664e9bec06575e8cbd2998e584f2feb0f569b0e1c4bc06009324bd5bef88de7c67da2d799247c71f834751c96454278eb1258f193a22d51774f210fd9e33c09d5552a5ec6a98ad66a236c8ae4c919cfbbe81a302e59b9f34a96c95a208efcf45ecafaa56f27440f23b168ee61c22fcb004942aef358332cdb87ab6747cfd0975a0f4288d6344bc8c3182b254dfda6bac1a71f6cff0d6a9bd4207e1fb297b8fc4f4e3b60ae4944ff172e4fc0257aa07d23c0dec7ad635c65c927ce000c6eeff0d2237497cad38fd9ac3c02702e1cabcc3827a8c79d7e7154d640236db57d2b5caa8fbe9e0c8aada305c2ea81a03c4f05246aa2371ff133de8833653291236b13c6ec61bfe96d757c6f8ed4d7b0293badeae4b96e43a73eb27756583014ec171505bad536c080a0be196a56d82d1729f6e1bbe46e730ed9b5b0e8e157f9e75f3f791d08cc7005c48bf0796b56280823ab859a2a307fad6d3d6e1f4ca11f34084fdfc62cf08a52a110aec689a23687649a2daaa77218bae3743c4a0125659c8d10c1aaa5d1af563cc69ba34ace87093ab3e7cb5a6407cc491f429d0a4d1c3c8f8a1eef210356a7ecd95f389ae21cc734a33d062e3857b425c76d3c647e736fb87c777fc97500656d6061efeae29ea16a31ffb8d1cbc94010f839131e16bafc77402191e3c891481c8f4aa246bab1e82eb407a3f3c0e5731b3bae59774c5adf8b624bd123d1ab10423914d564e8ac16a935c7be5525545ace7ec603e14b79d7b81c6b4ae87d5b093e6c9639ee573eeacadf38b7c176f8463c2a6add9b844e23f5b2a371a5c4e1eed723fa2c83e3eff5d3b77a13276cdeac50ec286dd724879980264015901cfc15e1f7e65c4faa80f16
Button groups
Social links in a button group
View code 77ceba1fe853db0f4f6ca8d925e77198901964c4a62c1d81fda4024f11bdb571381c4e455e623f1579f2c96204edaf9da6bd2cfc94bbd12a67e96aa369a7d1250e1e2708440c85ce975aa1cd2a4cf062bbd63f4f518700b5309b1a662e4a29c7f0390c8039e47135e17ba50f2255be7688b6d1d99f45ba4435395b7a12a2c5c15b29d2edb065c9a65240db5ee1d5e6b6628d3672d88ac252b686b05b95131ba8167117672cae1e1053e1fb18ccc2c7c7301ec3cb923d5c9f1fbb45a6b90d96d706433fcec6ae56fd6d00e23e23dae4fef211b13ed9ba3b5bf46ff3357c8813db465a7d8885a8525733a55d5f9cd1ea3703afb110471b932a2c5f8c2852b92d446a22be129c2b9d2c3dfa1f68845b1697ef135b00c8c5b47806869949ac10db2a1d8154b77653c66e0400befe4382f4b278242ef318b607eb1949449dd252602d9c3d494ab269c7b80e42c90f70c204bc2dd61c1881b0219a396a954a404b037e4351c184ce8785252b2544192f43dded4d3f3595f2cfe17d4aaca603f15ee97293c8291f3672934b4942aa964d40661ff56e892ace6f3aad738461708e3c96e33750e91eecc6c289d654653a199b9a2fe65753de55d78de726109847fe44f638f320d984c4d16df9e0e10705c23a9b5b58318bb1d87ea91d712f2814a365daa77b969077eb1af2ead6a5314bcebc06cbc094f3e49ee409d81868cf961de9097657689919c07e9b44015d41c7daec636e8806d9c51a2ae22b4414b8860d9510500aaaed97eaa9b125f17bb0b7ae27528c664f0f7c8a79b1b3dea747bcef9424064c72487dc57d4337f6d0511b035c968ca203fc74d80ef964eb2c2d58bf77a569dbe3fd98debdd3fcdd299b1f9a83ce182cda549dfe84748898632d212ea8c407629bda79e8b3798a618e4120dc8fed5f4530b858266af4098718b9b192cdafaba00dab63f7b5042c92d03758e12d00bc13e0dcc1a520a13c5ba5acf2ea77129f769899cd0cd2455b1460b4c6082dced93fea94560ae1cf5f7eec5a0b2007e40dfdf546df856ef402c1ca3e32e20949a67bf7e1c2b65f8f61609454b5f373629547b1b0a36e28df14f3c1a485e0fb0784d417a7b6048fcfc42a285f422c715f1d79514433df9f3c6a9139ed59f35ce6ce62800919f41ac7bf36eeb301b86de9455e7e6087459ec08e66af046019daf749aa68a5155b4e173d64a37dd07376d0db8bf8eef724907e29727119a8fcfca78ff17716d66e5ef0de414a775924059651d9adf459c6e8a8f8dddaa86851c28add432fe7a831a9b9a7fb3cbd06419fd872c76ec549d5b3ce491cc3b79cb5c7c90c941cdd91e6ab0c7a3c66c045a92e5de5b678464174ae433a0279856da87288cc86363196d21cb5228d8baa78326e96ed1528b550100c672d6124bbace9f536f41afaa07931c50e8125c891d72befaf6d755b44f9dee4b6ff952d49b4d898f111386198194c4256f963b164e981e0589bee942f788e7dcb4b9507b1c17535a22beb0ce384a8cd3f6037f0927d5d29d1d167887b1868b6e9bbf97840353deba6a5c145f29baeef0f8a6dd7890393a765f33a89bb4ea98fd16a7c801f30438dccfff721c29584299c2ee849b0647909bc85beb98776885aa5830979be1479127ed2
Dropdowns
Social links in a dropdown menu
View code 6047294d132a9eac92ec4f875457ad91c1a55bed12c03f46531177b8850803020538e1bf8453b2d423a35e6cffee9260cf830a9388202918857b7430d2333d44458fd142f6d752f34a932d49b671ab413c3f0531b91e8ed80742346811305fe33da993094071972ccc5ac642ccfa028fde7f9d390ef8276813466608c6c718ef72ed2d9c488d28d7b00c2dd45796e00ea37a770e32a5802c37d940a3cc571c3b9779e2534323ee1aad4b20468fab09a22be988a8e1d568e0323e828a9a04b48ea2a44d19b93e57bf764f42bb7ad1a1b7d16ef42e3d85e21f397965ef86c00c9d52f66605f647aff4acd1445c44833f1a7c6d17889b4960ea982caa559fa4d3b6c48299f70bdd8a50f77114df572e26a4d3e57b9996fa603d54db0d2ff7b18040ecde50a61d769bade30f35f6d88dbbd33a97f9fe12f3159eaa5bbd4671dd47eeec2b6957ce2b1a1e22546beef8c935688d470470d37f5db48549506d947f7423a3c313436350a7da5bbe9f23ec91d188e6a3b0fe778240ff423b4a549d271f7af6e89b2d0e77a2cef671a5d25b3114f9fddec8c254ca194d8c5c92c72e7d3b6a817526c2d5c61dce28a5a3ff088b49511492be18d3bb921f977cc058cde5210a919ff6d276b1a9788c9b29fac8404bd526ae15dd0b850b155364b1f5e066560fa3cd4392ce1194d82eed46f4fbb352d748f15472275828c9cca0e414ed4e2c8833fbbb3ff947ff54285c35f0c7e7cf43f314a2737a271a5706a3717709f3021185827f2fcb7abc1dca95b618e60823d52e6af56be8ad7627603b37457c2e548ff8084f6f868f3088971b1cadbc04c893d84d917d9a885752a86ab257bf50d07a1af7571531872a0e5ac62fe09d0fb61757af1f4491f79879e1b0c7d4808e66727fdf40d343da161b7e136800aa87f0aef54895811b51efdbb1900a24ae52f2fb92acc78b72f799187bd18fa597c883029825dd91ed7d004a7c7a66b1233715fb4641a6e94a85c692b875b881d63f13494ddb4ec3ccfdb45ac96428ff015a12bc6e2599275cefff7adc6df34a9a4ec6e76103a40a19f9ed9b431f539112061a0218c454e47b6e3b820b89079fa43e447f356b48d22569200a47689e638e61ba19c27a9ff602e7c7cfecac2471e75e56d56fb9eca9d3aea55142dca1853fa0fcb23508164da9ffff01ede8f5d9a38e9675f9bbd998bf3eceb17d19049acf4c7b5d1840cd4fabdf0a00cb398ca992e148733065ab79609cd3eaf8b289a4753ef988c92df1c2a77dc086422e522a0874bb7edb06027b8bd7584100da03f7df740d5d3577e29e62dc2b4a8cc6b55dcd5e507608814f158738fa8fd10c61e484bdb5a18da5775a0a4eb409b3b4a5bb88783424eded404ca0a790894ff19079364b9240836e2de94018713af1381b09af2dc2eb488a13be131eec8ffee8dfbcac30d3f8d3183319253dd5dea1d6defc8923a84de7c0a11a484ceed87286f482172ccf79bcef7e81b1ec4714ad45c66b7318302274d21acb81f1fcde11154f85923d4fefeb15b3adcfdb70b4e27d79924c6332d986087c2e9e4c237f5290b7e40a9d1ef5736fd98fc5e632f8ce1d400e1ec265eb72cc616af3e6e27a35587d0268f85c974b5382e0b5eb2f66c387a22ac0279c83b8d691a68fc415c704694f67a8c5242123a748397489f6a6e4def473ca2d587976214f03be8fef196c229df9f5c91e816c03aef51e2219035e23d77dde49b5920cf5062b3e84f8900cfb9708fd9e09609c77cb67d0100d3a3dea7163947b4ceaae9981b988324dd1c4aded0fb53656d7ce69453807f3d8dd0be158e84e5408e4be91a02542e7e19721d4dcfd50bac2551f5368ef8f141f22a0d507533cdfde62a02070e9bfe3f124c5e55c2716b995ac9aef8f8f7d7541cd8ba2c077bb6039b11ebfa50b685e02e938a34b573f23bebb9e644611663d48dd671f2af2928e51c86ce1dd6a76f367145f1a883656cabc8317e79c2f46ff5504fe7986891f0aa3a2af3109ddb7defa9e1f987143c7a418783da3e79c27b099dbe596c6d74820868b90c54e076ef76318e287abcc876de732c8bb82be49a1e42f30306508a0c6c7ff5ce6876907c6b294fc9aff45f6bc05e71a08774fb0d419d42f90b64a9e8e4497d07aa0b05c386932005ac37b5adeec8793a74acf6712605c3b79ba3836eacd116e518c9d92b1ce7cb17caf80a630f3546cc6ae2b7e20c063ab9947968222b211a0842f7db7f4c5a6f644f038b1b313a35027f1ba99323e1ad3af573506649d86d080a7e386d07ab6ed54352136d1c59db13cb79a52e896b0c217324921a8564c418861d47ede751c0e5b526c3976b1fe89b57f3f9a5fb82e24f69e27b8170a595b929a9bff5612c551bb42422e1e3e69ee64b940eb8ee214c18d12483263ed35c4496538bcb2ea954818cdf68cb116aa4b57b38f9adf26d4aaddfc5b572d386f0475b6abb35ef7dbc10a9caecf2565ece5d5bd2705cec7709005312859d9530b14060f53eb0d33063b34cef9204a188ca93ea104f38913cac9fd80ad5f355a8cc28d03c2b7fdcd2d0f51c1e7c33da41ca3ba334583834f3c0ef3c7573a1696ed8cbc5a50ec87e5cda4ff95319311c44e5334abf7468fca90e5cf2f93c062e5ecf1134ea2d8cce86ee5031468c9e64e2e37450b6e8a463a6054ae76ab98536d17750b7130ea5bff5ecd2d48851e125229d570593e048a4e1d31ed65b067643dc43f257630b69048a7808feeaa600a3a36660e657f905cd21f6c57b17b121592b18a8996fff4fde9c12c72d1272b4b82d674bf66d84af7005ee86c932705d54e48828a136bbd43123c6d4dc916f42223b05e609e08198a4eb825dda5a2c945089735c010809725348b0494344c4e9624d7a380ca43519bff3266c9be73a8de923bb6deb25a7110ebf74dc320e092037871df022d2e982150e9544974bb243321a883542bb5ac3fafeaf7858eab0cde5e0175df916fa3e1f3b4085bb5bdf2ac7681bf937ccd4fbd78b6292a4ead1a16fa24fbe95eb705318072770aeadda0ee8fb5fca5b5e44307f729ef14a500cc2926d14a9979da5914e6dcd6e30fbc0c6c73ad493479067e03c0f418fabe2de5e9b586847e0d853ad620584b913b829e5945a3c6fd0039dc37e8f681718fdd9123b2db5a6c077e9806d4397d7473b91dd1817abdfd82fcad17d0f2c6b7d8ee0adfce11
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 fbe5a8e745abe27732cd0de9c7fa870e6ea206a1a226c0b252e12a2fbef41594ecca96f655d3eea4e4c0e4dc2f67869c02f9a23b699768af24ea6c7e3013d07d8f7afe34631967e7b7e938b01e341b8f75092b90410aa2eaf8f5d8f91a0400d3d547a3f67e51cf6d3ccf73ff64c9b6d6386805fc8db5b3332e4b358807448df71ad621344e5fd252cbe82249e9c5875143c74aa3d3aa5b8ba392039581aebf81a0156e9633c0d13579933eb08d47650f61bbdaaeaabcb1e05c175b2088aaebdbc02927cb90884aa18567e7b5b411eec0f0b9546812fb81a2a885f94a781a13a249fa93089e3765fd3c9fba2e732360ba6a47c1005c4aa2b54d8d86734221066c9ea595adbfe0aaa745294aefa5c4d18053dd647afc3273be43b938f5317b74a811c79852abf52cc5af14c734c2fe72e95732455933be827762c143ebc9908a6c1071cf21e4b12fc594d0e7f9bff2affe34ba5931615d68167c40cd6c5708be67271a2d9c8f882817e4589daef9bf5a0f003060617d83410b5cbe4d81e3389764e7f977814063add6d58c963c175653441997fd8f85c864f2ca62f7f74ff2a9619264138a06ee57d5f2b1b504bc0d5beb3967f329bb3a4786ad268e85954ec629f3d02b3ce813bfb73ee5c2acf782009a54ea0bc4175e37a874c209ec38c706b2687915290044876af9c2169df3cc8c7fca6feb93743dca6751cddbd28cd808a934aa1cc842570d4c7cdf5f7dd87fdc25b0aebf96bb2c04c199ea946d92562ea97ab9159f1a893b612fc0e09effd2a833a3299d5010e61f8d8da1826ffff02e0a348b4a2024a1c8803260b458029892e02497505f73dd0dab82f137bc4d3bdf69bf21f24685b148d0f77a3ee95cc540e9c9ff376a3d131005f5e6a5dfae87d4f028271b8d31e73f1bda2b3d73de50483df0a8d77fc0642737d207822c8b33e248c7529ea97fb6dc5be791c51cbc93a8d7e3ac7f065a244f95ac4f37b015026696d1a479776680f2d54a7ed3aed9f207cfeafa65365f1bda948acaf36b40f3b758
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.
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. |
