Social Share Buttons

Overview

This element allows you to display a list of social share buttons that are useful on your blog or portfolio entries. There are 2 different styles and a big number on buttons to chose from.

Default Style: This is the default social share buttons.

Minimal: This style can be selected from the social share element options.

View more examples of social share buttons.

Code Snippets

How to use the snippets?

NOTE: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due to 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.

Shortcode

 [av_social_share title='Share this entry' style='' buttons='custom' share_facebook='aviaTBshare_facebook' share_twitter='aviaTBshare_twitter' share_gplus='aviaTBshare_gplus' share_linkedin='aviaTBshare_linkedin' share_mail='aviaTBshare_mail' custom_class='' admin_preview_bg='' av_uid='av-670mc8'] 

Customization

Change social share title on blog post without ALB

/**
 * Use the "avia_social_share_title" filter to change title of Social Share Buttons element
 *
 **/


add_filter('avia_social_share_title','new_share_title');
function new_share_title() {
$output = 'Share this post on:';
return $output;
}

Custom Styled Social Icons

To custom style to your social icons please use the CSS below.

Style 1

/*----------------------------------------
// CSS - Social Share style - 1 
//--------------------------------------*/

/* Social share title */
.av-share-link-description {

}

/* Hide tool tip */
.av-social-sharing-box .avia-related-tooltip {
  display: none !important;
}

/* Remove icon border */
#top .av-social-sharing-box .av-share-box ul li {    
    border-left-style: none;    
    display: inline-block;
    vertical-align: middle!important;
}

/* Icon style */
#top .av-social-sharing-box .av-share-link a {
   margin: 0 10px 0 0; 
   width: 50px!important;
   height: 50px!important;
   border-radius: 30px!important;
}

/* Icon Color */
.av-social-sharing-box .av-share-link a:before {
  color:#333;
  transition: all .5s ease;
}

/* Icon Color on hover */
.av-social-sharing-box .av-share-link:hover a:before {
  color:#FFF;
  transition: all .35s ease;
}

Style 2

/*----------------------------------------
// CSS - Social Share style - 2 
//--------------------------------------*/

/* Hide tool tip */
.av-social-sharing-box .avia-related-tooltip {
  display: none !important;
}

/* Icon border and spacing */
#top .av-social-sharing-box .av-share-box ul li {    
    border-left-style: none;    
    display: inline-block;
}

/* Icon style */
#top .av-social-sharing-box .av-share-link {
  /*border-radius: 30px!important;*/
   width: 30px!important;
   height: 30px!important;
   margin: 0 10px 0 0;    
}

#top .av-social-sharing-box .av-share-link a {   
   border:1px solid #000;
   padding: 0;
}

/* Link hover */

#top .av-social-sharing-box .av-share-link a:hover {
  background-color: #000!important;
  transition: all .35s ease;
}

/* Icon Color */
.av-social-sharing-box .av-share-link a:before {
  color:#333;
  transition: all .5s ease;

}

/* Icon Color on hover */
.av-social-sharing-box .av-share-link:hover a:before {
  color:#fff;
  transition: all .35s ease;
}

Style 3

/*----------------------------------------
// CSS - Social Share style - 3 
//--------------------------------------*/

/* Hide tool tip */
.av-social-sharing-box .avia-related-tooltip {
  display: none !important;
}

/* Remove icon border */
#top .av-social-sharing-box .av-share-box ul li {    
    border-left-style: none;    
    display: inline-block;
    vertical-align: middle!important;
   margin: 0 10px 0 0; 
}

/* Icon style */
#top .av-social-sharing-box .av-share-link a {
   width: 30px!important;
   height: 30px!important;
   border-radius: 30px:!important; 
   padding: 3px 0 !important;

}

/* Icon color */
.av-social-sharing-box .av-share-link a:before {
  color:#1d1d1b;
  transition: all .5s ease;
}

/* Icon color on hover */
.av-social-sharing-box .av-share-link a:hover:before {
  color:#1d1d1b;
  transition: all .35s ease;
}

/* Icon background color on hover */
#top .av-social-sharing-box .av-share-link a {
  /*background: none!important; */
  background: #f0f0f0;

}

#top .av-social-sharing-box .av-share-link a:hover:before {
  color:#f4f7f9;
}

Style 4

/*----------------------------------------
// CSS - Social Share style - 4
//--------------------------------------*/

/* Hide tool tip */
.av-social-sharing-box .avia-related-tooltip {
  display: none !important;
}

/* Remove icon border */
#top .av-social-sharing-box .av-share-box ul li {    
    border-left-style: none;    
    display: inline-block;
    vertical-align: middle!important;
   margin: 0 10px 0 0; 
}

/* Icon style */
#top .av-social-sharing-box .av-share-link a {
   width: 30px!important;
   height: 30px!important;
   border-radius: 30px:!important; 
   padding: 3px 0 !important;

}

/* Icon color */
.av-social-sharing-box .av-share-link a:before {
  color:#fff;
  transition: all .5s ease;
}

/* Icon */
#top .av-social-sharing-box .av-share-link a { 
  border-radius: 30px;
}

/* Back ground color */
#top .av-social-sharing-box .av-social-link-rss     a{color:#fff; background-color:#ffa133; }
#top .av-social-sharing-box .av-social-link-facebook  a{color:#fff; background-color:#37589b; }
#top .av-social-sharing-box .av-social-link-twitter   a{color:#fff; background-color:#46d4fe; }
#top .av-social-sharing-box .av-social-link-mail      a{color:#fff; background-color:#9fae37; }
#top .av-social-sharing-box .av-social-link-dribbble  a{color:#fff; background-color:#e44885; }
#top .av-social-sharing-box .av-social-link-linkedin  a{color:#fff; background-color:#419cca; }
#top .av-social-sharing-box .av-social-link-search    a{color:#fff; background-color:#222222; }
#top .av-social-sharing-box .av-social-link-gplus     a{color:#fff; background-color:#de5a49; }
#top .av-social-sharing-box .av-social-link-behance   a{color:#fff; background-color:#008cfa; }
#top .av-social-sharing-box .av-social-link-flickr    a{color:#fff; background-color:#ff0086; }
#top .av-social-sharing-box .av-social-link-forrst    a{color:#fff; background-color:#234317; }
#top .av-social-sharing-box .av-social-link-myspace   a{color:#fff; background-color:#000000; }
#top .av-social-sharing-box .av-social-link-tumblr    a{color:#fff; background-color:#345574; }
#top .av-social-sharing-box .av-social-link-vimeo     a{color:#fff; background-color:#31baff; }
#top .av-social-sharing-box .av-social-link-youtube   a{color:#fff; background-color:#a72b1d; }
#top .av-social-sharing-box .av-social-link-pinterest a{color:#fff; background-color:#cb2027; }
#top .av-social-sharing-box .av-social-link-skype     a{color:#fff; background-color:#12a5f4; }
#top .av-social-sharing-box .av-social-link-instagram a{color:#fff; background-color:#a67658; }

How to add Custom Social Icons to Enfold options.

Using Fontello-imported Icons

The following code will make Fontello-imported icons available as an option in Enfold > Social Profiles:

Note: you may need to change “fontello” to the name of the imported font (you can check that in Enfold > Import/Export > Iconfont Manager) and “ue800” for the icon code of the Icon you want to use (most of the times is ue800).

Note 2: If you are not using a child theme, please find following line in Functions.php file of parent theme

if(isset($avia_config[‘use_child_theme_functions_only’])) return;

and add your code right below that line.

Using images or non-Fontello icons

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 functions.php:

As there is no font-face file to use for this icon we’d need to manually set its contents via CSS:

In case of using an image

#top #wrap_all .av-social-link-kriesi a:before{
    content: "";
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    background: url(https://www.kriesi.at/wp-content/themes/kriesi/images/logo.png) no-repeat center center;
    background-size: contain;
}

In case of using a custom font

#top .av-social-link-kriesi a:before{
    content: "e900"; 
    font-family: "Kriesi Font";
}

Hover Background and Text color

New custom icons don’t have a background or text color change by default, you can add them that with the following CSS code:

#top #wrap_all .av-social-link-ICON_NAME:hover a{
    color:#fff; 
    background-color:#9fae37; 
}

Enable Social Share Section

The social share section, found on single 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 template file. We’ll use filters on our examples so that we can directly add it to the child theme.

If you want to enable it for pages created with the advance layout builder:

add_filter('avf_template_builder_content', 'avia_add_social_toolbar_template_builder', 10, 1);
function avia_add_social_toolbar_template_builder($content = "")
{
	$content .= avia_social_share_links(array(), false, '', false);
	$content .= '';
	return $content;
}

If you want to add it below the single product page featured image, you can use this but it will disable the sidebar:

Use this one if you simply want to add it below the single product page content:

In combination with wp conditionals, you can choose to hide or show the social share section on different pages, products or posts.

Display header icons on small screens.

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.

Code snippets:

 

/* Do not hide social bookmarks */
@media only screen and (max-width: 479px) {
.responsive #top #wrap_all #header .social_bookmarks {
    display: block;
}}

Resource