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?

Add the CSS Snippets to Enfold child theme styles.
Add the JS and PHP scripts to your child theme functions.php file.
Shortcodes can be used in a text area in pages, posts, sliders and widget areas. Enable debug mode to view the page shortcode.
Enable custom CSS class name support to add your class names to the theme elements.
Disable script merging and clear the cache to view the changes on the frontend.

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;
}

#top .av-share-box ul { 
   border: none;
}

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

/* Icon style */
.av-share-box ul li a {
   width: 30px!important;
   height: 30px!important;
   border-radius: 30px!important; 
   padding: 3px 0 !important;

}

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

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

/* Icon background color on hover */
.av-share-box ul li a {
  background: #f0f0f0;

}

.av-share-box ul li 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:

// Register new icon as a theme icon
function avia_add_custom_icon($icons) {
$icons['icon_name'] = array( 'font' =>'fontello', 'icon' => 'ue800');
return $icons;
}
add_filter('avf_default_icons','avia_add_custom_icon', 10, 1);

// Add new icon as an option for social icons
function avia_add_custom_social_icon($icons) {
$icons['Icon Label'] = 'icon_name';
return $icons;
}
add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);

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). If you would like to add an icon from default font, please use “entypo-fontello” for “font”.

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:

// We'll use the Kriesi.at glyph for this example
function avia_add_custom_social_icon($icons) {
$icons['Kriesi'] = 'kriesi';
return $icons;
}
add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);

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; 
}

Display Custom Social Icons in Social Share Box

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 > Editor and adjust it to match your custom icon


add_filter('avia_social_share_link_arguments', 'avia_add_social_share_link_arguments', 10, 1);
function avia_add_social_share_link_arguments($args){
    $tiktok = array('tiktok' => array("encode"=>true, "encode_urls"=>false, "pattern" => "https://www.tiktok.com/", 'label' => __("Share on TikTok",'avia_framework')));
    $args = array_merge($tiktok, $args);
    return $args;
}

The example above adds TikTok share button. Please do not forget that you would need to add the custom social icon as the first step.

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;
}

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:

CSS

 

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

Resource

Contributed video:

Social Share Element Tutorial