Share links

Ready to change up your share links? In this guide, we'll show you some easy examples of how to tweak and personalize share links. The filter allows you to add, remove, re-order, and customize icons.

New share link

<?php
/**
* Load font-awesome icons.
*/
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_style( 'font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css', false, '6.4.2' );
} );
/**
* Change icons.
*/
add_filter( 'flatsome_share_links', function ( $links, $args ) {
$links['threads'] = array(
'enabled' => true,
'atts' => array(
'href' => 'https://www.facebook.com/sharer.php?u=' . $args['link'], // Change https://www.facebook.com/sharer.php?u= to the URL for sharing a Thread
'data-label' => 'Threads',
'onclick' => $args['on_click'],
'rel' => 'noopener noreferrer nofollow',
'target' => '_blank',
'class' => $args['classes'] . ' threads',
'title' => 'Share on Threads',
'aria-label' => 'Share on Threads',
),
'icon' => '<i class="fa-brands fa-threads"></i>',
'priority' => 5,
);
return $links;
}, 10, 2 );
view raw functions.php hosted with ❤ by GitHub

/* Give the new threads share link a color */
.button.threads:not(.is-outline), .button.threads:hover {
color: #000!important;
}
view raw style.css hosted with ❤ by GitHub

Change priority (order) and icon

<?php
/**
* Load font-awesome icons.
*/
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_style( 'font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css', false, '6.2.1' );
} );
/**
* Change priority (order) and icon for instagram.
*/
add_filter( 'flatsome_share_links', function ( $links, $args ) {
$links['facebook']['priority'] = 50;
$links['facebook']['icon'] = '<i class="fa-brands fa-square-facebook"></i>';
return $links;
}, 10, 2 );
view raw functions.php hosted with ❤ by GitHub

Remove nofollow

<?php
/**
* Remove 'nofollow' on all share links example.
*/
add_filter( 'flatsome_share_links', function ( $links, $args ) {
foreach ( $links as $key => $link ) {
if ( empty( $link['atts']['rel'] ) ) continue;
$links[ $key ]['atts']['rel'] = implode( ' ', array_diff( explode( ' ', $link['atts']['rel'] ), array( 'nofollow' ) ) );
}
return $links;
}, 10, 2 );
view raw functions.php hosted with ❤ by GitHub

Disable tooltip

<?php
/**
* Disable tooltips on all share links example.
*/
add_filter( 'flatsome_share_links', function ( $links, $args ) {
foreach ( $links as $key => $link ) {
// Remove title attribute for native tooltip.
if ( ! empty( $link['atts']['title'] ) ) {
unset( $links[ $key ]['atts']['title'] );
}
// Additionally remove tooltip class (optional).
if ( empty( $link['atts']['class'] ) ) continue;
$links[ $key ]['atts']['class'] = implode( ' ', array_diff( explode( ' ', $link['atts']['class'] ), array( 'tooltip' ) ) );
}
return $links;
}, 10, 2 );
view raw functions.php hosted with ❤ by GitHub

Requirements

  • 3.17.0 or greater