I’ll build this as a complete drop-in template-parts/components/social-share.php component for your RX theme, with safe escaping, many networks, copy link, print/email, schema-friendly labels, mobile share API support, and reusable hooks/options.
Below is a big advanced social-share.php component for your RX Theme.
Place it here:
rx-theme/template-parts/components/social-share.phpThen call it anywhere like:
<?php get_template_part( 'template-parts/components/social-share' ); ?>Or with custom args:
<?php
get_template_part(
'template-parts/components/social-share',
null,
array(
'style' => 'buttons',
'show_count' => false,
'sticky' => false,
'show_labels' => true,
)
);
?><?php
/**
* RX Theme Social Share Component
*
* File: template-parts/components/social-share.php
*
* Features:
* - Facebook share
* - X/Twitter share
* - LinkedIn share
* - Pinterest share
* - WhatsApp share
* - Telegram share
* - Reddit share
* - Tumblr share
* - Blogger share
* - VK share
* - Pocket save
* - Evernote save
* - Skype share
* - Viber share
* - Line share
* - Mastodon generic share
* - Email share
* - Print button
* - Copy link button
* - Native Web Share API button
* - Safe escaping
* - RTL support friendly
* - Accessibility labels
* - Works inside or outside the Loop
* - Args support via get_template_part()
* - Filter hooks for developers
*
* Usage:
* get_template_part( 'template-parts/components/social-share' );
*
* Usage with args:
* get_template_part(
* 'template-parts/components/social-share',
* null,
* array(
* 'style' => 'buttons',
* 'show_labels' => true,
* 'sticky' => false,
* )
* );
*
* @package RX_Theme
*/
defined( 'ABSPATH' ) || exit;
/**
* ------------------------------------------------------------
* 1. Default Arguments
* ------------------------------------------------------------
*/
$rx_social_share_defaults = array(
'post_id' => 0,
'title' => '',
'url' => '',
'excerpt' => '',
'image' => '',
'style' => 'buttons', // buttons, icons, minimal, rounded, pill.
'align' => 'left', // left, center, right.
'size' => 'normal', // small, normal, large.
'show_heading' => true,
'heading_text' => __( 'Share this article', 'rx-theme' ),
'show_labels' => true,
'show_native_share' => true,
'show_copy_link' => true,
'show_print' => true,
'show_email' => true,
'open_new_tab' => true,
'nofollow' => true,
'noopener' => true,
'noreferrer' => true,
'sticky' => false,
'sticky_position' => 'left', // left, right, bottom.
'enable_tracking_attrs' => true,
'enable_inline_css' => true,
'enable_inline_js' => true,
'wrapper_class' => '',
'button_class' => '',
'icon_only_text' => __( 'Share on', 'rx-theme' ),
'copy_success_text' => __( 'Link copied!', 'rx-theme' ),
'copy_error_text' => __( 'Copy failed', 'rx-theme' ),
'native_share_text' => __( 'Share', 'rx-theme' ),
'email_subject_prefix' => __( 'Recommended article:', 'rx-theme' ),
'email_body_intro' => __( 'I thought you might like this article:', 'rx-theme' ),
'networks' => array(
'facebook',
'x',
'linkedin',
'pinterest',
'whatsapp',
'telegram',
'reddit',
'tumblr',
'pocket',
'line',
'viber',
'skype',
'vk',
'blogger',
'evernote',
'mastodon',
),
);
/**
* Merge args if this component was loaded with get_template_part().
*/
$rx_social_share_args = isset( $args ) && is_array( $args ) ? $args : array();
$rx_social_share_args = wp_parse_args(
$rx_social_share_args,
$rx_social_share_defaults
);
/**
* Developer filter.
*/
$rx_social_share_args = apply_filters( 'rx_theme_social_share_args', $rx_social_share_args );
/**
* ------------------------------------------------------------
* 2. Resolve Post Data
* ------------------------------------------------------------
*/
$post_id = absint( $rx_social_share_args['post_id'] );
if ( ! $post_id ) {
$post_id = get_the_ID();
}
if ( ! $post_id && is_singular() ) {
global $post;
if ( $post instanceof WP_Post ) {
$post_id = absint( $post->ID );
}
}
if ( ! $post_id ) {
return;
}
$post_object = get_post( $post_id );
if ( ! $post_object instanceof WP_Post ) {
return;
}
$title = $rx_social_share_args['title'] ? $rx_social_share_args['title'] : get_the_title( $post_id );
$url = $rx_social_share_args['url'] ? $rx_social_share_args['url'] : get_permalink( $post_id );
if ( ! $url ) {
return;
}
$excerpt = $rx_social_share_args['excerpt'];
if ( ! $excerpt ) {
if ( has_excerpt( $post_id ) ) {
$excerpt = get_the_excerpt( $post_id );
} else {
$excerpt = wp_trim_words( wp_strip_all_tags( $post_object->post_content ), 28 );
}
}
$image = $rx_social_share_args['image'];
if ( ! $image && has_post_thumbnail( $post_id ) ) {
$image = get_the_post_thumbnail_url( $post_id, 'full' );
}
/**
* Clean values.
*/
$title = wp_strip_all_tags( $title );
$excerpt = wp_strip_all_tags( $excerpt );
$url = esc_url_raw( $url );
$image = $image ? esc_url_raw( $image ) : '';
$encoded_title = rawurlencode( $title );
$encoded_url = rawurlencode( $url );
$encoded_excerpt = rawurlencode( $excerpt );
$encoded_image = rawurlencode( $image );
/**
* ------------------------------------------------------------
* 3. Link Relation and Target
* ------------------------------------------------------------
*/
$link_target = $rx_social_share_args['open_new_tab'] ? '_blank' : '_self';
$rel_parts = array();
if ( $rx_social_share_args['nofollow'] ) {
$rel_parts[] = 'nofollow';
}
if ( $rx_social_share_args['noopener'] ) {
$rel_parts[] = 'noopener';
}
if ( $rx_social_share_args['noreferrer'] ) {
$rel_parts[] = 'noreferrer';
}
$link_rel = implode( ' ', array_unique( array_filter( $rel_parts ) ) );
/**
* ------------------------------------------------------------
* 4. SVG Icon Helper
* ------------------------------------------------------------
*/
if ( ! function_exists( 'rx_theme_social_share_icon' ) ) {
/**
* Return SVG icon markup.
*
* @param string $network Network key.
* @return string
*/
function rx_theme_social_share_icon( $network ) {
$icons = array(
'facebook' => '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M22 12.07C22 6.48 17.52 2 11.93 2S2 6.48 2 12.07c0 5.02 3.66 9.18 8.44 9.95v-7.04H7.9v-2.91h2.54V9.85c0-2.5 1.49-3.88 3.77-3.88 1.09 0 2.23.19 2.23.19v2.45h-1.25c-1.24 0-1.62.77-1.62 1.56v1.9h2.76l-.44 2.91h-2.32v7.04C18.34 21.25 22 17.09 22 12.07z"/></svg>',
'x' => '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18.9 2.25h3.07l-6.7 7.66 7.88 10.41h-6.17l-4.83-6.32-5.53 6.32H3.55l7.17-8.2L3.16 2.25h6.33l4.37 5.78 5.04-5.78zm-1.08 16.24h1.7L8.56 3.98H6.73l11.09 14.51z"/></svg>',
'linkedin' => '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.95v5.66H9.34V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.61 0 4.27 2.38 4.27 5.47v6.27zM5.32 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.1 20.45H3.54V9H7.1v11.45z"/></svg>',
'pinterest'=> '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12.02 2C6.5 2 3 5.62 3 9.59c0 1.84 1.03 4.13 2.67 4.86.25.11.39.06.45-.18.04-.18.27-1.08.37-1.5.03-.13.02-.24-.09-.36-.54-.64-.97-1.82-.97-2.92 0-2.77 2.1-5.45 5.68-5.45 3.09 0 5.25 2.11 5.25 5.13 0 3.41-1.72 5.77-3.96 5.77-1.24 0-2.17-1.03-1.87-2.29.35-1.5 1.03-3.11 1.03-4.19 0-.97-.52-1.78-1.59-1.78-1.26 0-2.27 1.3-2.27 3.05 0 1.11.38 1.86.38 1.86s-1.25 5.27-1.48 6.25c-.25 1.06-.15 2.54-.04 3.5.13.11.27.22.41.32.7-.78 1.62-2.01 1.96-3.03.18-.55.91-3.46.91-3.46.48.91 1.86 1.67 3.34 1.67 4.39 0 7.56-4.04 7.56-9.06C20.74 4.45 17.96 2 12.02 2z"/></svg>',
'whatsapp' => '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20.52 3.48A11.86 11.86 0 0 0 12.08 0C5.5 0 .15 5.35.15 11.93c0 2.1.55 4.16 1.6 5.97L0 24l6.25-1.64a11.93 11.93 0 0 0 5.83 1.49h.01c6.58 0 11.93-5.35 11.93-11.93 0-3.19-1.24-6.18-3.5-8.44zM12.09 21.83h-.01c-1.76 0-3.49-.47-5-1.36l-.36-.21-3.71.97.99-3.62-.23-.37a9.88 9.88 0 0 1-1.51-5.31c0-5.46 4.45-9.9 9.92-9.9 2.65 0 5.14 1.03 7.01 2.9a9.85 9.85 0 0 1 2.9 7c0 5.46-4.44 9.9-9.9 9.9zm5.43-7.41c-.3-.15-1.77-.87-2.04-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.95 1.17-.17.2-.35.22-.65.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.76-1.66-2.06-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.61-.92-2.2-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.8.37-.27.3-1.05 1.02-1.05 2.49s1.08 2.9 1.23 3.1c.15.2 2.12 3.23 5.14 4.53.72.31 1.28.5 1.72.64.72.23 1.37.2 1.88.12.57-.09 1.77-.72 2.02-1.42.25-.7.25-1.3.17-1.42-.08-.12-.27-.2-.57-.35z"/></svg>',
'telegram' => '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9.04 15.49 8.7 20.2c.49 0 .7-.21.95-.46l2.29-2.19 4.75 3.48c.87.48 1.49.23 1.72-.8l3.12-14.64h.01c.28-1.3-.47-1.81-1.32-1.5L1.86 11.11C.6 11.6.62 12.29 1.65 12.61l4.7 1.46L17.27 7.2c.51-.34.98-.15.6.19L9.04 15.49z"/></svg>',
'reddit' => '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M24 11.78a2.75 2.75 0 0 0-4.65-1.98c-1.88-1.21-4.43-1.98-7.25-2.05l1.23-3.87 3.35.79a2.1 2.1 0 1 0 .24-1.05l-3.82-.9a.55.55 0 0 0-.65.36l-1.48 4.65c-2.95.05-5.63.83-7.58 2.08A2.75 2.75 0 1 0 .36 14.2c-.01.12-.02.25-.02.38 0 3.77 5.2 6.83 11.61 6.83s11.61-3.06 11.61-6.83c0-.12 0-.24-.02-.36.3-.48.46-1.04.46-1.64zM7.3 13.32a1.62 1.62 0 1 1 0 3.24 1.62 1.62 0 0 1 0-3.24zm8.5 5.05c-1.1 1.1-3.21 1.18-3.84 1.18-.63 0-2.74-.08-3.84-1.18a.55.55 0 0 1 .78-.78c.7.7 2.17.86 3.06.86s2.36-.16 3.06-.86a.55.55 0 0 1 .78.78zm.87-1.81a1.62 1.62 0 1 1 0-3.24 1.62 1.62 0 0 1 0 3.24z"/></svg>',
'tumblr' => '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M14.78 21.9c-3.78 0-6.58-1.94-6.58-6.58V9.16H5.9V5.82c3.78-.98 4.85-4.23 5.06-6.02h3.31v5.43h4.14v3.93h-4.14v5.36c0 1.62.82 2.18 2.12 2.18.63 0 1.31-.2 1.9-.45v4.13c-.84.86-2.24 1.52-3.51 1.52z"/></svg>',
'pocket' => '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.9 4.5c-.16-.36-.52-.6-.92-.6H3.02c-.4 0-.76.24-.92.6-.06.14-.1.29-.1.44v6.59c0 5.51 4.48 9.99 10 9.99s10-4.48 10-9.99V4.94c0-.15-.03-.3-.1-.44zM12.6 15.34a.85.85 0 0 1-1.2 0L6.7 10.63a.85.85 0 0 1 1.2-1.2l4.1 4.1 4.1-4.1a.85.85 0 0 1 1.2 1.2l-4.7 4.71z"/></svg>',
'line' => '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19.37 10.38c0-3.45-3.36-6.25-7.49-6.25S4.39 6.93 4.39 10.38c0 3.09 2.74 5.68 6.45 6.17.25.05.59.17.68.38.08.19.05.49.03.69l-.11.66c-.03.19-.15.74.65.4.8-.34 4.33-2.55 5.91-4.37 1.09-1.2 1.37-2.42 1.37-3.93zM9.02 12.45H7.53a.4.4 0 0 1-.4-.4V8.97a.4.4 0 0 1 .8 0v2.68h1.09a.4.4 0 0 1 0 .8zm1.55-.4a.4.4 0 0 1-.8 0V8.97a.4.4 0 0 1 .8 0v3.08zm3.41 0a.4.4 0 0 1-.72.24l-1.58-2.15v1.91a.4.4 0 0 1-.8 0V8.97a.4.4 0 0 1 .72-.24l1.58 2.15V8.97a.4.4 0 0 1 .8 0v3.08zm2.71-2.68h-1.09v.54h1.09a.4.4 0 1 1 0 .8h-1.09v.94h1.09a.4.4 0 1 1 0 .8h-1.49a.4.4 0 0 1-.4-.4V8.97a.4.4 0 0 1 .4-.4h1.49a.4.4 0 0 1 0 .8z"/></svg>',
'viber' => '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19.46 4.44C17.64 2.78 14.36 2 12.04 2h-.08c-2.32 0-5.6.78-7.42 2.44-1.58 1.45-2.17 3.66-2.24 6.41-.07 2.75.15 7.9 4.79 9.3v2.13c0 .77.95 1.12 1.45.53l2.16-2.5c.42.02.84.03 1.26.03h.08c2.32 0 5.6-.78 7.42-2.44 1.58-1.45 2.17-3.66 2.24-6.41.07-2.75-.15-5.6-2.24-7.05zM12.03 18.73h-.07c-.47 0-.94-.02-1.4-.05a.8.8 0 0 0-.67.28l-1.13 1.31v-1.31a.8.8 0 0 0-.62-.78c-3.68-.9-4.25-4.57-4.19-7.28.06-2.39.5-4.12 1.71-5.23 1.43-1.31 4.27-2 6.3-2h.07c2.03 0 4.87.69 6.3 2 1.21 1.11 1.65 2.84 1.71 5.23.06 2.39-.5 6.06-4.19 7.28-1.17.38-2.51.55-3.82.55zM15.73 13.9c-.3-.16-.7-.34-1.05-.11l-.61.45c-.31.23-.75.21-1.08-.01a7.31 7.31 0 0 1-2.24-2.24c-.22-.33-.24-.77-.01-1.08l.45-.61c.23-.35.05-.75-.11-1.05l-.59-1.08c-.2-.37-.58-.57-.97-.47-.5.13-1.1.5-1.46.96-.35.45-.53.96-.39 1.52.53 2.16 3.98 5.61 6.14 6.14.56.14 1.07-.04 1.52-.39.46-.36.83-.96.96-1.46.1-.39-.1-.77-.47-.97l-1.09-.6zM14.15 6.52a.61.61 0 1 0-.13 1.21 3.14 3.14 0 0 1 2.82 2.81.61.61 0 0 0 1.21-.13 4.37 4.37 0 0 0-3.9-3.89z"/></svg>',
'skype' => '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18.02 13.96c.13-.57.13-1.19.01-1.8-.46-2.33-2.53-3.18-4.75-3.73-1.4-.35-3-.6-3-1.48 0-.7.76-1.05 1.81-1.05 1.29 0 1.92.45 2.34 1.02.36.49.75.84 1.45.84.83 0 1.47-.61 1.47-1.39 0-.88-.71-1.68-1.73-2.17a7.3 7.3 0 0 0-3.39-.75c-2.99 0-5.22 1.4-5.22 3.79 0 2.54 2.4 3.18 4.49 3.68 1.65.4 3.23.68 3.23 1.79 0 .79-.83 1.24-2.13 1.24-1.46 0-2.24-.55-2.81-1.29-.38-.5-.78-.81-1.46-.81-.86 0-1.5.62-1.5 1.41 0 1.02.86 1.91 2.03 2.46a8.25 8.25 0 0 0 3.69.76c2.75 0 4.84-.98 5.47-2.53zM12 22a9.9 9.9 0 0 1-5.24-1.5 4.17 4.17 0 0 1-5.27-5.27A9.9 9.9 0 0 1 0 10a10 10 0 0 1 15.24-8.5 4.17 4.17 0 0 1 5.27 5.27A10 10 0 0 1 12 22z"/></svg>',
'vk' => '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M13.16 18.09c-7.29 0-11.45-5-11.62-13.34h3.65c.12 6.12 2.82 8.71 4.96 9.24V4.75h3.44v5.27c2.11-.23 4.33-2.64 5.08-5.27h3.44c-.57 3.24-2.97 5.65-4.67 6.64 1.7.8 4.42 2.91 5.46 6.7h-3.79c-.82-2.52-2.85-4.47-5.52-4.74v4.74h-.42z"/></svg>',
'blogger' => '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.61 10.35c-.16-.92-.98-1.62-1.94-1.62h-.66a.73.73 0 0 1-.73-.73c0-3.31-2.68-6-6-6H7.85A5.85 5.85 0 0 0 2 7.85v8.3A5.85 5.85 0 0 0 7.85 22h8.3A5.85 5.85 0 0 0 22 16.15v-4.84c0-.33-.09-.65-.39-.96zM7.65 7.15h4.82a1.2 1.2 0 0 1 0 2.4H7.65a1.2 1.2 0 1 1 0-2.4zm8.78 9.7H7.65a1.2 1.2 0 1 1 0-2.4h8.78a1.2 1.2 0 1 1 0 2.4z"/></svg>',
'evernote' => '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.5 6.32c-.22-1.16-.91-1.77-1.52-1.99-.66-.24-2-.49-3.54-.66-.72-.08-1.48-.14-2.18-.18-.43-.03-.79.33-.79.76v2.08c0 .83-.67 1.5-1.5 1.5H9.93c-.43 0-.79.36-.76.79.05.95.14 2.11.27 3.17.34 2.7 1.05 3.43 2.87 3.43.38 0 1.02-.02 1.72-.06.7-.04 1.53.55 1.53 1.31 0 .84-.56 1.17-1.61 1.17-.84 0-1.2-.2-1.49-.76-.15-.29-.45-.46-.78-.46h-1.29c-.49 0-.86.43-.79.91.33 2.13 1.93 2.95 4.35 2.95 2.86 0 4.68-1.29 4.68-4.14 0-.48-.04-1.37-.07-1.91-.02-.33.23-.62.56-.65l1.61-.12c.54-.04.98-.45 1.06-.99.28-1.89.19-4.34-.29-6.15zM6.27 2.7 2.68 6.29c-.42.42-.66 1-.66 1.59v10.66A3.46 3.46 0 0 0 5.48 22h11.14c-1.15-.72-1.77-1.84-2.06-3.02-.2.02-.39.03-.58.03-3.79 0-5.63-1.5-6.18-5.95-.18-1.45-.29-3.05-.33-4.1A2.46 2.46 0 0 1 9.93 6.4h1.52V4.25c0-.89.43-1.68 1.09-2.17H7.86c-.6 0-1.16.24-1.59.62z"/></svg>',
'mastodon' => '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20.94 5.99c-.31-2.3-2.31-4.11-4.74-4.46a24.37 24.37 0 0 0-8.4 0C5.37 1.88 3.37 3.69 3.06 5.99c-.47 3.52-.43 6.88.09 10.36.36 2.42 2.6 4.2 5.04 4.51 1.27.16 2.53.2 3.81.11 2.31-.16 3.6-.82 3.6-.82l-.08-1.78s-1.65.52-3.49.46c-1.83-.06-3.76-.2-4.06-2.48a4.65 4.65 0 0 1-.04-.64s1.79.44 4.07.54c1.39.06 2.7-.08 4.02-.24 2.54-.3 4.76-1.85 5.04-3.27.45-2.23.41-4.56-.12-6.75zM17.4 13.04h-2.24V7.56c0-1.16-.49-1.75-1.47-1.75-1.08 0-1.62.7-1.62 2.09v3h-2.22v-3c0-1.39-.54-2.09-1.62-2.09-.98 0-1.47.59-1.47 1.75v5.48H4.52V7.39c0-1.16.29-2.08.88-2.76.61-.68 1.4-1.03 2.39-1.03 1.14 0 2 .44 2.58 1.31L12 7.64l1.63-2.73c.58-.87 1.44-1.31 2.58-1.31.99 0 1.78.35 2.39 1.03.59.68.88 1.6.88 2.76v5.65z"/></svg>',
'email' => '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4.24-8 5-8-5V6l8 5 8-5v2.24z"/></svg>',
'print' => '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19 8H5a3 3 0 0 0-3 3v5h4v4h12v-4h4v-5a3 3 0 0 0-3-3zM8 18v-5h8v5H8zm9-12V2H7v4h10zm2 7a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/></svg>',
'copy' => '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M16 1H4a2 2 0 0 0-2 2v12h2V3h12V1zm3 4H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 16H8V7h11v14z"/></svg>',
'native' => '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11A2.99 2.99 0 1 0 15 5c0 .24.04.47.09.7L8.04 9.81a3 3 0 1 0 0 4.38l7.12 4.16c-.05.21-.08.43-.08.65a2.92 2.92 0 1 0 2.92-2.92z"/></svg>',
);
$network = sanitize_key( $network );
return isset( $icons[ $network ] ) ? $icons[ $network ] : $icons['native'];
}
}
/**
* ------------------------------------------------------------
* 5. Build Network Data
* ------------------------------------------------------------
*/
$share_text = $title . ' ' . $url;
$email_subject = trim( $rx_social_share_args['email_subject_prefix'] . ' ' . $title );
$email_body = trim( $rx_social_share_args['email_body_intro'] . "\n\n" . $title . "\n" . $url );
$networks = array(
'facebook' => array(
'label' => __( 'Facebook', 'rx-theme' ),
'url' => 'https://www.facebook.com/sharer/sharer.php?u=' . $encoded_url,
'type' => 'link',
),
'x' => array(
'label' => __( 'X', 'rx-theme' ),
'url' => 'https://twitter.com/intent/tweet?url=' . $encoded_url . '&text=' . $encoded_title,
'type' => 'link',
),
'linkedin' => array(
'label' => __( 'LinkedIn', 'rx-theme' ),
'url' => 'https://www.linkedin.com/sharing/share-offsite/?url=' . $encoded_url,
'type' => 'link',
),
'pinterest' => array(
'label' => __( 'Pinterest', 'rx-theme' ),
'url' => 'https://pinterest.com/pin/create/button/?url=' . $encoded_url . '&description=' . $encoded_title . ( $image ? '&media=' . $encoded_image : '' ),
'type' => 'link',
),
'whatsapp' => array(
'label' => __( 'WhatsApp', 'rx-theme' ),
'url' => 'https://api.whatsapp.com/send?text=' . rawurlencode( $share_text ),
'type' => 'link',
),
'telegram' => array(
'label' => __( 'Telegram', 'rx-theme' ),
'url' => 'https://t.me/share/url?url=' . $encoded_url . '&text=' . $encoded_title,
'type' => 'link',
),
'reddit' => array(
'label' => __( 'Reddit', 'rx-theme' ),
'url' => 'https://www.reddit.com/submit?url=' . $encoded_url . '&title=' . $encoded_title,
'type' => 'link',
),
'tumblr' => array(
'label' => __( 'Tumblr', 'rx-theme' ),
'url' => 'https://www.tumblr.com/widgets/share/tool?canonicalUrl=' . $encoded_url . '&title=' . $encoded_title . '&caption=' . $encoded_excerpt,
'type' => 'link',
),
'pocket' => array(
'label' => __( 'Pocket', 'rx-theme' ),
'url' => 'https://getpocket.com/save?url=' . $encoded_url . '&title=' . $encoded_title,
'type' => 'link',
),
'line' => array(
'label' => __( 'Line', 'rx-theme' ),
'url' => 'https://social-plugins.line.me/lineit/share?url=' . $encoded_url,
'type' => 'link',
),
'viber' => array(
'label' => __( 'Viber', 'rx-theme' ),
'url' => 'viber://forward?text=' . rawurlencode( $share_text ),
'type' => 'link',
),
'skype' => array(
'label' => __( 'Skype', 'rx-theme' ),
'url' => 'https://web.skype.com/share?url=' . $encoded_url . '&text=' . $encoded_title,
'type' => 'link',
),
'vk' => array(
'label' => __( 'VK', 'rx-theme' ),
'url' => 'https://vk.com/share.php?url=' . $encoded_url . '&title=' . $encoded_title . '&description=' . $encoded_excerpt . ( $image ? '&image=' . $encoded_image : '' ),
'type' => 'link',
),
'blogger' => array(
'label' => __( 'Blogger', 'rx-theme' ),
'url' => 'https://www.blogger.com/blog-this.g?u=' . $encoded_url . '&n=' . $encoded_title . '&t=' . $encoded_excerpt,
'type' => 'link',
),
'evernote' => array(
'label' => __( 'Evernote', 'rx-theme' ),
'url' => 'https://www.evernote.com/clip.action?url=' . $encoded_url . '&title=' . $encoded_title,
'type' => 'link',
),
'mastodon' => array(
'label' => __( 'Mastodon', 'rx-theme' ),
'url' => 'https://mastodonshare.com/?text=' . rawurlencode( $share_text ),
'type' => 'link',
),
'email' => array(
'label' => __( 'Email', 'rx-theme' ),
'url' => 'mailto:?subject=' . rawurlencode( $email_subject ) . '&body=' . rawurlencode( $email_body ),
'type' => 'link',
),
'print' => array(
'label' => __( 'Print', 'rx-theme' ),
'url' => '#',
'type' => 'print',
),
'copy' => array(
'label' => __( 'Copy Link', 'rx-theme' ),
'url' => '#',
'type' => 'copy',
),
'native' => array(
'label' => $rx_social_share_args['native_share_text'],
'url' => '#',
'type' => 'native',
),
);
/**
* Add optional buttons.
*/
$active_networks = array();
if ( $rx_social_share_args['show_native_share'] ) {
$active_networks[] = 'native';
}
$active_networks = array_merge(
$active_networks,
array_map( 'sanitize_key', (array) $rx_social_share_args['networks'] )
);
if ( $rx_social_share_args['show_email'] ) {
$active_networks[] = 'email';
}
if ( $rx_social_share_args['show_print'] ) {
$active_networks[] = 'print';
}
if ( $rx_social_share_args['show_copy_link'] ) {
$active_networks[] = 'copy';
}
$active_networks = array_values( array_unique( array_filter( $active_networks ) ) );
/**
* Developer filter for networks.
*/
$networks = apply_filters( 'rx_theme_social_share_networks', $networks, $post_id, $rx_social_share_args );
/**
* ------------------------------------------------------------
* 6. Wrapper Classes
* ------------------------------------------------------------
*/
$style = sanitize_html_class( $rx_social_share_args['style'] );
$align = sanitize_html_class( $rx_social_share_args['align'] );
$size = sanitize_html_class( $rx_social_share_args['size'] );
$sticky_position = sanitize_html_class( $rx_social_share_args['sticky_position'] );
$wrapper_classes = array(
'rx-social-share',
'rx-social-share--style-' . $style,
'rx-social-share--align-' . $align,
'rx-social-share--size-' . $size,
);
if ( $rx_social_share_args['sticky'] ) {
$wrapper_classes[] = 'rx-social-share--sticky';
$wrapper_classes[] = 'rx-social-share--sticky-' . $sticky_position;
}
if ( ! $rx_social_share_args['show_labels'] ) {
$wrapper_classes[] = 'rx-social-share--icon-only';
}
if ( is_rtl() ) {
$wrapper_classes[] = 'rx-social-share--rtl';
}
if ( $rx_social_share_args['wrapper_class'] ) {
$extra_wrapper_classes = explode( ' ', $rx_social_share_args['wrapper_class'] );
foreach ( $extra_wrapper_classes as $extra_class ) {
$wrapper_classes[] = sanitize_html_class( $extra_class );
}
}
$wrapper_class = implode( ' ', array_unique( array_filter( $wrapper_classes ) ) );
$button_extra_class = '';
if ( $rx_social_share_args['button_class'] ) {
$button_extra_class = implode(
' ',
array_map(
'sanitize_html_class',
explode( ' ', $rx_social_share_args['button_class'] )
)
);
}
/**
* ------------------------------------------------------------
* 7. Tracking Data Attributes
* ------------------------------------------------------------
*/
$tracking_attrs = '';
if ( $rx_social_share_args['enable_tracking_attrs'] ) {
$tracking_attrs = sprintf(
' data-rx-post-id="%1$d" data-rx-post-title="%2$s" data-rx-post-url="%3$s"',
absint( $post_id ),
esc_attr( $title ),
esc_url( $url )
);
}
/**
* ------------------------------------------------------------
* 8. Inline CSS
* ------------------------------------------------------------
*/
if ( $rx_social_share_args['enable_inline_css'] ) :
?>
<style>
.rx-social-share {
--rx-share-gap: 10px;
--rx-share-radius: 12px;
--rx-share-bg: #f4f6f8;
--rx-share-bg-hover: #111827;
--rx-share-color: #111827;
--rx-share-color-hover: #ffffff;
--rx-share-border: rgba(17, 24, 39, 0.12);
--rx-share-shadow: 0 10px 25px rgba(17, 24, 39, 0.08);
margin: 24px 0;
position: relative;
width: 100%;
}
.rx-social-share__heading {
font-size: 18px;
font-weight: 700;
line-height: 1.3;
margin: 0 0 12px;
}
.rx-social-share__list {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--rx-share-gap);
list-style: none;
margin: 0;
padding: 0;
}
.rx-social-share--align-center .rx-social-share__list {
justify-content: center;
}
.rx-social-share--align-right .rx-social-share__list {
justify-content: flex-end;
}
.rx-social-share__item {
list-style: none;
margin: 0;
padding: 0;
}
.rx-social-share__button {
align-items: center;
background: var(--rx-share-bg);
border: 1px solid var(--rx-share-border);
border-radius: var(--rx-share-radius);
color: var(--rx-share-color);
cursor: pointer;
display: inline-flex;
font-size: 14px;
font-weight: 700;
gap: 8px;
line-height: 1;
min-height: 42px;
padding: 11px 14px;
text-decoration: none;
transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
user-select: none;
vertical-align: middle;
white-space: nowrap;
}
.rx-social-share__button:hover,
.rx-social-share__button:focus {
background: var(--rx-share-bg-hover);
border-color: var(--rx-share-bg-hover);
box-shadow: var(--rx-share-shadow);
color: var(--rx-share-color-hover);
outline: none;
text-decoration: none;
transform: translateY(-2px);
}
.rx-social-share__button:focus-visible {
outline: 3px solid rgba(59, 130, 246, 0.45);
outline-offset: 3px;
}
.rx-social-share__icon {
display: inline-flex;
height: 18px;
width: 18px;
}
.rx-social-share__icon svg {
display: block;
fill: currentColor;
height: 18px;
width: 18px;
}
.rx-social-share__label {
display: inline-flex;
}
.rx-social-share__screen-reader {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
.rx-social-share--icon-only .rx-social-share__button {
border-radius: 999px;
height: 42px;
justify-content: center;
padding: 0;
width: 42px;
}
.rx-social-share--icon-only .rx-social-share__label {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
.rx-social-share--size-small .rx-social-share__button {
font-size: 12px;
min-height: 34px;
padding: 8px 10px;
}
.rx-social-share--size-small.rx-social-share--icon-only .rx-social-share__button {
height: 34px;
width: 34px;
}
.rx-social-share--size-large .rx-social-share__button {
font-size: 16px;
min-height: 50px;
padding: 14px 18px;
}
.rx-social-share--size-large.rx-social-share--icon-only .rx-social-share__button {
height: 50px;
width: 50px;
}
.rx-social-share--style-minimal .rx-social-share__button {
background: transparent;
border-color: transparent;
padding-left: 4px;
padding-right: 4px;
}
.rx-social-share--style-minimal .rx-social-share__button:hover,
.rx-social-share--style-minimal .rx-social-share__button:focus {
background: transparent;
box-shadow: none;
color: var(--rx-share-bg-hover);
}
.rx-social-share--style-rounded .rx-social-share__button {
border-radius: 999px;
}
.rx-social-share--style-pill .rx-social-share__button {
border-radius: 999px;
padding-left: 18px;
padding-right: 18px;
}
.rx-social-share__button--facebook {
--rx-share-bg-hover: #1877f2;
}
.rx-social-share__button--x {
--rx-share-bg-hover: #000000;
}
.rx-social-share__button--linkedin {
--rx-share-bg-hover: #0a66c2;
}
.rx-social-share__button--pinterest {
--rx-share-bg-hover: #bd081c;
}
.rx-social-share__button--whatsapp {
--rx-share-bg-hover: #25d366;
}
.rx-social-share__button--telegram {
--rx-share-bg-hover: #229ed9;
}
.rx-social-share__button--reddit {
--rx-share-bg-hover: #ff4500;
}
.rx-social-share__button--tumblr {
--rx-share-bg-hover: #35465c;
}
.rx-social-share__button--pocket {
--rx-share-bg-hover: #ef4056;
}
.rx-social-share__button--line {
--rx-share-bg-hover: #06c755;
}
.rx-social-share__button--viber {
--rx-share-bg-hover: #7360f2;
}
.rx-social-share__button--skype {
--rx-share-bg-hover: #00aff0;
}
.rx-social-share__button--vk {
--rx-share-bg-hover: #0077ff;
}
.rx-social-share__button--blogger {
--rx-share-bg-hover: #f57d00;
}
.rx-social-share__button--evernote {
--rx-share-bg-hover: #00a82d;
}
.rx-social-share__button--mastodon {
--rx-share-bg-hover: #6364ff;
}
.rx-social-share__button--email {
--rx-share-bg-hover: #4b5563;
}
.rx-social-share__button--print {
--rx-share-bg-hover: #374151;
}
.rx-social-share__button--copy {
--rx-share-bg-hover: #2563eb;
}
.rx-social-share__button--native {
--rx-share-bg-hover: #7c3aed;
}
.rx-social-share__status {
display: inline-block;
font-size: 13px;
font-weight: 700;
margin-top: 10px;
min-height: 18px;
}
.rx-social-share--sticky {
z-index: 50;
}
@media (min-width: 1024px) {
.rx-social-share--sticky-left,
.rx-social-share--sticky-right {
position: fixed;
top: 35%;
width: auto;
}
.rx-social-share--sticky-left {
left: 16px;
}
.rx-social-share--sticky-right {
right: 16px;
}
.rx-social-share--sticky-left .rx-social-share__list,
.rx-social-share--sticky-right .rx-social-share__list {
align-items: stretch;
flex-direction: column;
}
.rx-social-share--sticky-left .rx-social-share__heading,
.rx-social-share--sticky-right .rx-social-share__heading {
display: none;
}
}
.rx-social-share--sticky-bottom {
background: rgba(255, 255, 255, 0.95);
border-top: 1px solid rgba(17, 24, 39, 0.1);
bottom: 0;
box-shadow: 0 -10px 30px rgba(17, 24, 39, 0.08);
left: 0;
margin: 0;
padding: 10px 16px;
position: fixed;
right: 0;
width: 100%;
}
.rx-social-share--sticky-bottom .rx-social-share__heading {
display: none;
}
.rx-social-share--sticky-bottom .rx-social-share__list {
justify-content: center;
}
@media (max-width: 640px) {
.rx-social-share__list {
gap: 8px;
}
.rx-social-share__button {
font-size: 13px;
min-height: 38px;
padding: 9px 11px;
}
.rx-social-share--icon-only .rx-social-share__button {
height: 38px;
width: 38px;
}
.rx-social-share--mobile-scroll .rx-social-share__list {
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 4px;
scrollbar-width: thin;
}
}
@media print {
.rx-social-share {
display: none !important;
}
}
</style>
<?php
endif;
/**
* ------------------------------------------------------------
* 9. Render Component
* ------------------------------------------------------------
*/
?>
<nav
class="<?php echo esc_attr( $wrapper_class ); ?>"
aria-label="<?php echo esc_attr__( 'Social sharing links', 'rx-theme' ); ?>"
<?php echo $tracking_attrs; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
>
<?php if ( $rx_social_share_args['show_heading'] && $rx_social_share_args['heading_text'] ) : ?>
<h2 class="rx-social-share__heading">
<?php echo esc_html( $rx_social_share_args['heading_text'] ); ?>
</h2>
<?php endif; ?>
<ul class="rx-social-share__list">
<?php foreach ( $active_networks as $network_key ) : ?>
<?php
if ( ! isset( $networks[ $network_key ] ) ) {
continue;
}
$network = $networks[ $network_key ];
$network_label = isset( $network['label'] ) ? $network['label'] : ucfirst( $network_key );
$network_url = isset( $network['url'] ) ? $network['url'] : '#';
$network_type = isset( $network['type'] ) ? $network['type'] : 'link';
$button_classes = array(
'rx-social-share__button',
'rx-social-share__button--' . sanitize_html_class( $network_key ),
);
if ( $button_extra_class ) {
$button_classes[] = $button_extra_class;
}
$button_class = implode( ' ', array_filter( $button_classes ) );
$aria_label = sprintf(
/* translators: %s: social network name. */
__( 'Share on %s', 'rx-theme' ),
$network_label
);
if ( 'email' === $network_key ) {
$aria_label = __( 'Share by email', 'rx-theme' );
}
if ( 'print' === $network_key ) {
$aria_label = __( 'Print this article', 'rx-theme' );
}
if ( 'copy' === $network_key ) {
$aria_label = __( 'Copy article link', 'rx-theme' );
}
if ( 'native' === $network_key ) {
$aria_label = __( 'Open native share menu', 'rx-theme' );
}
$data_attrs = sprintf(
' data-rx-share-network="%1$s" data-rx-share-type="%2$s"',
esc_attr( $network_key ),
esc_attr( $network_type )
);
if ( 'copy' === $network_type || 'native' === $network_type ) {
$data_attrs .= ' data-rx-share-url="' . esc_url( $url ) . '"';
$data_attrs .= ' data-rx-share-title="' . esc_attr( $title ) . '"';
$data_attrs .= ' data-rx-share-text="' . esc_attr( $excerpt ) . '"';
}
?>
<li class="rx-social-share__item rx-social-share__item--<?php echo esc_attr( $network_key ); ?>">
<?php if ( in_array( $network_type, array( 'copy', 'print', 'native' ), true ) ) : ?>
<button
type="button"
class="<?php echo esc_attr( $button_class ); ?>"
aria-label="<?php echo esc_attr( $aria_label ); ?>"
<?php echo $data_attrs; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
>
<span class="rx-social-share__icon">
<?php echo rx_theme_social_share_icon( $network_key ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</span>
<span class="rx-social-share__label">
<?php echo esc_html( $network_label ); ?>
</span>
</button>
<?php else : ?>
<a
class="<?php echo esc_attr( $button_class ); ?>"
href="<?php echo esc_url( $network_url ); ?>"
target="<?php echo esc_attr( $link_target ); ?>"
<?php if ( $link_rel ) : ?>
rel="<?php echo esc_attr( $link_rel ); ?>"
<?php endif; ?>
aria-label="<?php echo esc_attr( $aria_label ); ?>"
<?php echo $data_attrs; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
>
<span class="rx-social-share__icon">
<?php echo rx_theme_social_share_icon( $network_key ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
</span>
<span class="rx-social-share__label">
<?php echo esc_html( $network_label ); ?>
</span>
</a>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>
<span
class="rx-social-share__status"
data-rx-share-status
aria-live="polite"
aria-atomic="true"
></span>
</nav>
<?php
/**
* ------------------------------------------------------------
* 10. Inline JavaScript
* ------------------------------------------------------------
*/
if ( $rx_social_share_args['enable_inline_js'] ) :
?>
<script>
(function () {
'use strict';
if (window.rxSocialShareLoaded) {
return;
}
window.rxSocialShareLoaded = true;
function closestShareButton(target) {
if (!target) {
return null;
}
if (target.matches && target.matches('[data-rx-share-type]')) {
return target;
}
if (target.closest) {
return target.closest('[data-rx-share-type]');
}
return null;
}
function setStatus(button, message) {
var wrapper;
var status;
if (!button || !message) {
return;
}
wrapper = button.closest ? button.closest('.rx-social-share') : null;
if (!wrapper) {
return;
}
status = wrapper.querySelector('[data-rx-share-status]');
if (!status) {
return;
}
status.textContent = message;
window.clearTimeout(status.rxSocialShareTimer);
status.rxSocialShareTimer = window.setTimeout(function () {
status.textContent = '';
}, 2500);
}
function copyText(text) {
if (navigator.clipboard && navigator.clipboard.writeText) {
return navigator.clipboard.writeText(text);
}
return new Promise(function (resolve, reject) {
var textarea = document.createElement('textarea');
textarea.value = text;
textarea.setAttribute('readonly', 'readonly');
textarea.style.position = 'fixed';
textarea.style.top = '-9999px';
textarea.style.left = '-9999px';
document.body.appendChild(textarea);
textarea.select();
try {
document.execCommand('copy');
document.body.removeChild(textarea);
resolve();
} catch (error) {
document.body.removeChild(textarea);
reject(error);
}
});
}
function handleCopy(button) {
var url = button.getAttribute('data-rx-share-url') || window.location.href;
var success = <?php echo wp_json_encode( $rx_social_share_args['copy_success_text'] ); ?>;
var error = <?php echo wp_json_encode( $rx_social_share_args['copy_error_text'] ); ?>;
copyText(url)
.then(function () {
setStatus(button, success);
})
.catch(function () {
setStatus(button, error);
});
}
function handleNativeShare(button) {
var shareData = {
title: button.getAttribute('data-rx-share-title') || document.title,
text: button.getAttribute('data-rx-share-text') || '',
url: button.getAttribute('data-rx-share-url') || window.location.href
};
if (navigator.share) {
navigator.share(shareData).catch(function () {});
} else {
handleCopy(button);
}
}
function handlePrint() {
window.print();
}
document.addEventListener('click', function (event) {
var button = closestShareButton(event.target);
var type;
if (!button) {
return;
}
type = button.getAttribute('data-rx-share-type');
if ('copy' === type) {
event.preventDefault();
handleCopy(button);
}
if ('print' === type) {
event.preventDefault();
handlePrint();
}
if ('native' === type) {
event.preventDefault();
handleNativeShare(button);
}
});
document.addEventListener('DOMContentLoaded', function () {
var nativeButtons = document.querySelectorAll('[data-rx-share-type="native"]');
if (!nativeButtons.length) {
return;
}
if (!navigator.share) {
nativeButtons.forEach(function (button) {
var label = button.querySelector('.rx-social-share__label');
button.classList.add('rx-social-share__button--native-fallback');
if (label) {
label.textContent = <?php echo wp_json_encode( __( 'Copy Link', 'rx-theme' ) ); ?>;
}
button.setAttribute('aria-label', <?php echo wp_json_encode( __( 'Copy article link', 'rx-theme' ) ); ?>);
});
}
});
})();
</script>
<?php
endif;Useful Call Examples
Default social share
<?php get_template_part( 'template-parts/components/social-share' ); ?>Icon-only compact style
<?php
get_template_part(
'template-parts/components/social-share',
null,
array(
'style' => 'rounded',
'show_labels' => false,
'show_heading' => false,
)
);
?>Sticky left social share
<?php
get_template_part(
'template-parts/components/social-share',
null,
array(
'sticky' => true,
'sticky_position' => 'left',
'show_labels' => false,
'show_heading' => false,
)
);
?>Show only selected networks
<?php
get_template_part(
'template-parts/components/social-share',
null,
array(
'networks' => array(
'facebook',
'x',
'linkedin',
'whatsapp',
'telegram',
),
)
);
?>Best Place to Use It
Add it inside:
single.phpor:
template-parts/content/content-single.phpExample:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
</header>
<?php get_template_part( 'template-parts/components/social-share' ); ?>
<div class="entry-content">
<?php the_content(); ?>
</div>
<?php
get_template_part(
'template-parts/components/social-share',
null,
array(
'heading_text' => __( 'Share this helpful article', 'rx-theme' ),
'align' => 'center',
)
);
?>
</article>