{"id":320,"date":"2017-02-19T04:23:17","date_gmt":"2017-02-19T04:23:17","guid":{"rendered":"http:\/\/localhost\/enfold\/documentation\/?p=320"},"modified":"2023-01-24T16:47:52","modified_gmt":"2023-01-24T16:47:52","slug":"social-share-buttons","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/social-share-buttons\/","title":{"rendered":"Social Share Buttons"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-bgsl4-d43dfe639295b46e5dacbaf0d63f2758\">\n#top .av-special-heading.av-bgsl4-d43dfe639295b46e5dacbaf0d63f2758{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-bgsl4-d43dfe639295b46e5dacbaf0d63f2758 .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-bgsl4-d43dfe639295b46e5dacbaf0d63f2758 .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-bgsl4-d43dfe639295b46e5dacbaf0d63f2758 av-special-heading-h1 blockquote modern-quote  avia-builder-el-0  el_before_av_hr  avia-builder-el-first '><h1 class='av-special-heading-tag '  itemprop=\"headline\"  > Social Share Buttons<\/h1><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div>\n<div  class='hr av-8nzlfs-9f1c5d09d3916eef8587dea9d711eee8 hr-default  avia-builder-el-1  el_after_av_heading  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-8i1zmg-3e7c99b9d12579d22f094097eefb10ea '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Overview<\/h2>\n<\/div><\/section>\n<section  class='av_textblock_section av-8apfpc-ca111a1fdb07d6df2c0e1dd9691a14f5 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>This element allows you to display a list of\u00a0social share buttons that are useful on your\u00a0blog or portfolio entries. There are 2 different styles and a big number on buttons to chose from.<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-86b4mo-a2ce0dac5becbac0eae186851cc5bcc3 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Default Style: <\/strong>This is the default social share buttons.<\/p>\n<\/div><\/section>\n<div  class='av-social-sharing-box av-7ypvfs-98328ff8b7d14b16b36fd6756ed078d6 av-social-sharing-box-default  avia-builder-el-5  el_after_av_textblock  el_before_av_hr  av-social-sharing-box-fullwidth'><div class=\"av-share-box\"><ul class=\"av-share-box-list noLightbox\"><li class='av-share-link av-social-link-facebook avia_social_iconfont' ><a target=\"_blank\" aria-label=\"Share on Facebook\" href='https:\/\/www.facebook.com\/sharer.php?u=https:\/\/kriesi.at\/documentation\/enfold\/social-share-buttons\/&#038;t=Social%20Share%20Buttons' data-av_icon='\ue8f3' data-av_iconfont='entypo-fontello'  title='' data-avia-related-tooltip='Share on Facebook'><span class='avia_hidden_link_text'>Share on Facebook<\/span><\/a><\/li><li class='av-share-link av-social-link-twitter avia_social_iconfont' ><a target=\"_blank\" aria-label=\"Share on X\" href='https:\/\/twitter.com\/share?text=Social%20Share%20Buttons&#038;url=https:\/\/kriesi.at\/documentation\/enfold\/?p=320' data-av_icon='\ue932' data-av_iconfont='entypo-fontello'  title='' data-avia-related-tooltip='Share on X'><span class='avia_hidden_link_text'>Share on X<\/span><\/a><\/li><li class='av-share-link av-social-link-linkedin avia_social_iconfont' ><a target=\"_blank\" aria-label=\"Share on LinkedIn\" href='https:\/\/linkedin.com\/shareArticle?mini=true&#038;title=Social%20Share%20Buttons&#038;url=https:\/\/kriesi.at\/documentation\/enfold\/social-share-buttons\/' data-av_icon='\ue8fc' data-av_iconfont='entypo-fontello'  title='' data-avia-related-tooltip='Share on LinkedIn'><span class='avia_hidden_link_text'>Share on LinkedIn<\/span><\/a><\/li><li class='av-share-link av-social-link-mail avia_social_iconfont' ><a  aria-label=\"Share by Mail\" href='mailto:?subject=Social%20Share%20Buttons&#038;body=https:\/\/kriesi.at\/documentation\/enfold\/social-share-buttons\/' data-av_icon='\ue805' data-av_iconfont='entypo-fontello'  title='' data-avia-related-tooltip='Share by Mail'><span class='avia_hidden_link_text'>Share by Mail<\/span><\/a><\/li><\/ul><\/div><\/div>\n<div  class='hr av-7vt5dk-ae3ba2bb1f98d8ddea3206b114fde551 hr-default  avia-builder-el-6  el_after_av_social_share  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-7qc2gw-25496b000cf6ac508d0d1343175d5b2e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Minimal: <\/strong>This style can be selected from the social share element options.<\/p>\n<\/div><\/section>\n<div  class='av-social-sharing-box av-7l6xcg-34d6d246d32bb802b7a0098fa45412f5 av-social-sharing-box-minimal  avia-builder-el-8  el_after_av_textblock  el_before_av_textblock  av-social-sharing-box-fullwidth'><div class=\"av-share-box\"><ul class=\"av-share-box-list noLightbox\"><li class='av-share-link av-social-link-facebook avia_social_iconfont' ><a target=\"_blank\" aria-label=\"Share on Facebook\" href='https:\/\/www.facebook.com\/sharer.php?u=https:\/\/kriesi.at\/documentation\/enfold\/social-share-buttons\/&#038;t=Social%20Share%20Buttons' data-av_icon='\ue8f3' data-av_iconfont='entypo-fontello'  title='' data-avia-related-tooltip='Share on Facebook'><span class='avia_hidden_link_text'>Share on Facebook<\/span><\/a><\/li><li class='av-share-link av-social-link-twitter avia_social_iconfont' ><a target=\"_blank\" aria-label=\"Share on X\" href='https:\/\/twitter.com\/share?text=Social%20Share%20Buttons&#038;url=https:\/\/kriesi.at\/documentation\/enfold\/?p=320' data-av_icon='\ue932' data-av_iconfont='entypo-fontello'  title='' data-avia-related-tooltip='Share on X'><span class='avia_hidden_link_text'>Share on X<\/span><\/a><\/li><li class='av-share-link av-social-link-linkedin avia_social_iconfont' ><a target=\"_blank\" aria-label=\"Share on LinkedIn\" href='https:\/\/linkedin.com\/shareArticle?mini=true&#038;title=Social%20Share%20Buttons&#038;url=https:\/\/kriesi.at\/documentation\/enfold\/social-share-buttons\/' data-av_icon='\ue8fc' data-av_iconfont='entypo-fontello'  title='' data-avia-related-tooltip='Share on LinkedIn'><span class='avia_hidden_link_text'>Share on LinkedIn<\/span><\/a><\/li><li class='av-share-link av-social-link-mail avia_social_iconfont' ><a  aria-label=\"Share by Mail\" href='mailto:?subject=Social%20Share%20Buttons&#038;body=https:\/\/kriesi.at\/documentation\/enfold\/social-share-buttons\/' data-av_icon='\ue805' data-av_iconfont='entypo-fontello'  title='' data-avia-related-tooltip='Share by Mail'><span class='avia_hidden_link_text'>Share by Mail<\/span><\/a><\/li><\/ul><\/div><\/div>\n<section  class='av_textblock_section av-qkd9c-aaa8012ec418c68a8b3651caa8653e0f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>View more examples of <a href=\"https:\/\/kriesi.at\/themes\/enfold-2017\/elements\/social-share-buttons\/\" target=\"_blank\" rel=\"noopener\">social share buttons<\/a>.<\/p>\n<\/div><\/section>\n<div  class='hr av-7583o8-97d5d023968f77a098a493d57104bd86 hr-default  avia-builder-el-10  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-6yzl40-a24589bc590824350ebcf100facba52b '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Code Snippets<\/h2>\n<\/div><\/section>\n<div  class='avia-builder-widget-area clearfix  avia-builder-el-12  el_after_av_textblock  el_before_av_hr '><div id=\"text-3\" class=\"widget clearfix widget_text\">\t\t\t<div class=\"textwidget\"><p><strong>How to use the snippets?<\/strong><\/p>\n<ul>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-css\/\" target=\"_blank\" rel=\"noopener\">CSS Snippets<\/a> to Enfold child theme styles.<\/li>\n<li>Add the <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/add-custom-js-or-php-script\/\" target=\"_blank\" rel=\"noopener\">JS and PHP scripts<\/a> to your\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-install-enfold-theme\/#why-child-theme\" target=\"_blank\" rel=\"noopener\">child theme<\/a>\u00a0functions.php file.<\/li>\n<li>Shortcodes can be used in a text area in pages, posts, sliders and widget areas.\u00a0Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#debug-mode\" target=\"_blank\" rel=\"noopener\">debug mode<\/a>\u00a0to view the page shortcode.<\/li>\n<li>Enable\u00a0<a href=\"https:\/\/kriesi.at\/documentation\/enfold\/intro-to-advanced-layout-builder\/#turn-on-custom-css-class-field-for-all-alb-elements\">custom CSS class name support<\/a>\u00a0to\u00a0add your\u00a0class names to the theme elements.<\/li>\n<li>Disable <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/how-to-clear-the-cache\/\" target=\"_blank\" rel=\"noopener\">script merging and clear the cache<\/a>\u00a0to view the changes on the frontend.<\/li>\n<\/ul>\n<p><strong>NOTE<\/strong>: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due\u00a0to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.<\/p>\n<\/div>\n\t\t<\/div><\/div>\n<div  class='hr av-6r208w-8aaf15be7491e90d2f5e63257ec6c847 hr-default  avia-builder-el-13  el_after_av_sidebar  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-6k8ldc-a18b155f413aabe690a8bfc36548f6ce '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Shortcode<\/h3>\n<\/div><\/section>\n\n<div  class='hr av-625gs8-656c99e7053df2a91189ccccaddf4b1e hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-5x7eag-3975c11a2a6a48e4f3c61724a15dae0f '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock h-tag'  itemprop=\"text\" ><h2>Customization<\/h2>\n<\/div><\/section>\n<div  class='hr av-21o94-7f5bb546b77340c22a193bcc4a2ea6a9 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-5hijew-6ccaa16ffc64d7b51b8dde835ac275fe '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Change social share title on blog post without ALB<\/h3>\n<\/div><\/section>\n\n<div  class='hr av-iyaqw-9b72c465e3ea67216c35077783e8a569 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-5445o8-44baac089a0d30a36a5e0d14fe8e86e3 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Custom Styled Social Icons<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-4u5hmw-525ee938108555cc816a5d784defd2c1 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>To custom style to your social icons please use the CSS below.<\/p>\n<\/div><\/section>\n<div  class='hr av-4ppvhs-267740b217b0002155011739d85590fe hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-4iffyo-ebaa692831a58a1c9814acb2e07db267 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Style 1<\/strong><\/p>\n<\/div><\/section>\n<div  class='av-social-sharing-box av-4egxk8-08e3c5c769aafec3bf57908b739689e3 av-social-sharing-box-minimal  avia-builder-el-16  avia-builder-el-no-sibling  social-style-1 av-social-sharing-box-fullwidth'><div class=\"av-share-box\"><ul class=\"av-share-box-list noLightbox\"><li class='av-share-link av-social-link-facebook avia_social_iconfont' ><a target=\"_blank\" aria-label=\"Share on Facebook\" href='https:\/\/www.facebook.com\/sharer.php?u=https:\/\/kriesi.at\/documentation\/enfold\/social-share-buttons\/&#038;t=Social%20Share%20Buttons' data-av_icon='\ue8f3' data-av_iconfont='entypo-fontello'  title='' data-avia-related-tooltip='Share on Facebook'><span class='avia_hidden_link_text'>Share on Facebook<\/span><\/a><\/li><li class='av-share-link av-social-link-twitter avia_social_iconfont' ><a target=\"_blank\" aria-label=\"Share on X\" href='https:\/\/twitter.com\/share?text=Social%20Share%20Buttons&#038;url=https:\/\/kriesi.at\/documentation\/enfold\/?p=320' data-av_icon='\ue932' data-av_iconfont='entypo-fontello'  title='' data-avia-related-tooltip='Share on X'><span class='avia_hidden_link_text'>Share on X<\/span><\/a><\/li><li class='av-share-link av-social-link-mail avia_social_iconfont' ><a  aria-label=\"Share by Mail\" href='mailto:?subject=Social%20Share%20Buttons&#038;body=https:\/\/kriesi.at\/documentation\/enfold\/social-share-buttons\/' data-av_icon='\ue805' data-av_iconfont='entypo-fontello'  title='' data-avia-related-tooltip='Share by Mail'><span class='avia_hidden_link_text'>Share by Mail<\/span><\/a><\/li><\/ul><\/div><\/div>\n<section  class='av_textblock_section av-49h0pk-d3abbc3948f3e638d30acbc2613845e3 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre>\/*----------------------------------------\r\n\/\/ CSS - Social Share style - 1 \r\n\/\/--------------------------------------*\/\r\n\r\n\/* Social share title *\/\r\n.av-share-link-description {\r\n\r\n}\r\n\r\n\/* Hide tool tip *\/\r\n.av-social-sharing-box .avia-related-tooltip {\r\n  display: none !important;\r\n}\r\n\r\n\/* Remove icon border *\/\r\n#top .av-social-sharing-box .av-share-box ul li {    \r\n    border-left-style: none;    \r\n    display: inline-block;\r\n    vertical-align: middle!important;\r\n}\r\n\r\n\/* Icon style *\/\r\n#top .av-social-sharing-box .av-share-link a {\r\n   margin: 0 10px 0 0; \r\n   width: 50px!important;\r\n   height: 50px!important;\r\n   border-radius: 30px!important;\r\n}\r\n\r\n\/* Icon Color *\/\r\n.av-social-sharing-box .av-share-link a:before {\r\n  color:#333;\r\n  transition: all .5s ease;\r\n}\r\n\r\n\/* Icon Color on hover *\/\r\n.av-social-sharing-box .av-share-link:hover a:before {\r\n  color:#FFF;\r\n  transition: all .35s ease;\r\n}<\/pre>\n<\/div><\/section>\n<div  class='hr av-42s6yg-cfa7eed12a187046fc67821f87ae5e58 hr-default  avia-builder-el-17  el_after_av_codeblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3xma20-b636a1b0a1da9f98f0ecca42e22284ee '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Style 2<\/strong><\/p>\n<\/div><\/section>\n<div  class='av-social-sharing-box av-djfbc-1f6300443941a86a0611e1c020d08cf3 av-social-sharing-box-minimal  social-style-2 av-social-sharing-box-fullwidth'><div class=\"av-share-box\"><ul class=\"av-share-box-list noLightbox\"><li class='av-share-link av-social-link-facebook avia_social_iconfont' ><a target=\"_blank\" aria-label=\"Share on Facebook\" href='https:\/\/www.facebook.com\/sharer.php?u=https:\/\/kriesi.at\/documentation\/enfold\/social-share-buttons\/&#038;t=Social%20Share%20Buttons' data-av_icon='\ue8f3' data-av_iconfont='entypo-fontello'  title='' data-avia-related-tooltip='Share on Facebook'><span class='avia_hidden_link_text'>Share on Facebook<\/span><\/a><\/li><li class='av-share-link av-social-link-twitter avia_social_iconfont' ><a target=\"_blank\" aria-label=\"Share on X\" href='https:\/\/twitter.com\/share?text=Social%20Share%20Buttons&#038;url=https:\/\/kriesi.at\/documentation\/enfold\/?p=320' data-av_icon='\ue932' data-av_iconfont='entypo-fontello'  title='' data-avia-related-tooltip='Share on X'><span class='avia_hidden_link_text'>Share on X<\/span><\/a><\/li><li class='av-share-link av-social-link-linkedin avia_social_iconfont' ><a target=\"_blank\" aria-label=\"Share on LinkedIn\" href='https:\/\/linkedin.com\/shareArticle?mini=true&#038;title=Social%20Share%20Buttons&#038;url=https:\/\/kriesi.at\/documentation\/enfold\/social-share-buttons\/' data-av_icon='\ue8fc' data-av_iconfont='entypo-fontello'  title='' data-avia-related-tooltip='Share on LinkedIn'><span class='avia_hidden_link_text'>Share on LinkedIn<\/span><\/a><\/li><li class='av-share-link av-social-link-mail avia_social_iconfont' ><a  aria-label=\"Share by Mail\" href='mailto:?subject=Social%20Share%20Buttons&#038;body=https:\/\/kriesi.at\/documentation\/enfold\/social-share-buttons\/' data-av_icon='\ue805' data-av_iconfont='entypo-fontello'  title='' data-avia-related-tooltip='Share by Mail'><span class='avia_hidden_link_text'>Share by Mail<\/span><\/a><\/li><\/ul><\/div><\/div>\n<section  class='av_textblock_section av-3jlirc-8cc27f0b1b012b4ceb09bbf53f72a641 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre>\/*----------------------------------------\r\n\/\/ CSS - Social Share style - 2 \r\n\/\/--------------------------------------*\/\r\n\r\n\/* Hide tool tip *\/\r\n.av-social-sharing-box .avia-related-tooltip {\r\n  display: none !important;\r\n}\r\n\r\n\/* Icon border and spacing *\/\r\n#top .av-social-sharing-box .av-share-box ul li {    \r\n    border-left-style: none;    \r\n    display: inline-block;\r\n}\r\n\r\n\/* Icon style *\/\r\n#top .av-social-sharing-box .av-share-link {\r\n  \/*border-radius: 30px!important;*\/\r\n   width: 30px!important;\r\n   height: 30px!important;\r\n   margin: 0 10px 0 0;    \r\n}\r\n\r\n#top .av-social-sharing-box .av-share-link a {   \r\n   border:1px solid #000;\r\n   padding: 0;\r\n}\r\n\r\n\/* Link hover *\/\r\n\r\n#top .av-social-sharing-box .av-share-link a:hover {\r\n  background-color: #000!important;\r\n  transition: all .35s ease;\r\n}\r\n\r\n\/* Icon Color *\/\r\n.av-social-sharing-box .av-share-link a:before {\r\n  color:#333;\r\n  transition: all .5s ease;\r\n\r\n}\r\n\r\n\/* Icon Color on hover *\/\r\n.av-social-sharing-box .av-share-link:hover a:before {\r\n  color:#fff;\r\n  transition: all .35s ease;\r\n}<\/pre>\n<\/div><\/section>\n<div  class='hr av-3eu3go-dfa7ec1b9e328bece3d97515bd89888a hr-default  avia-builder-el-19  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-3819f4-b88da3f0b8bbbc7f059b971e76d82960 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Style 3<\/strong><\/p>\n<\/div><\/section>\n<div  class='av-social-sharing-box av-azv0o-48434ad866d8fd74e1d586e9c03ea62f av-social-sharing-box-minimal  social-style-3 av-social-sharing-box-fullwidth'><div class=\"av-share-box\"><ul class=\"av-share-box-list noLightbox\"><li class='av-share-link av-social-link-facebook avia_social_iconfont' ><a target=\"_blank\" aria-label=\"Share on Facebook\" href='https:\/\/www.facebook.com\/sharer.php?u=https:\/\/kriesi.at\/documentation\/enfold\/social-share-buttons\/&#038;t=Social%20Share%20Buttons' data-av_icon='\ue8f3' data-av_iconfont='entypo-fontello'  title='' data-avia-related-tooltip='Share on Facebook'><span class='avia_hidden_link_text'>Share on Facebook<\/span><\/a><\/li><li class='av-share-link av-social-link-twitter avia_social_iconfont' ><a target=\"_blank\" aria-label=\"Share on X\" href='https:\/\/twitter.com\/share?text=Social%20Share%20Buttons&#038;url=https:\/\/kriesi.at\/documentation\/enfold\/?p=320' data-av_icon='\ue932' data-av_iconfont='entypo-fontello'  title='' data-avia-related-tooltip='Share on X'><span class='avia_hidden_link_text'>Share on X<\/span><\/a><\/li><li class='av-share-link av-social-link-linkedin avia_social_iconfont' ><a target=\"_blank\" aria-label=\"Share on LinkedIn\" href='https:\/\/linkedin.com\/shareArticle?mini=true&#038;title=Social%20Share%20Buttons&#038;url=https:\/\/kriesi.at\/documentation\/enfold\/social-share-buttons\/' data-av_icon='\ue8fc' data-av_iconfont='entypo-fontello'  title='' data-avia-related-tooltip='Share on LinkedIn'><span class='avia_hidden_link_text'>Share on LinkedIn<\/span><\/a><\/li><li class='av-share-link av-social-link-mail avia_social_iconfont' ><a  aria-label=\"Share by Mail\" href='mailto:?subject=Social%20Share%20Buttons&#038;body=https:\/\/kriesi.at\/documentation\/enfold\/social-share-buttons\/' data-av_icon='\ue805' data-av_iconfont='entypo-fontello'  title='' data-avia-related-tooltip='Share by Mail'><span class='avia_hidden_link_text'>Share by Mail<\/span><\/a><\/li><\/ul><\/div><\/div>\n<section  class='av_textblock_section av-2x1hqg-9ac3c70707b2ce2e1e0e051e44f376f8 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre>\/*----------------------------------------\r\n\/\/ CSS - Social Share style - 3 \r\n\/\/--------------------------------------*\/\r\n\r\n\/* Hide tool tip *\/\r\n.av-social-sharing-box .avia-related-tooltip {\r\n  display: none !important;\r\n}\r\n\r\n#top .av-share-box ul { \r\n   border: none;\r\n}\r\n\r\n\/* Remove icon border *\/\r\n.av-share-box ul li {    \r\n    border-left-style: none;    \r\n    display: inline-block;\r\n    vertical-align: middle!important;\r\n   margin: 0 10px 0 0; \r\n}\r\n\r\n\/* Icon style *\/\r\n.av-share-box ul li a {\r\n   width: 30px!important;\r\n   height: 30px!important;\r\n   border-radius: 30px!important; \r\n   padding: 3px 0 !important;\r\n\r\n}\r\n\r\n\/* Icon color *\/\r\n.av-share-box ul li a:before {\r\n  color:#1d1d1b;\r\n  transition: all .5s ease;\r\n}\r\n\r\n\/* Icon color on hover *\/\r\n.av-share-box ul li a:hover:before {\r\n  color:#1d1d1b;\r\n  transition: all .35s ease;\r\n}\r\n\r\n\/* Icon background color on hover *\/\r\n.av-share-box ul li a {\r\n  background: #f0f0f0;\r\n\r\n}\r\n\r\n.av-share-box ul li a:hover:before {\r\n  color:#f4f7f9;\r\n}<\/pre>\n<\/div><\/section>\n<div  class='hr av-2oy3rk-9428e2e18864de01367458bc36cfdb8d hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-2jugnk-e1f90fa2081a03ac825b784cfb7b138c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Style 4<\/strong><\/p>\n<\/div><\/section>\n<div  class='av-social-sharing-box av-2eqs00-e947479da5b44d74b17c6a7f6cf3c249 av-social-sharing-box-minimal  social-style-4 av-social-sharing-box-fullwidth'><div class=\"av-share-box\"><ul class=\"av-share-box-list noLightbox\"><li class='av-share-link av-social-link-facebook avia_social_iconfont' ><a target=\"_blank\" aria-label=\"Share on Facebook\" href='https:\/\/www.facebook.com\/sharer.php?u=https:\/\/kriesi.at\/documentation\/enfold\/social-share-buttons\/&#038;t=Social%20Share%20Buttons' data-av_icon='\ue8f3' data-av_iconfont='entypo-fontello'  title='' data-avia-related-tooltip='Share on Facebook'><span class='avia_hidden_link_text'>Share on Facebook<\/span><\/a><\/li><li class='av-share-link av-social-link-twitter avia_social_iconfont' ><a target=\"_blank\" aria-label=\"Share on X\" href='https:\/\/twitter.com\/share?text=Social%20Share%20Buttons&#038;url=https:\/\/kriesi.at\/documentation\/enfold\/?p=320' data-av_icon='\ue932' data-av_iconfont='entypo-fontello'  title='' data-avia-related-tooltip='Share on X'><span class='avia_hidden_link_text'>Share on X<\/span><\/a><\/li><li class='av-share-link av-social-link-linkedin avia_social_iconfont' ><a target=\"_blank\" aria-label=\"Share on LinkedIn\" href='https:\/\/linkedin.com\/shareArticle?mini=true&#038;title=Social%20Share%20Buttons&#038;url=https:\/\/kriesi.at\/documentation\/enfold\/social-share-buttons\/' data-av_icon='\ue8fc' data-av_iconfont='entypo-fontello'  title='' data-avia-related-tooltip='Share on LinkedIn'><span class='avia_hidden_link_text'>Share on LinkedIn<\/span><\/a><\/li><li class='av-share-link av-social-link-mail avia_social_iconfont' ><a  aria-label=\"Share by Mail\" href='mailto:?subject=Social%20Share%20Buttons&#038;body=https:\/\/kriesi.at\/documentation\/enfold\/social-share-buttons\/' data-av_icon='\ue805' data-av_iconfont='entypo-fontello'  title='' data-avia-related-tooltip='Share by Mail'><span class='avia_hidden_link_text'>Share by Mail<\/span><\/a><\/li><\/ul><\/div><\/div>\n<section  class='av_textblock_section av-27vy74-72f3ff12cf648199c323f83a7dd26e70 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><pre>\/*----------------------------------------\r\n\/\/ CSS - Social Share style - 4\r\n\/\/--------------------------------------*\/\r\n\r\n\/* Hide tool tip *\/\r\n.av-social-sharing-box .avia-related-tooltip {\r\n  display: none !important;\r\n}\r\n\r\n\/* Remove icon border *\/\r\n#top .av-social-sharing-box .av-share-box ul li {    \r\n    border-left-style: none;    \r\n    display: inline-block;\r\n    vertical-align: middle!important;\r\n   margin: 0 10px 0 0; \r\n}\r\n\r\n\/* Icon style *\/\r\n#top .av-social-sharing-box .av-share-link a {\r\n   width: 30px!important;\r\n   height: 30px!important;\r\n   border-radius: 30px:!important; \r\n   padding: 3px 0 !important;\r\n\r\n}\r\n\r\n\/* Icon color *\/\r\n.av-social-sharing-box .av-share-link a:before {\r\n  color:#fff;\r\n  transition: all .5s ease;\r\n}\r\n\r\n\/* Icon *\/\r\n#top .av-social-sharing-box .av-share-link a { \r\n  border-radius: 30px;\r\n}\r\n\r\n\/* Back ground color *\/\r\n#top .av-social-sharing-box .av-social-link-rss     a{color:#fff; background-color:#ffa133; }\r\n#top .av-social-sharing-box .av-social-link-facebook  a{color:#fff; background-color:#37589b; }\r\n#top .av-social-sharing-box .av-social-link-twitter   a{color:#fff; background-color:#46d4fe; }\r\n#top .av-social-sharing-box .av-social-link-mail      a{color:#fff; background-color:#9fae37; }\r\n#top .av-social-sharing-box .av-social-link-dribbble  a{color:#fff; background-color:#e44885; }\r\n#top .av-social-sharing-box .av-social-link-linkedin  a{color:#fff; background-color:#419cca; }\r\n#top .av-social-sharing-box .av-social-link-search    a{color:#fff; background-color:#222222; }\r\n#top .av-social-sharing-box .av-social-link-gplus     a{color:#fff; background-color:#de5a49; }\r\n#top .av-social-sharing-box .av-social-link-behance   a{color:#fff; background-color:#008cfa; }\r\n#top .av-social-sharing-box .av-social-link-flickr    a{color:#fff; background-color:#ff0086; }\r\n#top .av-social-sharing-box .av-social-link-forrst    a{color:#fff; background-color:#234317; }\r\n#top .av-social-sharing-box .av-social-link-myspace   a{color:#fff; background-color:#000000; }\r\n#top .av-social-sharing-box .av-social-link-tumblr    a{color:#fff; background-color:#345574; }\r\n#top .av-social-sharing-box .av-social-link-vimeo     a{color:#fff; background-color:#31baff; }\r\n#top .av-social-sharing-box .av-social-link-youtube   a{color:#fff; background-color:#a72b1d; }\r\n#top .av-social-sharing-box .av-social-link-pinterest a{color:#fff; background-color:#cb2027; }\r\n#top .av-social-sharing-box .av-social-link-skype     a{color:#fff; background-color:#12a5f4; }\r\n#top .av-social-sharing-box .av-social-link-instagram a{color:#fff; background-color:#a67658; }<\/pre>\n<\/div><\/section>\n<div  class='hr av-20aqjs-911bc52147e1569ed4b663e4f04d9f13 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-1we5lc-6deecdade755b08030ffb2a67d5f6e85 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>How to add Custom Social Icons to Enfold options.<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-1s7yyg-97660b45d9a846f2edfc8badf9a0c6cd '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h4>Using Fontello-imported Icons<\/h4>\n<p>The following code will make\u00a0<a class=\"mfp-iframe lightbox-added\" href=\"https:\/\/vimeo.com\/75743285\">Fontello-imported<\/a>\u00a0icons available as an option in Enfold &gt; Social Profiles:<br \/>\n<br \/>\n<strong>Note:<\/strong> you may need to change \u201cfontello\u201d to the name of the imported font (you can check that in Enfold &gt; Import\/Export &gt; Iconfont Manager) and \u201cue800\u201d for the icon code of the Icon you want to use (most of the times is ue800). If you would like to add an icon from default font, please use &#8220;entypo-fontello&#8221; for &#8220;font&#8221;.<\/p>\n<p><strong>Note 2:<\/strong>\u00a0If you are\u00a0<strong>not<\/strong>\u00a0using a child theme, please find following line in Functions.php file of parent theme<\/p>\n<p>if(isset($avia_config[&#8216;use_child_theme_functions_only&#8217;])) return;<\/p>\n<p>and add your code right below that line.<\/p>\n<h4>Using images or non-Fontello icons<\/h4>\n<p>In case the icon you want to use is not available in Fontello or can not be imported to it because its an image (jpg, png, etc) you can do it by using the following code in\u00a0<strong>functions.php<\/strong>:<br \/>\n<br \/>\nAs there is no font-face file to use for this icon we\u2019d need to manually set its contents via CSS:<\/p>\n<h4>In case of using an image<\/h4>\n<pre>#top #wrap_all .av-social-link-kriesi a:before{\r\n    content: \"\";\r\n    width: 20px;\r\n    height: 20px;\r\n    display: inline-block;\r\n    vertical-align: middle;\r\n    background: url(https:\/\/www.kriesi.at\/wp-content\/themes\/kriesi\/images\/logo.png) no-repeat center center;\r\n    background-size: contain;\r\n}<\/pre>\n<h4>In case of using a custom font<\/h4>\n<pre>#top .av-social-link-kriesi a:before{\r\n    content: \"e900\"; \r\n    font-family: \"Kriesi Font\";\r\n}<\/pre>\n<h4>Hover Background and Text color<\/h4>\n<p>New custom icons don\u2019t have a background or text color change by default, you can add them that with the following CSS code:<\/p>\n<pre>#top #wrap_all .av-social-link-ICON_NAME:hover a{\r\n    color:#fff; \r\n    background-color:#9fae37; \r\n}<\/pre>\n<\/div><\/section>\n<div  class='hr av-1kfvmg-08709230efc4b3ba4c2d08c5d459d9bd hr-default  avia-builder-el-22  el_after_av_codeblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-1f0ig0-27ce8e83709b69f0197a30b289a30e4d '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Display Custom Social Icons in Social Share Box<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-19a4ns-d5e6fec79b292ece3b12f082d4486336 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>If you would like to add your custom social icon to Share Box, please add the following code to the bottom of the functions.php file of your child theme in Appearance &gt; Editor and adjust it to match your custom icon<\/p>\n<pre><code>\r\nadd_filter('avia_social_share_link_arguments', 'avia_add_social_share_link_arguments', 10, 1);\r\nfunction avia_add_social_share_link_arguments($args){\r\n    $tiktok = array('tiktok' =&gt; array(\"encode\"=&gt;true, \"encode_urls\"=&gt;false, \"pattern\" =&gt; \"https:\/\/www.tiktok.com\/\", 'label' =&gt; __(\"Share on TikTok\",'avia_framework')));\r\n    $args = array_merge($tiktok, $args);\r\n    return $args;\r\n}\r\n<\/code><\/pre>\n<p>The example above adds TikTok share button. Please do not forget that you would need to <a href=\"#how-to-add-custom-social-icons-to-enfold-options\">add the custom social icon<\/a> as the first step.<\/p>\n<\/div><\/section>\n<div  class='hr av-6vxk-c0a765a096e48d2658d96e6e514e1c6b hr-default  avia-builder-el-25  el_after_av_textblock  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-fktag-5951a07cd85a8daecb5113fe40832b46 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Enable Social Share Section<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-7nyns-105087443bbe9cb57b005ac13d070fea '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The social share section, found on\u00a0single post pages, are disabled for pages and products by default. If you want to enable it on these pages, use the avia_social_share_links() function. There are various ways that you can use this function, either by using a filter or by adding it directly on a\u00a0template file. We\u2019ll use filters on our examples so that we can directly add it to\u00a0the child theme.<\/p>\n<p>If you want to enable it for pages created with the advance layout builder:<\/p>\n<\/div><\/section>\n\n<div  class='hr av-qhax4-706d49667d5536d6b3acdbb20961c1b5 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-1f0ig0-6-ce81f74678d9977cd9317dbeabf7dd24 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Display header icons on small screens.<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-1f0ig0-4-c326814ecf5e880758a7022c417c6c95 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>By default, the social media icons are hidden on small screens to avoid the header elements running into each other. To display the icons in small screens please use the below code.<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-10qzk8-c2f8e2189b9454f6051448608003fbc1 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Code snippets:<\/strong><\/p>\n<\/div><\/section>\n<div  class='togglecontainer av-z9hmw-a8bfece1f8abfd368a61526a4be83172 av-minimal-toggle toggle_close_all' >\n<section class='av_toggle_section av-1ntso-cec9835c2e6833c2239323b4354c908f'  itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div role=\"tablist\" class=\"single_toggle\" data-tags=\"{All} \"  ><p id='toggle-toggle-id-1' data-fake-id='#toggle-id-1' class='toggler  av-title-above '  itemprop=\"headline\"  role='tab' tabindex='0' aria-controls='toggle-id-1' data-slide-speed=\"200\" data-title=\"CSS\" data-title-open=\"\" data-aria_collapsed=\"Click to expand: CSS\" data-aria_expanded=\"Click to collapse: CSS\">CSS<span class=\"toggle_icon\"><span class=\"vert_icon\"><\/span><span class=\"hor_icon\"><\/span><\/span><\/p><div id='toggle-id-1' aria-labelledby='toggle-toggle-id-1' role='region' class='toggle_wrap  av-title-above'  ><div class='toggle_content invers-color '  itemprop=\"text\" ><pre><code> \r\n\r\n\/* Do not hide social bookmarks *\/\r\n@media only screen and (max-width: 479px) {\r\n.responsive #top #wrap_all #header .social_bookmarks {\r\n    display: block;\r\n}}\r\n\r\n<\/code><\/pre>\n<\/div><\/div><\/div><\/section>\n<\/div>\n<div  class='hr av-qhax4-5-2e9d578de3a3c6efdb72d43df463d1d4 hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-kyefc-0b9bf3151edec0af07265a64698e5133 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h2>Resource<\/h2>\n<\/div><\/section>\n<div  class='hr av-fzo0g-cc5646f6c0deb60080d13f79f962b82a hr-default'><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-b0gmg-dfb629dde1b354e4f9a1ff7ac1757437 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p><strong>Contributed video<\/strong>:<\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=oScukzxXj58\">Social Share Element Tutorial <\/a><\/p>\n<\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":9,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[2,6],"tags":[16],"class_list":["post-320","post","type-post","status-publish","format-standard","hentry","category-documentation","category-content-elements","tag-content-elements","documentation","content-elements"],"modified_by":"Yigit","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/320","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/comments?post=320"}],"version-history":[{"count":14,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/320\/revisions"}],"predecessor-version":[{"id":13513,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/320\/revisions\/13513"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=320"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=320"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}