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 c598a52764cf71ab3cb7e1c4f1c13bac6794502eccd963815eed076b2ff043f455cb9a0ebfa2d98a06a5b5b7e73d23d7b49338f51f53f0fb46601846705d8e9f147315d5835b4f62da1355bfe9fbc17a58921f3a3bf1790173e105129213367d01ef510d9ed4fa6d150bcba2187e8c7436e1e978da9a88de59319918d854ceea6713792027d07e262b736e6bdfe0885ff85ecea29e5c70c8c6b403e893289739279646633b7ebf85dc3ff8b0fe0c5c2b7026ec90734e12de44458e568b1fbddfe7bad741b1b43e1bd77405f35cd71448790f139bd45d4b11df48bd4836832c28b4bf5124ab2e0572d2c1a9b43431f251fe337c5491e71dff4534e334a228a7caf42c3775a3d6744c473f0f7b8e294fe85cae6a079c7fde46d4bb4f2b5eca17d464418750985143e82c8e7f581d53e86439115c6a4ba6a92931c2d1845b9ed446abdf35b0aee5f863d5c40adeb2714a785d04989342ea9c10ecf69a928ad05e0777cd65bf872426151d1456cb8203c713b1b0fd709242549b7f38471faae2951e3064648fb8948158c0ba0abcc8a9e90c6736687c6ecb9ff65aab3e3fd2c073b711c670e62510ef99135d49a170eb334890dafc101e3fba4dcb65740cd22cc5e7bd5cc4c0aad860e96d86f7b35c34836fcb1db40fbc2e01129c02abfb332435fad3f1efb702e476d3751501c8ef0b5eadf6743bd5820641710c6e29c1fbdb9126c2a46786783c8bd5c1982d95216c5f319dc604b69eed69ecd49b6a7ddfdca5eaddfd9f6e74818abf55370b84259987e718f982f157030fb36a6b667f82c16448dfb276b8e66c54a31ddeaebd3e020ab3aad09934ba0fc22ce2760c481d7024804ca61ba58ff5046da4c83ed3c1e44320121d06ce9acb0339445e70072ab5ef1a4f7fac604e30d60829b17c47e97b70c018603300d81409a247d4d3b5187a4b692206993325dc57f2ca8466e61cda31a9
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 c01bc1fe23e6bf72cb8748e3949e5960e74d6396fba358e4a98135f0a5a4e591a15a560fb6a701aa7019e54a6e0911c6a2b2d6849047d773eed61d25cc260402d0fc820177a2592772e2aafc92f2c423a906af0f23b5574bf36350d6299d17d3371cedd082a71e25400b6b0e99755831237aa01e3e83f65085bb1d1fcfc1b47f74aba3f9449bbb9b719325a6e027bfd4db9709a12ba0aa552bc52ec0848c2e2ce54fe355e3340c6d5cc5b67e27aafe955473a28da309a11b8399c388680cf77b1423b12479ba3c7388bb15aa067f319a460b70e2540a01344fb8dd10a2d9e254481aeb4fba4e751e4add1d3927d9cabba5b83ca15fae036a8f5803cbbc5666a9acf32a0dfc1451dcf9007c28d0addbca291a17393779d11392c9bbd3c3be018acd5f80ab02ecd9af445ce41c432702f71f21484162be917d098adfafaadc0efedad215379afdc6295987a315b678d975979de0c704dca110df7a788384cf00566aef9a524f9b92ed7fbd5290f3a6517c687a4e93c615410a3438509d957ed94c348d36bb3b40c8024fb81f6295e05aaafda6dbc5e38d88d6c14d0c47c69b2d4c5767887d7ff70dc84c54895897155df5c85ad0dca1bd8c7885652ad0a582efab7b7a3e59e6657f66a5ffb37f79b5029f19f3dc2254ba9ecbf4ef0a737c8f2b2b06af672bc6bb6890e0269f352c3297b52d708ec88d8f1c30f49e4381c394d79a3d300f0626e23c8c48f23d5cda51bddbbbcf01ba63d4511c0e311cd6253618abe4c366b816571e8bfff8d9288ff3a6864cec524a5864d15f6cfb4c46e516e86fd37216afbd4a65dc5f857433cf4c517410180c7b07144a7acf3e8b037894cb0e114e55cd8533cb45bf4b970ea65645826874f0b3f478d97963e8a40ce5b94f07bb76e49bb744a79a8db531b5f13e257d624c721a9095f550eb4e41874b4f496d1910a36f6f7e6f9bfac66b9a1146d748
Button groups
Social links in a button group
View code 733cd155ec637e6f48e4b9b9bd5a72bef66f56d723360c81e8900db439a17370163be79369ca6558d5ecd32093312003b6b286e898a320d48ef9d6ac621caee48ce35dab69f407be377a7e057bfac928b17643dca19684cb75fa5acfb573e9e9804a488fe5f38080cc517e101261fef64da026ef896bb4231b6967865ec4e9b3d5532062b6496ea02539432f8402a2961dd2255e24f9417d5d1e4d4845c97af2f00b5d9c4483df869b7d3efc65e18e839f5f2ff2230102102292ae58d3a4a5d612fc9773c3a14ccb5bab80b0eeb40ec74ee116104cbb9446a78dc63a78610da171724f1ef5cd983a09c207e3ec03e8f5a41dae4ca1efb57d13437c2634a5e6d322306f7012d54daa04bd3df8e80da410430712a899513761e66b3d794354329911cc1affa6ee0e5ca2926582c7b177c4aacb80ad0521a25d0d522f357109c6c551d35506ee62a6f9e6a09e89a8d128e6a0b027cf86577de2f7f9cfb0d476d0237d14b5315fda843d4f63b85ddf71c0d9526068ce5c51a2404bb9eac62e576a3f63d1486173bfe44c608870ddc0db6f050bd2ae0ca29281e687524989e35d7ace81a197042fd64f170f28b3a36c4a9ff12b00ae1ac8cc29afd2b683e36d574758f4bade0958503dd90c4ffade369e43322325b797a25e6810b23fcebd05d373b0fc6a23f12f1e41daf8775d1f8b59f0e9890a531b0c6ed0be092fb53652940ba10cf266588918302f33ba8f8f0045ae0a7012b3c5a242155260f60338d5ecf8d8fb62a63f6ec74c50c977b43f8b46bc374edcc828849b8bef70db5ddd3f5a2d61550b9639fd0715d30f1620162ea5260e8197b4fd919305de80696361ffb92f55ffae6d9f5ebb7aa6fab761500af7933e0c21aadaf0758fd7c5c81b96b58dfb8df600fadf99bd94158b3fcf1c4fd25314b19477f94b57821bc9c864f4fa6fe96b7baffa945505dbfa8f5ced235054eddf612bd14fdd6a049a9e5adeb0bd50d50bc51ffe1af9f2438f844179649f055f347a59447ee2f37a3f6ce7192e7375c979ab2c9a20d9c308045390068a0163e7ae7d80b3a066ee58186abde00cca64edff20251762a5d935fbc3b97f08ab22bbd1afaf3c93e14d367df1619e97d1aa1edf3b62a744429d3107d625e7fb6d40f4497355a1a8294622867f3424f3b13641d7062bce470531b41fa8c55b52b43ebd032361cf79fc25c2ab369243df20055a2da586261fef1c70ad0bdd9f1a606202fdee5e001658b2472851947883428236b550cb5a647b13828c7bd716866f48a9b36843735ffa810f15da9f19e0aef0ade3b42210d59510948183c4d62d14ad16d374ed4ed7fa5a8c4f74a55934944cc42e25bab336a611487f37ce144e97f0c1904211f17293e69691c7b05167ceb02c01e4c6a3b1fdf98b5faab54168857cdfa9245459c087ecd6a67e2e25863f2e35e3796c0c23c171523e3ef95a718a95e9a1c191377d48285abe703cdaab08684275ecbc1a3b3ee57f6842918408f8c153b9cd8b81c5ace8d6375649d598dd9e1cc0f306ce82de5ecb6f3c347704db4c7299ddf5a1ee4fdedbb1e9d31558dc25a9cf5e7cbcdfbac0788ddff712c334563b0e69f9938a0d5396f65f8a7fafeb904d236f561a8f81166497a32ab6929f4e04a1
Dropdowns
Social links in a dropdown menu
View code 870363fa8e9622188dc2901e45facaf17da7ae6b668fdd40e3353942d9163e8dac5f648a78c00765520881c054c3465a07973803a3d5d5ec1442acec13c9dc1b5fe3522ac6d606cf3cdb7245c039a0960d50998751159b2fcfbbc777283955367e84a5d499be62e47c7d56a4ca43fc91d0e8eaafadc8c14e936e8fc107c3e45c06db6f49c8720cae5f505f162f44b9866b01c407e6267e38e7b9a733b417b27a4c7b07071141c3975663cabf5dd1960e1eb68ec91726621e23b1449602f166ba67683f9c764604d1c6f85228754504e9b4c5d8db210230919aea848353dc605e6df30aba0fd948c7e81382d392988b571bee1fb2129225fc805bcd0cd993e115a38e099f19989b9544b4c581e3815857550e610d1f7142f4a0a6eea825b491d695d080b35c084ec3c9bb923908acdb33caab31493f71771e6232c93eec4ca4f4fc7fb10c173a98569cca4f724ce296e43d8c7463f98b38a97d376917c4fdbaead6cbfaacb0265ad7327ea0274f16198f937ba75b8b2929a065952816dc5f51b5ad91f68b33b7c1bdd8e4adbe62c353efa007b64804d02b836802640db5e861eb638936d4d6b6b63249361daebbb9aaa7756de3004e1c250645ff95eb2b9983f36cae6456ef35fead748c3ba194caf19f5a4657258f7db93e401a8fb7a0dd1fe252ff802c9ad9b2907a9367aa269b83e25060faa30bc2120e06b1a529cf43ac35db1bb5060fbc9e388d1ef1383726db7d27acdb408dfaa5463d3ea9c0ffadb72be27ff5aae6d3866f25a60e142ffba15beb6060adda18bb6145338a4af7a3ec116633050aff550f3db4af50993a1e295de2afa8ebbf3f91091e06478db9a79fd9806eee605979d2ad0ea142695a9fe54dfdabc086c44502191b3dedccf147ac4cbddbf6285bbcdc5e0025796e92174262469bd7bc2395bbfb4cf06cd1abfb0eaa8b23c32bb780597a0ee633c4720781efa21404bfabe2a1dba1ef8e2b3a0ded85e360ffa84b3487527ef37a936cfcd9cd961b301b0214c6c0dcf81f18b2ec556b02f53b8fb070b56c14c756ef200f0c54a40a2b9e97341f2f950f90aaf29e4a7a8b44ebe536899e740b1443a65802a8f30da91bed238a7444ac89f9bb88ad4eccd83eb0c4f4f25ebda73e6aeb33eac86ef85cc70b57c6f2840b4a105f947cd7f89769bc547116f694ce4d83da9e662ff544085747a27c7cb6938183a290e76a9ac899c3894f2ca681791360227aae149bf2f3d5b3399f72d8d4fbf8d5bc49c7df0575444c1493cdc40debe0e21e8ee72e9a88b7e6f6e0cf1bb43c8132d6fe649c25428ca11de4fe63c4808480678d7d2e0cb62fefa33faa5b59d0d3caa588cc1e7ee153bedfe032090b20cb9aff9d546686765075ec47efa7bf83440bbf415656eda14a0bed9d601d2713e49bb960de785050a7e2e4fc926925b3ae966ae31eaa6f337ffce39aff7d2164d48080fd38b7dfc2dba294c28080bb52527392702ad52b0b6eb08a570a426aeab1c9244761f72c494ef712a4e265f6f67c89fbfde79e137e98abb204bd1e029e273dd0190087e3ef592d7f79df552e8d61471d2dae80bbafac77c6d78d7e87160bd97d5cdc73c98da0b7967bcc5acf07c0cbacb74129ac9099d706b722e01d961b2e88ddd848e6996c111410309d7c374ff5f89d2fad664f55bd13e867a19e5cbf3abcabb7d5abac7978557f2076a1b4e463eeae60e43b284c11f6d3b5c471e8a869f10ac9cb42ef4d9cd217d7ea415b9f464e2d97f4faf7112d7be2ac79ac6f591279a8e852f40d0cac53105d1089d921871e1b1808aa12b40ab9a6f72c63cfe0e759df5ed800c6c29da4b150812db6cad08606506c50f3c6f1ec35947a278279a69cd41c1756a30d8f91e4817bda2663b7d0b2cbed58ed8d72b53c807a024eae44625c9feb609e4d497296afe2b89996ffa162caa8011ed0d4ce49c63c2856c6bfac9486c484fcd1793711363dbea4be66a83917f1056ae00345cf42879fde2f9ae9d6e00fb15c9831ffcb0248463ff1569f6cdd5dccfee1bd63e14d0e1277de415b4b07543c8df0081fbeaaccc43cc1b23e7ee28487e4c7abe42a44b11c48a4e3fde78397de5ffd4962d5360f8d5cabf31fdf9a98af7ba1fbc6aa4f3502f5cd98eeb395f81a3a5a1626ec8226c0b3906ffde94ea90e04a128d79223b9e6329a2fae8663d50f20d31efbf7f7c5ecf858705f9c2ad497405faff66327ead9f21833292c59d8c84158ab7e96cd1cb820976c651a7cce9b7aed1bc5e2de8eddeecf3a0f6adf903f102024990f51abab8e97c234537722a43bc5cefef5a9e79b05cf49dd7bc47c5680775126ce5b6e25f7079b19631650e238579e825ba95826af3aea48feb84f30fdbe3fc41dce4d6cdef7dbba6c88c8076b95d181932b14027be6824dbcc373b341824ca18b41739261994aa2db7b2d603f600935836f2caf988c5212b349c1c8bf4b3a57ba3bd8de2da25eb13ffc5d9cde15f889e2881069e74ac687dc9b22ed0d0077365682b8326b74315cf01e90f7c92c606bfccad482c0d1f237f815d86597bdddab8ce1ac24f4f84012e0f326363b6b168451ad90a5a8d3abecc29fa4789482e112fa85df010fca7c2e40b66d75ca0d7326014e8f0ee182510b472a6d2d3fa670c617ea20505518b81e2573fe7f5b72e373d41f4b1246a7508ccaa28724d66f1e1d8d2aee85b6206da29e46269cdbce61a49b55d2d687326f8e224b0026e333a98e04a4f88ac895e421383eaf1c62b0d80e97a0a2b5fbb822cffef0979a793c7c1ab0f166df08af2dd6258069465fd27096c94a73b80c08292047c93666dc684c7caff578d01ecc06670dd9731e6c3a25d6a2b1910853c3599848fbf2cf66b4cc2aa09260978a4bf99dad2cf8074bb2439ebd22c86729d8893d20c3172b01d435d7e210ee0b1e823dc59627b7ef974d6d20a50330fa5b5977118da6147512321612265497f86eec16653353f8f69ff2b0ca5da336114f64fbe1185f3f1058a6a9d9895519136ad63ee38c89ee423b178cb5365b1d102870ae84ebef33af170e40a3299867900e2769b8eff59a747c21ee57f1eb083e7082a6f50045496919502fcc1effdc7063cc5716a087162022190bdfe2f56cb9c7b5dabe31aa9cf6defce96dd7912a48d7f0a5a42e2f0b274e7970d8040fc24d4933f74564a5c9a7a9717c5edc79d001f4df3955c8d9df
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 94e9156753f5a72f7ffa2383e7698b520166c1307a33b8a605140a8a4f15e8631a395fcce677b400bb380401705ef73bb4f1c7a2f48153474287c3ac114a59a7c59a79d9b51b399d1c06c1e88397774d625a0921962262757b4a9c45975ae5534fb35635e8fb52fcc8127c2701adc0343bfa103bc969cdffe0661929a2defbda5c6cc2046be7e02e2633d9359d2bd466ee9e5f486beb341a8e8e19df58e64e8d19e73312b1b301d86d2217f074d444892766009b2855b3ee0837f559bf7d69ab2d8129f6b3eeb008cd4b022086813a8681c5b0bae40e7cf453fae7097dfb732ce6f527d2c8feb715d45981246eab99d4c4e4e959835710bf586ba63f8a9029a4d03450c1484f9e82c58387675f8dba850f5b45a5ebcc9d1e312e615ab1eb4045899338d4cf7b6c78c99b2166e69f28cc096cf1ddee3ed7d8fe0a223ce093eb7db1a86ce8569be498e1b8c68459bc4fd5a463d949220d708969b7c9e62cb6d5499afd012d7d544663e35e9eb90fa3e64f6106c7f231182a98a7f687e8ae0b2437608255435240ae64625109c2a4f7f3ff5c0fb8d3af046a556e94f739df064fac6d49b3b740cf00a505e000a947c2f505b8ee707b162d8e25c4e03f562e5d7bfd826afaceb4a70d82b5817af2118cf85da43ae11b4c24a44ca112eb04519c591e93b9df73e9943b69c221c363292752ac842214f053ed7845975eabe6d3abd4a9dbcca2a368e9c4fb6e999aecba3077e3e4cc7eebd8b9fd1cdb11eb9ac432981557bd8681d9f237db94d18f008cf1cce3c27dc5c8cce05d4ccbac1c0075479dfb5c4ea65240a20845d125ebeecac19e1756e2e662fd54c9e80602532bfe3d442c755f5f0344f86fbe36a2fedfc0c0432abb850ebb86aae63b185c3f4496ade9be9c09c846a20d331282931df4f411d888dbf75f4627de7ccf4eeeda759ed9dcdd377b331a4886c77f298a30838d9c701998c132ed7e6b61c4bfcec1e47b56a23250e3d2eac56918f854dab407d90a0a345f203984f04155de5132702497a24f91
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. |
