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 b5448512848b48cfeb877434ec275d7f2124cabb9d40896d186661ed0e40ebeca7d5e50fb808972036e054192e9dd202669dcb6c90ea56c292306d33c637847900d57324c4f40903c02574c8d9f58a8d9aa66e372b8cac2b0f9eaa1007d79cd2ded24516a08f2a57914b40ed2a8900d0c821f039cb532ff1c258e427421588f152969b97da5670439b8e711e17bf6314a6ba553ba1ddeab14c24a7fb852fc535a5ec9eff45240062e2d8a036664f37b7587b884d5dd581dd91b2b4681899aba38983113a8d9243204d7e6f02cfea7aacd24bd440f3e317e4c0f88634efbac2c2c1336e909b05d7a33896e9bf0aeb749387590934f2f20fed1db3637e77feac9a744d297f4a12f1340d6d468fdd5232ed492f68d689abe7873232c74a9f362eefd9b615c4dc6e72de7576b41991a47e4d99e4aa625f753d94036780241560c8d9342dec4c1b89760a1b1d71c8cf262d4349aab3a8ae32c39b25b0d4647ae91fb40013fe65bef3c05f3ab869efeab17a0ea68a95b73194352d3400d99c16e41f1da412f9214363976194af86cc8cb0d9b2742c407303e2aa7c35c0e2e0ee476626dc420f52cd7671084ed4f5c5c28d78ae29b012931f596565745a88ed1d3cf7d8e62ff7921c122172cf2f10f5b38c4709c4eea260529e76403077d799920a0171edfc9656693f0ae6b87d5dc72d5f12fba8a167b32339fc049664fa4806ae8119d89469f7735f6b4e849f266e1882445dd7eb26b33e3c792d154abecdd0581e1e97c33d06094e0e34a9711ad337e69eb926fd251b9e009b9f2983457978ac109a7a57ccb5758d9dd485c4854057b7ec73183caf6b4993f5cf24b0898b452cf3e66b460ff2c961035d0e037fcde7b629bbbb77af103f42181ce9b9ae67a484ec8435096ad2714400c02d03fbfa7a32cb5de96f39a55fd363b0473595d3ca691857a3902c7e9dcafb3c6aaae7010d90b7a4
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 4b4c89bcb397a902a7d0beacb52028f34460148a58037a7654c886612922736ee125f4155457d70f0e6ebe1cb39c3b09817f2b311cca37bccd621ba7ba4468617567ae03cbf71788467e5484759936884036a9a27f3d3356a294f47c88f851325e610003fa0a74a3dd73b40cdda2bffd3ec13e0379e143eac8c4c68dcce391720d02ad6082ba5580a8c87a2b84d2e9b9ce951d3c6aa17f752ec3e54ab9b0d2b7874d7121679794ac1eb69a42c5b99ca39634d95a2ae468df7ae493fd07ccad95b19ca4164ba72fdae22462ce4b0a0ad5134e14e407249237e28a2d4b9d2168c33236358796e783906b85deee132de120fe65e6f9698523f6c13c575814b717594b8f9f3e65af32d9206ceb38fc0a49141a5cea8fbe9099c04c4aedc2d78e1adf6f3c6041ec8636c75a4dc0cc0f9632b878a9a8e046178d133aabea307c54134707b0732e356b0747fae5a5590eee969d03b5abd7b90f225a50f974081ea77471ec99d40f99c0aea2e403d1c6845da1828915869c5016a4b412e9f9b4770951e40a47dca06885a36d5e753ec13ff08c9a9ec606335100d3fb5a90394cde556e4a1c93dde9babce9c08124ab596420c22d39fabe61e7b907bbe2f142d5dbacb33803b83896046b659c5ec9bccb4443efbee020fd8d81f7e8282571edba4cbe1317f8ee7db4518b8338a342fa8c59d58d4d01d209a102f447cf4f46e451a421ac4571ad06f88dd73fad338d5c098a3eb7c52d372ccfa6fcefbcfed4a770e7eb1ba6871b49a85ef22eb0d43501bb2a8a6c26d22abe3f0338e3791d1660fd19fd3021c722c771b1e745b5d4265fae107c05322993e971dfbdfb9b7cb37179875ba24569359c3f109fb87ba21f596de62ee3b6579451a4ad78345ab00db5eaba634dfb245f5300c4eb9ab776e1ce2aff2765542fe8c6cb9937dbaa3c0f489b4204508ce15f04a299bb55ad183be8b052e5053a
Button groups
Social links in a button group
View code 551defb09c471c49cd7de71b393478b2d3c73ad0ab95f249339a3a25084b2f57ab288d65f811925fa0fec35a04dc961014f1318f9870381b9bcc00bc66ffc030cccad9735ebd4afff5e28d7188b2179da425b5c2588cb9700a51181040b61e1006f5d97c654f0a15bb05eb590446fe617ccea7a8d954f6026182abc4a34f2286f4db20e9bc5dd1b2cc51fec1c94e480fc941424bf3f4ac5619e930e0755412252f6b479fe52f5b4f561ab638ee293c47eabcded1b5fb6912446041cba60533fc1d1393f59cdd233cb9b89e5713157cbc08cdf714ae7b11a32d9026a8b5c6b82f6d4d09316885ba722d7b3d8d3013c08748b9f00c9e19918e1f718a1bf9415859bb14e44c2dbb0d369e86499d029ca0fbd591237ca2d218ea1b4e069a598e2e9de7e58abf341975c1867fb0f0bbcaae6bcc0fc5942b93878a3f65917aed35f6c00839a28ec7c5c6a5eadc732629ca13d973fe8fe5c009833bb5c0b6e0a139c57a357f9dd1b488725967d59a99a0ff930bd32378cf76c5945a410bbc695f806fa727f52ac4f941d0a490bd24f398bdfb693404f583620e7a14215d43ee6704c75ba63fb2f69a25998fc69c9b4a27cb686de43c1f2c185051dfa63aef3fa877bb21a497720c681dd4281504ae224a40563fa40a5f356f25213bc40f693f0969f47fafa6a175b3462c6ed7b818d76941137c5bf91c6aa429fd19e28fd148e5a1636b023ed0b0c93c3d8bc8ac26101a1f2fc1ce539439d3a204e1044f247a84807d149107a87541d3fe9d7bf5aa59128f83f09daace20aeed2925ffbf5348cecfade4d65c3e1c02642c713c2aeb76d84866ba356684cd9051a3e0e47c8a3b847336c6c07d1112436589926ee9ef0a06217112a9feb5e109ff1358b7d821c0dc6552845b74a11a9a84aad5fd76b8588255dc0cd4e52bedeee33146821d9096e1cc219e375fffdf2bac7a3974c678b87f8008d23a7f6d8691ba0b7a9883720d24692a359692d577e23e3700ec082df4c7062c7331657e2951be5ae19935eba79182900b60ab32791aed5b34d080c739040bd59d01ebb104ddc23f91f0f6780657995c01ddc3bda9993d1a47ac9ae8e1ea27720f1166e525246c45615022d12fbfc908ff6b6f5bc860dc025cf59cf9adf04cace9faffcf5be06e827456ec1d817642660aeb6bdaf3517e64bc1e1239a305c35c290afcf4076fb2e99bd32200f8540832bfa60d29d1de9583b9c131e0d4b49ffce91dfc29b6a5a719b8468f7f1f61f1436d98f74d1f6ac5ea8f90fad683f0f7414f9bab624c5a462718d1b6337bd38145c48e43107cdd5a980b9d39d739fc6aa07effa8b670f25c43896ca24a0656934da59b5ee5e23e834c2e9128f789919d39cfd704bb3292023bfabd8169b7deff183e3894a74e1ec041e07dfddb0685375a09fbeae50f72b1248a4b8be3da008def9ccf91f02663a4cfb9382e3695ae736809b3b010866957547933b532a65d4f7bf1dc6ef98094ea06a4a0252d53de40fd159801bebfd40c1b4f1e5b3ab96e071054a19ab8de76edf245a9dbecc56ac9af85e8c0a5be4af881986176763cc90d6f3ba1c40723b575c0e8488fdb17a8486b93424403af72a9524001ffe344e1cfccbb44f711a628ecf0637303e8fc58a9fffc
Dropdowns
Social links in a dropdown menu
View code ef4361a024dead19ddfde4622476f4e29883097a3e720b37f42e37b3376ee92533d5d0f8de03734f8bc68a4f64d109f371d9449a15a32e25b56661e2e88e4f10919c1c701e9e431c82aa85887c8ac1b000856c869a3f13ebe6567d3bf6c0240d0c5ca6e8a1653912486449bfe7fee999ef5c9107a82e4554a0a44f4dd68e1efcd031fe25ef9e12711492a11f9b075ea838be1fa4d03a55d576cc81fa6324e90eb849a414721e0c879a71835242b0ec40756d461ac73962a74012e9f175d39616448f9d05349fc15e74f2838b9b30886e540be189bed26db7bbee51cc08d7f2959896eedc65358b8c58397613642867adba1a01fd41771dab4bcf244563849b145482083e36fbb57360877e43d4056e947c04c86a6a8224363c30d690caaa720fdba1c771304d19948122c8036cb14e1972095f43bd12c19dbd66b789d1ca382cb40e8d36c0810da416f41459e54f8ee8ccd79286d24ba9549eae22e386d7668f0c58b1859e83dd715423b14473bdffac3de35f71873edd5c3e18e03641ff1e5986854fe5e4d137ebd2c83062f75a2e0b18c2229a21f3acb96bc32c7785fdd36fee14f380609b0cd42a6745e6026bceede9f5dbf1ea17831667e1e0f5a31d687da0f055018b51938cd873aa6ce3727afe16a2806b8632507a0dd2aca32332dfbc689807cd0310bde91ede65dc3ec94849ff04e0b09191ec1b1a7a733d5478e33ca8283f75ae109a6c254d93aeb4bf43b1cafa85557c75654f4c2a9c170cb1174f2fd1568a20f5e1edb9b94aac1c2f42264237daa19d1614a780192f9b99e125b88104c0f4c5f4a6ee5770b574a204d00c1cba8b84d19da41d48da62c6906137e6b271589e9e698e2d696866f75764676dfabe6915b70651395a3bf12edce92d2414031f608447abbe389f1a4f890c57994e4b57e7230c38c3706d9f68146b0dda86b9c4a7cbaebce6876d1e4e376a055041dbfe05f1ec4ec95196fea77eedc4320756769aa62273c4fb57e78be0484ead9be2295cd63002b1fddb7e07dfd98c53e6859c98b439df2ec4517ef551fd5184b4b2df980c76dcb0a8e83a975e14d2d93a06ed6fa7b86f6a9f3b5cad8b9a92df0752efd19f189bc0234e53162e0cf095e2bc6c5ac7bc45594ded5a6be4ced678f7387df395fcb335b0cec0fa9c278fe10653abc847ccf9fcb5bc85ce41f297f93f4c4798758fbb1521bc60444530a8340dc8a1f88fe7080723509136bb12d54efbf525f3ecf1b7398ddc0c6cd4accd389124829822450155bc243268ce1a6c62e9ea85830d33e4eaf8ba1ad8ce7480af007d13a2a95fbe564bdbc6ea250076f17e047b2c9aa5c1ae4e719eb8bc67e95829b195480ad6ef4aa5bb4fce86db2ef2656b1a1ba1be63b985c0b9dbed1db78174c85bbc6067c7762df298da8a8e7544f51efe3d550f15b1c354f2ab7893be6b168b1b5a62e7fb36fc298b7f1b0140814ada0f812164b74e62d372c20ee3e69922cdf640b62a5f3e1c2da2b59755f84df6051e6eddd1baf5b41213cda6bc8e9e402d444d0402c4126faefaa6fa70df194b2da711b09a56e893ffbd22ca73f5c20c043e7cdd9b366b12c2b2cc5626586147b9bb85c41785771e90003e1b8faab78323e8c60b517cd1d952789ce1bb04f38183f5a161a6b56f377eda1903a0c78856b55c59c9b816ad66557e668fc2b072fc0492093248f49df3007e437240e9b6d03cd3619ad1e27972cb8f796ff7d3d4049beb016f76d198033f893f9d981b684afd935c2e853b35c5877b72630994c66037144ab36d6c06fc4c49a0aea9d0aa342cca14b684126c2f0499447e220af7bcfe49f9b4b7dd5590c0c764f836a576affc4e44d32a352fb14870be39681de813cd317e6ca88b887acf9fa1a42fe940d7f77b8825f3ba3da926cbc25c0cbe5696f7c8a94dd7e213151bd72d8e69ecb803cc92718bc0480e96af1f4a49495c7edd79d8c5f0d2f765b0796469975ff5caabd428412789f81d6b307f685fe770632eeeb0fad52b70ccaeecfc44e125a85c2c05991f3a34327ce174ad5dcfadc0c033d877f6b5bca923c5f53cf35ac945f83bc818d712e29a0557dae9ef96f3fad709a06db46818a8fa521cd872f1e4d610f7b79ba3ac93d044d02f06e59b6fc4d652371bc84a9eca86443aed7781caa78a68f63b9fe26a0d94029021eed3596608f619de6cb997edef4693f283d0e5c8ae736ef09b2bbded693c822765fbaf76f735037e4d67ca0b26d1556f6a4012107885b8697a781c686e2fbcddf5c090189859557754c939297272638538a780add752426fe479c199be51bee7a7c7a58ed698830e207e0d43fa08dfa5c8a6e73b5a405cf1a649fd1276362fdae0bb2b2862509172cbe98e198efc17a59a9bd8bfe6e378ea544b1ec81dd8d923880d08f7dc59e97ee5f8a7af7f5d61df6a817f7d1b24f5010d09ba482025e2ef3b38ecff38f154e8d803c76625dd4698a958e726b5c54458eddcc4dda650c930dc6c349a5bd15b70e1c27f80011e8fce3a8454b06461139cb59f4dc23850fe95acbd59ac51ad5eb7657c3968ed61df9b2fef78aa66bdf650f977e54d701a7704a4a334a340f939c088c0c3df6f1c422a8ff81a4a731ca040a23c711bd1d704888752e27a49edce0615ccd87ef8bf45461090dc7feb3c96c179e198618052672c22be5a665851d4690c774f5788889cb876dd29fa47d768464ade636df422e5a69341f744eaed715791e48345030c92987119ea0e020e7ce17f85cef068b430b733820363cbf5348eff8d97cd0ce0a90834d2f8fc281538cd833f2b7f364ea84e7b2721f8aa421e84b5ab0370892c803f3fa8c7482b1b6469c8b65afb3a7d9b473d911a3cf9815e752a044970cc84628936facb9365ed3f04cb02255c1c2eece9122bdee3f32577fb8d04d0da08d50e61fa377512d5b023b411aef7648d1a86284658e110e18c112ef342d062905b9d5809491b6848299e475401d7b15b4c87deb8f553bf0db2843b954bff6b06c88ea0541864bdc5c88d34b436fbae4624f27252c29290a4bf201fa4b75cde40209db5ef526d81d4174554e4510f5084f736073a0a5f8fe6e4c160f013e9feb355d8ed98687fb6ff3ec3a8e21fe01c48f4f72f294c626ebb19afa0c8687c70a88318a6239a50bf9c736972f56d47cd90fb7e721d85af48215ba2e34aad903a3c352749517c81582f
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 3038bdf91e25b5bb47b1bc5484b6e67e042e1a04c6aca621ba5d3c83ef83c5b5d38e9f09dfbd8a363a660f855241ee5df3bf2e1b70e17dae2f80ff8b116d1c8b365bf416ad1e22a1af7c0159ba655813d85bbd12bb241b5442dcc6d41265f73a69052a88ee2f14561cc2b6b5a0ca89abbb25bd2f5fd56108fe8561203bc1867c1e557ba2b14d8dbe414ed8625bc39ae98a7efaa4aafd2768576da953fbbf2b5dd8b14af4ad8c132b8fefc4f71ad2b96e25dc78acbebeb2be04daacf40db98cd24d89a5f5cd8d0e61594e50d920017b6d6364b72a7ce9e42ac014378bf4e091e966b79f7f3f25d8e69ae5915c8cb9b65e6645bdd32ad8974e232a46c777fed7764cf1a5735db6f4bdf61e5b5b53e7eed1696e3d6959670b774b6ce76894585b736634a218123dfcb1e3ccc5fe8e08811e3565459bdfe9f0a6b6e093a351cdf1b1a92b73665a309fd8ccfb21c132e264b15e90b018340a5356adfd62c9877adef239519d4ce41808cf5707f29e55fe76e51297bd92b6d8f56fb90a83106150a145a68dac90ab6efcf43303e52e58b38a748777da985f35a24d186ab92b8b045b1382b11806b8cbee1fce8d4c6fdd60dbad56728b624bd4d4c026accb0bb775bca5f598eeee00ef6fa31be8391326eaebf414ec02a8b05327af0fee81f92df77930631c1591ff59d6b5a92738264998e4d7ec6ffae5a99e98b84b7e71e0260e0aa1344f2bfdf084cdba36d28572452fb1f23e323359fb442ef680ef554be5cbe292d2e78f6089aedd483d8d8c2ed3f61260b4f341410e43c389c082b81f20c66625dea12fdd7f2a59791a783989bd9880a4e0b2cfaa2ece85b512225ca8fac9972af361084254271272f5efbe916b5f22fa6bcf1ab24e62b49fecae4502e1d2f9a878d8104577552a5a4aac6c353e08fe1c85d13220b9e62ba9727cbed54014023cd376ef0038718eb3c2bcad2786a5c52242bc68e7259d2cb52c0e0306565d361ad8bf8100c5881e7250a335752854ccb720ce25ebac347e806b471921fda34ea6
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. |
