25% off ProSNIPC25OFF

Social Share Buttons Shortcode

Shortcode [scseed_share] that renders Twitter/X, Facebook, and LinkedIn share buttons for the current page URL.

Module2 parts · by SnipCraft

PHPShortcode

php
<?php
if ( ! function_exists( 'scseed_share_shortcode' ) ) {
    function scseed_share_shortcode( $atts ) {
        $atts  = shortcode_atts( array( 'url' => '', 'title' => '' ), $atts, 'scseed_share' );
        $url   = $atts['url']   ? esc_url( $atts['url'] )   : esc_url( get_permalink() );
        $title = $atts['title'] ? esc_attr( $atts['title'] ) : esc_attr( get_the_title() );
        $enc   = rawurlencode( $url );
        $t_enc = rawurlencode( $title );

        $tw = 'https://twitter.com/intent/tweet?url=' . $enc . '&text=' . $t_enc;
        $fb = 'https://www.facebook.com/sharer/sharer.php?u=' . $enc;
        $li = 'https://www.linkedin.com/shareArticle?mini=true&url=' . $enc . '&title=' . $t_enc;

        ob_start(); ?>
<div class="scseed-share">
  <span class="scseed-share-label">Share:</span>
  <a href="<?php echo esc_url( $tw ); ?>" class="scseed-share-btn scseed-share-tw"
     target="_blank" rel="noopener noreferrer" aria-label="Share on Twitter">X</a>
  <a href="<?php echo esc_url( $fb ); ?>" class="scseed-share-btn scseed-share-fb"
     target="_blank" rel="noopener noreferrer" aria-label="Share on Facebook">f</a>
  <a href="<?php echo esc_url( $li ); ?>" class="scseed-share-btn scseed-share-li"
     target="_blank" rel="noopener noreferrer" aria-label="Share on LinkedIn">in</a>
</div>
        <?php
        return ob_get_clean();
    }
    add_shortcode( 'scseed_share', 'scseed_share_shortcode' );
}

CSSStyles

css
.scseed-share {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    margin: 12px 0;
}
.scseed-share-label { color: #666; font-weight: 600; }
.scseed-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    transition: transform .15s, opacity .15s;
}
.scseed-share-btn:hover { transform: translateY(-2px); opacity: .9; color: #fff; }
.scseed-share-tw { background: #000; }
.scseed-share-fb { background: #1877f2; }
.scseed-share-li { background: #0a66c2; }
#shortcode#twitter#facebook#social#share