kubiq

Easily use <code>[better_share_buttons]</code> shortcode anywhere you want. 
Create your own styles, or choose from existing ones. 
This plugin is optimized for fastest websites – it will not load any JS files and it will load CSS file only when it is needed.
This plugin allows you to:
<ul>
<li>create multiple social share icon styles</li>
<li>use shortcode to display share icons anywhere you want</li>
<li>create your own styles in your theme folder</li>
<li>customize basic settings directly in admin</li>
<li>use different icons for social networks</li>
</ul>
<h3>Hooks</h3>
customize wrapper classes
<pre><code>add_filter( 'share_buttons_classes', function( $classes, $share_buttons_settings, $share_buttons_id ){
 $classes[] = 'my-custom-class';
 return $classes;
}, 10, 3 );
</code></pre>
 
customize wrapper CSS output
<pre><code>add_filter( 'share_buttons_styles', function( $style, $share_buttons_settings, $share_buttons_id ){
 $style[] = '--my-var: 50px';
 return $style;
}, 10, 3 );
</code></pre>
 
customize html form more button
<pre><code>add_filter( 'better_share_buttons_more', function( $html, $share_buttons_settings, $share_buttons_id ){
 // replace SVG icon path with a custom one
 $html = str_replace( 'M18 14V8h-4v6H8v4h6v6h4v-6h6v-4h-6z', 'M18.2 4.2C18.2 3 17.2 2 16 2s-2.2 1-2.2 2.2v9.7H4.2C3 13.8 2 14.8 2 16s1 2.2 2.2 2.2h9.7v9.7c0 1.2 1 2.2 2.2 2.2s2.2-1 2.2-2.2v-9.7H28c1.2 0 2.2-1 2.2-2.2s-1-2.2-2.2-2.2h-9.7V4.2z', $html );
 return $html;
}, 10, 3 );
</code></pre>
 
add custom icon for any network
<pre><code>add_filter( 'share_buttons_icons', function( $icon, $slug, $share_buttons_settings, $share_buttons_id ){
 if( $slug == 'facebook' ){
 // add custom SVG path and you will be able to select it in admin
 $icon[] = 'M29.3 16c0-7.4-6-13.3-13.3-13.3C8.6 2.7 2.7 8.6 2.7 16c0 6.5 4.6 11.8 10.7 13.1V20h-2.7v-4h2.7v-3.3c0-2.6 2.1-4.7 4.7-4.7h3.3v4h-2.7c-.7 0-1.3.6-1.3 1.3V16h4v4h-4v9.3c6.7-.7 11.9-6.4 11.9-13.3z';
 }
 return $icon;
}, 10, 4 );
</code></pre>
 
control shared URL
<pre><code>add_filter( 'better_share_buttons_permalink', function( $url ){
 // ...
 return $url;
});
</code></pre>
 
control shared title
<pre><code>add_filter( 'better_share_buttons_title', function( $title ){
 // ...
 return $title;
});
</code></pre>
 
control HTML output for any network
<pre><code>add_filter( 'better_share_buttons_link', function( $html, $slug, $share_buttons_settings, $share_buttons_id ){
 if( $slug == 'facebook' ){
 $html = str_replace( 'https://facebook.com/sharer/sharer.php?', 'https://facebook.com/sharer/sharer.php?xxx=yyy&', $html );
 }
 return $html;
}, 10, 4 );
</code></pre>
 
add something before or after your share buttons
<pre><code>add_action( 'before_share_buttons', function( $share_buttons_settings, $atts ){ // or after_share_buttons
 if( $atts['id'] == 12345 ){
 echo '<div class="before-share-buttons">' . __( 'Sharing is caring', 'theme' ) . '</div>';
 }
}, 10, 2 );
</code></pre>
 
<h3>Create your own styles</h3>
Create new folder <code>better-share-buttons</code> inside your theme folder and put iniside style files <code>xyz.css</code> and <code>xyz.json</code>.
Style <code>xyz</code> will automatically appear in the admin settings.
Content of JSON file is used to manipulate settings in admin when you select that style:
<pre><code>{
 "visible_buttons": 999,
 "bsb_mx": 0,
 "bsb_my": 0,
 "bsb_px": 5,
 "bsb_py": 5,
 "bsb_br": 0,
 "bsb_fz": 0,
 "bsb_iz": 32,
 "bsb_lls": 0,
 "bsb_lrs": 0
}
</code></pre>
Content of CSS file should define your style:
<pre><code>.better_share_buttons.bsb-style-xyz{}
</code></pre>

Better Share Buttons

Easily use [better_share_buttons] shortcode anywhere you want.

Ronald Huereca

Show relevant social networks when users highlight text, click an inline highlight, interact with an image, or click on a Click to Share box. <a href="https://wordpress.org/plugins/highlight-and-share/?preview=1" rel="ugc">Check out the live demo</a>.
<iframe loading="lazy" title="Highlight and Share - High Level Introduction" width="750" height="422" src="https://www.youtube.com/embed/ZZWiLZtfqcI?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
Highlight and Share has the following major features (links are to docs):
<ol>
<li>Show <a href="https://docs.dlxplugins.com/v/highlight-and-share/getting-started/enabling-the-social-networks" rel="nofollow ugc">enabled social networks</a> when users select text.</li>
<li>Add <a href="https://docs.dlxplugins.com/v/highlight-and-share/inline-highlighting/what-is-inline-highlighting" rel="nofollow ugc">inline highlighting</a> to split out longform text.</li>
<li>Create a Click to Share box via the <a href="https://docs.dlxplugins.com/v/highlight-and-share/click-to-share-block/the-click-to-share-block" rel="nofollow ugc">block editor</a> or <a href="https://docs.dlxplugins.com/v/highlight-and-share/click-to-share-shortcode/shortcode-parameters" rel="nofollow ugc">shortcode</a>.</li>
<li>Add Pinterest and the Web Share API to images <a href="https://docs.dlxplugins.com/v/highlight-and-share/image-sharing/what-is-image-sharing" rel="nofollow ugc">for image sharing</a>.</li>
</ol>
<blockquote>
Not sure where to start? Please check out <a href="https://youtube.com/playlist?list=PLw2fSxxzure64RVDMsBd1DzU87YY0pRTb&si=1JpVYegYj5jskn27" rel="nofollow ugc">our video series</a> (YouTube) and our <a href="https://docs.dlxplugins.com/v/highlight-and-share" rel="nofollow ugc">comprehensive documentation</a> ❤️️
</blockquote>
If you have a feature request, <a href="https://dlxplugins.com/support/" rel="nofollow ugc">please leave a support request.</a>.
<h3>Features</h3>
<ul>
<li>Show social networks on text selection.</li>
<li>Inline highlighting.</li>
<li>A comprehensive Click to Share block.</li>
<li>A comprehensive Click to Share shortcode.</li>
<li>Image sharing via Pinterest and the Web Share API.</li>
<li>Customize the appearance of the social networks.</li>
<li>Customize the appearance of the inline highlighting.</li>
<li>Enable social networks in the comments section when highlighting text.</li>
<li>Enable or disable on main content and excerpts.</li>
<li>Enable or disable each social network.</li>
<li>Translate the labels and tooltips into your language, or just change up the text.</li>
<li>Customize the Twitter username used.</li>
<li>Enable hashtags on posts/pages</li>
<li>Pre-selected and locally sourced Google Fonts and Adobe Fonts.
</li>
<li>Email protection via Akismet and reCAPTCHA 3</li>
<li>Customize how inline highlighting looks</li>
<li>Works with Page Builders using advanced selectors</li>
</ul>

Highlight and Share – Social Text and Image Sharing

A lightweight and unobtrusive social media plugin for displaying social networks.

Better Share Buttons vs Highlight and Share – Social Text and Image Sharing