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 413c4450105f1fa684ef57727f633c876d4ddea6b391da60ebd58c4386601b3a46acb4007a4e1e80462c4ff2446cc596c843e59d50b98274df56fd9b47a2f0e27d00dd7dbbf98c01636583b1234fc38c98e1b5488a0c564d17c8d13909752633d89adbb7b89e4e39fa6353ce15ffd2594b8c6c8cc558ce4f55b44ab6a5bf42d948903522758570441d8ddfbd5569df6269163643acfce9d7794c35eeec797656d97142448757c0b44d30ed0145808ef04fb6c0a811ebd1233dfb7328cd91dd1898edfb0d429450a66ba85ab4cdf0733f784d39bda971f18edf2b586bdaa6d6b3ab1683a69fb7761bd78553589049e97824db5d23cfb8b4eda229ceb60672c9bc08f437a7c092d23882e4530caa6fda3a03fc8d4044a9149fa2f30abd2b2030ab64729bfe87ef0e7622c81210e610d4ef626ef33f1970ba3419de61ea3ad6438644e87e9c6e1a1b6c437c50a094fea03fde936517135c5e3627a0fe31a83872f02ba6ac600b5c2e592d22460ae22d9e4c8c60cf9703ff3ab4606f3c3cc5585179c493f4d3a64c297c663a4d4f51a6dae696a211a1251fb1b9c7659456babb64049e4e7d8f1239b6a627af0e11199c4591d4aaf7822d34045e64c524f5743270b2d22f8fa1d9b1c36f126db7c7f0ddddfced8fcb3ae6592ad27117307f49209cfd9f43e0e825667e6ee6e9e5a17a288e0b98abc62d818820bf8908e3a92123a67fab742acc818edc6e6d1cdba38140b9118e3d7a28be1fdde7230789d8dd0a6485d4fe900a77831668fcaaee73b055a36f8adc4a486826a79f4d9d1581936156df17fd17bd59b362abcbbab4776cbc73360c9a6e59c27b48579e087fa66f5133ea6fb9c0f2c908515d6ec9f3da348b80aa1721498ab708301399c0ed6e043880762175d019540dc20a297b289eb09bcfcf7497c2e47c1dcde97e1525ba2741b6960851b1631eb46f44649b49ab71257da7
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 92e04a798d0daf85a185a48f23f21fa9445602f32415bd0d7f2384907f764d126fd79008f54dfca66642aee4406ddf38ef0e5ffac06376c03ddf9975f2e15d7803e95544439ceca1ad08ad55b0d1448d089b85e0bd471c3d50d20e72e7a8ff358a3f080505d7e7e9b7546d1f5788e44a9f0b5dc206c300511280542db1942059ec92a290a4397f4d985f6fcef949073437d52dfe49b146b582ff53abc2bee4ee11ca6b19bdf54725cb1d1f0af0989a9e22828aa07cc2abd49b21eb807537bdaa0cda565d54bd2d574c1d90991b72adafc9a444dd036ac6c7d385ec03657cb7761cdc7198ce4f73f19341b373284be576cb28298d695e0dbe118ccf9274bb001648fdc28da1ee86699b914add8eb21e60086c64b22d6f7f1253838a5cce793f334939b625255dc8ae3215106446d94e4caeefd6df122448626cfc099504dd824c674523557dd3a6ddc5171931941680734ffd192cbdddd5189e2ea66b6450345d19bdec26393e4f0510353f4039d31fe60feb1cdc5e1bcfcaeeb82e948fb9731d82818f0d5c7c6a3cbdd5040af239738bc910cc199d3907cedeb2fcc96b196f02deb26254fa5411c65e1905f10e62db4d9f645e166114376f42d3cc8f41464194bcb0dde0c07930b54af1df48ee4e002b1736820df206151e8df20cc6765c168b64b21ec200894d5aaf5d4a5aac5842e77ab7f5117238b91999ff6d330bec8a79317cfda68cced472cc0e242b832ee21ef1c7ae48487c4362a1a21f8f4f1b8621f4608731543b5fd55ff3eea0a42775b414f51fa31abb6e8df52eb3960f4215502c62e8b0d6c6798dc64d57903e7897b2b39b1d7c0b9673732abbbc1e133c38ee163cac943a60ce9ad9b329c3c4011e86b289b6d2b53e2ac4e5b45f093e1dd3bd2bc131bf0b7b99718b3ccb4dcc762d3d25e9d6188bed0bd7be1b53b8af36e0060ff3e8744e8978579b2993081101020d
Button groups
Social links in a button group
View code aa340cd02b62f8d1cb115455758532e06c7bd8e1ebb6ca78c0e54382af807176c152fe8ad5980bb793f0510ca0010e0fff89b8ea5ae11d5b1053bc245c3a8cf090c761a5023dcd9e0f14a4052bae550fd56630ad7cb8e00d0479fc0b78755ea58b3600bcc836c4ebfa6d2bd5d5d736ec869e5f743431327701ea1351fa7f105645f45223f301a6c22cc80e42446fe6a6eeb344166e605d052d113a5b98bd1910729cecb24c4c7dc13e2ce1e0699bcd7df0bf7817369c7ae67d2f2b0755dbe5e23caa230d5b584784668701619909742c3d51335ed084eee7f3437227dc4590da768fea89b994f3b28cceab2821b1e60672bc41e4bc500d697c9091bb6bc2cd459253274ce01edcdf1b5e097cc814c54d94b821f1a18385fc6b3f0aeed8b80a51a451fe97b750db8fecc51e767454251d4911ca2b9288f3b981299f2c9c1ae559afd83d3e2083627eb49d5d6b2537203636a6f187eb2acd28f152727709a9464a4c7f04a5e4a7a524322c7ed9f6f30ebbc822952c95190de1c4276abd177a676f06784d6b9eafb8a4c736f254983562a2aa18b34e093e02b588132c7a6ad2baed857c117b9b920751e86b1d5ad1f6b994a2ef95433e7c5d703a16ffa295326574b7700b7deaf4f7f31b7e091d6aeb77bc4bcf60d4cb9ae3d60b33713f07b20592e2961cfe497f3274d9fc78fc143e983971e97a566fcfc1d3b84a7229db47adb94d00bbdca516110020211906874bb381ef9eebb66d0c8726f1907d227a62aac52575055c68f4e40b6404bad29e774f90b7ae795a60821a20ba3649f809bc39f404892ce60987d9b90f4106db1350f270117e2346e0e43ee6c31f063974817297a9bbb25853001d88785c19855faa3d79f5be6bfec6f5bf9ee6bf3931002f6786c3c582e48c8db012baa50f06ae56f7b177f68b8668871632804e6a81dd9472ac591e5e39586a832bf5c143aed22bb22cc6078fcdfa1ea358383320dfc8c192e7b8a27040e0cef8f33afcca412c69388058d608c47caef02cde54f88f5ef9cbb7bf81a17cfb25bc45df6a7cea646be901599c27598dd7d3185929552a4fc96350b2f7061c4c53e84740a88e624e0a1a10cf41ebfecaafe7190e1a6e9861e1c866645eed18ffea349cebcdd8cdbc4e2644f70b6f06d0a4a32ff8e70c72e24ed14974042594f68f4f39a420b04b3f5169e7a94e1ffe07ee554478e9c2ac8ecc8d548e123131dd2d8fce202a15e31e23ebf8a5c73a3b5ca8ffa890a69ddc75b0ec6264809e54393c5855ca2d55784a21166b2eda63c9808b73b502f33b42ea7df5005c34f4178c662907184e0ff4976ba3d6e813ed519af4b8135b3522bc1f5d171d10fd17e3b76ce68a445ad58552e7d51bec2dd7ca9d69752bb249c0cdd30cbd2c64a77afd67c916e60c253933eebf07d730671205321286106d94ced989875c6e63451a534f8d1aeb2515effd04a8ed7dc95c2f0cf15bb40cda28ff3627041ca744e35b8eab05c3dde7fab01414f8f174963396d122675826ecfa04dd27914c1456eba9b0a115c0d77ed94e051f8f455ba694bd2c565095cde177057662a4bef2f1d330ee6fd4535da008e72ef2c74f21c90e149c8127ea87a2b31f867f28e30be9f94711390483169cea0a0e63acdb89
Dropdowns
Social links in a dropdown menu
View code d79fc66a2609687e74e7f14a1b4d7f8fc50f9ab105dd4d57248b7645cfd7435c02e0468bfb143edcf1e80033bfc349bfec3a7d3921ece633c3921cab0b4dec062fd66cf48c703b2e731172ea2cf6bbc62c1f1284df7729b423708d3993e3baca100e56c8572df9aa83d063e8ade6432ff3840764808ada4af9648916faea31bc9199975cc8d05d0196213e8a398c7e3714d016cd25138888a19b9d9ae591b858ab71aa7b55615cb62402ac941ddac88371cdb9af8f1b294bf1cf43aaa4e4b797372f5d370ab59a67477420ac0075c894dafdf551950b86a600784e6059b6c4355264d8a88b43ce40456f29eaeaa99252fddb93593f252b8d037334ec71c3c1d3c46ccb5e4418836bf5b99fc0e2ea706faeb94527171b0ecd6e3c8324b52f17be937cbf6ae120af17116934482e035c95d3a3a002c6da089102b4867692d751311666e0ec42fb6dccee66bb4faf45d90bb047ff3c6af8d406f4a18366256df575fe76550205939b9f3a7fb49b3b62386605e1071557944f3dce9fccdc0f4f6775b0d45d1001ab3843c456d5f4ddee54b98122051f53ce9b0d825e03b6715f414ffe7255e7b7643894e07b835741fe2fd04afc2144e1c7eb23cdbdbfc713086c506900e4bbae34a10363e02733315f9fb09628d9f5f09a72069e0c3a15c99ad334c10e96acdc658a91b6fcac92d0940a1c7e72559df3a14a2b20706e273b51a9880c9a2f8a92a52dca9e41714b1c90887315340725edb420b15e572d3042f5f487ff91a513c52ee7ca9d88199642052674852a39d53de99724ee276d372b4446cf3b7b2a6d8c62a52066e9cdb81cd52e06539787a343d6fdd7392c5f52e675ad1666e119f375b77e7d2c9490d3e4e633d2de25d1c9446f3bb8e1e79c24abdb1c4f7c3780c7c6d015bbbd9784dfd033bf4394bcd6d9c84e3ac96ba8ec29f9ba9dd75cf9f99b34a5d8f58c89976e2b6df4e03a3776e4bb076d5765644011e51abf98b2f8818c41c08fe70864fbcdcc09a2e251e4e34e64fcc93408afb95efff7db564a2be83e3afc0aae5b6fdb74086c73ac885d2e93acfbee681158a7ef8a8f43f6dabe9e39a2e29646e89e77a988230728c4acf08874b795a0a1d15012a12b52b31082197cfa9db07f210a80ac697a67550eef8386da014e8ef22968f30e17bdaa930061c44d178c6504912b194e809d15d2eb0c493a6ea16d09c382a29952c76b8fa6953f0831846e175ddbe993aea2be5aff08f91c29c7271e754b90d1215c4463a72da8b8e857046cea02be8487d09aaa60aa0693db44affdea86b4cc72c7fc5586642acf790d211a3fd0780dee2419b14d8140271c64dd5c3ba3c02645a052489750122bf38ed06861ece8a92374c0af553c62ed38c5e43637d7f43c71883fc2a8f94bedcc3bc41a02799a656132b7ab4933263a3b585830ffb9848e0313cfa99390197d8d0013b46877042866c8e61115006dcea66024e3b81630c6c20acffb2c4b04d032468aba123d60cd59dc440b1d53abfedde6c0722d8b8da0df4983233de248c6e7d3a934688d97be1a438104b0ee821e306f535f73c413fb6afff280b6b20db96e28eb64f790905ee847b15db6a41b280d92801a5954b4f1fb7d33f4277526587e77fbc67f557cb942935743f28a7280e8a0acde9eaf7376dc7a1b4752bcd27384664629625cb8a90124fb0e35f6f244324a14eb331b9de736538ed220285d496d3ed40a8fc28bcd9984ba4571c1417cf59556c6cd0c6241da26d756e70c84552f49af900e9c300c31f3d99d77c5b4be284b7cd6364e9767e4a5b9deb38ed79cf432fd99db9f0d1a783ff8a0d9c698d7868d17e3c3b2d72adae6e775a86c2283165f35a935c64cd87448fdd8ac3257d131c96985e60b64891c1ff45b5dbc6e97c877519cc714cd49910c3b2844cd6f7cc9784e7f8d38ca9cc199ad58fbac899bbc4b758b8f0cf1310000a2bb16661be88247046e39c8cdc71be109452f541ac3926fcdc329e6d0fe607ff77a2cbad357519e2ae42566433eabd4354969bd67d0c751117072c9a3c885d5e5b4c5076534e6b4a97773c99c04ef2c87a09ee0bd5e277e0ffd807cb936a64a1741b27bd7526251524e0e1facbd005bb143f7ab4801ad3b2c096047e788fac0b28abbc0e61b7706f1f8339049d2a183102122c379f6a17acd3010ae06c5b9af3a1a85a9b3ad03526445dcae291a39ad4b5eae4f8d27d0ce793c4f3e5782a107eed66bdeb7511e493b2c83b8013fcf9d3456083f25d6b23405d4cf3a69990ba1a6cff36c34235955afff647999e01abf1c7d0f285b9ba301c230c09705c6affb526d763f12b601f74e09691e17811ffbd0a96b45e9fbb11d04e404d58768e85ff6bef717090b1e0c9fa8e145c35fb499256358658b1ea8a991bed998639d8613731411df5cc633ce6ffcfc0528e49bbca71653542a3a682c685b9e2a7830a80690e11a0d9fd26cd2f05b67dfdb932642837fe59b6e4adb9c8a088c3ed213ba89d0ad7467c6ad83827fc81fab6fdf28b1229db9e10dfbd6d2161352c214468ec3dfe4eb1b1b3e914ce8b59d2bdf701ddb984a0593c6d0ba099da55322c4092a5ea2e64311afcb3e32afb9f5ed00a54ce5fc797dcc4b17f6d1808f5d37c446a578a0f8d394dc007f37f838328e187dad40be5b3d709f9464bacae012f13f8e6e2eb9a8eba1443a79b423cd9ff0de839bd9e89473ca9411bf025877e680d319ca3ba1f99d4ad847aef5d60eaaf5b496e7f01abc494ee4a012611985310b3bb205196ca773a55f8a497cd21b9688b6adb734e9262fa142be5abd5aeddab73672e7ea87cd9871e15bba08097f98df37aa2a3ac7224d2d233b28bfadc1bf51cd9522ee6bee8b1b89643396ab5ac326371acc283dabc9203af94e5d4c8433252a54cca22716ac35fe5d698d83678ed80c0f6f0abb8798dda4898ac5a7fe0d86955c8fefecfa5bf1f5e16ce3d2dc7bc6f3cba12082841cd17fd3f5c21d8b8b36e1d4a5975a2dbec68b868284b5d77b917fc21d453fd47656454b27df332050886f8ec517c3e90602e71fc4aadc967a56af9fe6d0809c13cd6fe06012640fe6cdfbeaaf7ce7a8e571a2306ef916503388172660a921b91d0d399228a6c1e32bbb77dd4e881b69689bc056fc02392d052c75e857e777b828372e17cb3b6fc974632b4108db50b7ac8570508c7f86e978fdea0ada61fc
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 9a322a175dc6626f7f7cae9039e67c2cc469ed17a4ec0a1b7463eedbbbdca591c8f24baf772e80a3f1fb6ab85369bf2e10125c317439381a1027a99239aec7de762161639ba62569dee25ee327da710b8d249df3cc400cc205cf1ac119e05e4db2399f48937f216a2636f7f0447f1304f9f79570597c3fc33d6fedefa824590b8cf94a0a71fabe2ee3b9d06ae68081c68956983e844d13b3c643218207a5fd69471df4241945bf61bbb602e3c40d3af1067528c679e198526ada13bd000b33ace61c94c38f00b91f4f2f2744af496f6d2fcf3ba196f3c68005aea65d92c782650ce03d517873976081a5fc91dc2fb53c64fafd0c00d3a6d877fd3c755ce262ebe4212ab75a4a12963506af8a7fe876fd8a15ecabe49c944265ea36e9893c2a54caf206b265a8d647f6dad5eebd57fd2167a14a86bb53f6bd90a91110ed6be2647e7d5196372cfbbcbc308f091da9531759703eaa9fdda3c51969e6c38f0dacd17d234b1cfac50fc25493e7af3aca85220c50e493274104513a6eff8a1c4b4424bb718c43ebe6895b43cdaeddf02985c9ae9a64641e6ca5595b16486adf893871847eecfeedd04713d1b6f0da99901486353d6d3bdbbd2f0ca43680a738f2e0d3f31f4ddf74201ad9f5bfaa04a97b31a5b80fa98b8094f9578bf2dacf1e14006937786c78126d6b5270a4c780861aa6d5ac2f0f862d97fa4ab9d2090ff63c9493e75f30452d3b0514c2775f7f3c7f18223c0b26bcc6b5761edef6e39b0377d9461e63997a891446cc1b835f93d783fd08ae6de8a9183b5904b16ffd7c14db4d31b3ee6de97fb92c6eb67c14c340480486aa67c31c1683f1bda17e2e5cd93b2796eec138cf97034bd615cd8f7d51a62e242e25eb063daaedf86fc54e75ee6264b66108bc32e8254fa12c589f93c04e4aae894ba366caff792ac1570f6bd3bacd5714a1d7cfc8671d131c36638abde6f1d71455b1c1d03398ba16c075cf30b20309eaa79297c1b2768431fc386a8a22cd70cc12e9fec6d2dee1715963cd4d32a3a8
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. |
