How to add social media sharing buttons to WordPress without plugin

Easy way integration socials to WordPress

Problem: How add social media sharing buttons to WordPress without plugin.

Solution: There are so many ways for do it, I'll write about 2.

First way: We can use clean API method:

<div id="fb-root"></div>
<script>(function(d, s, id) {
	var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/en-US/sdk.js#xfbml=1&version=v2.12';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-share-button" data-href="<?php echo get_permalink($postID); ?>" data-layout="button" data-size="small" data-mobile-iframe="true"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo get_permalink($postID); ?>&src=sdkpreparse" class="fb-xfbml-parse-ignore"></a></div>
<a href="<?php echo get_permalink($postID); ?>" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<script src="//platform.linkedin.com/in.js"> lang: <?php language_attributes(); ?></script>
<script type="IN/Share" data-url="<?php echo get_permalink($postID); ?>"></script>

Advantages: it's very simple! 🙂

Disadvantages: 1) we can't edit styles. 2) quantity scripts equal quantity socials and this fact adversely affect on web-site performance.

Second way: We can use ShareThis service API, add the code on page:

<div  data-network="facebook" class="st-custom-button" 
      data-url="<?php the_permalink(); ?>" 
      data-title="<?php the_title(); ?>"
      data-image="<?php the_post_thumbnail_url('full'); ?>";
      data-description="<?php the_excerpt(); ?>";
      >Facebook
</div>
<div  data-network="twitter" class="st-custom-button" 
      data-url="<?php the_permalink(); ?>" 
      data-title="<?php the_title(); ?>"
      data-image="<?php the_post_thumbnail_url('full'); ?>";
      data-description="<?php the_excerpt(); ?>";
      >Twitter
</div>
<div  data-network="linkedin" class="st-custom-button" 
      data-url="<?php the_permalink(); ?>" 
      data-title="<?php the_title(); ?>"
      data-image="<?php the_post_thumbnail_url('full'); ?>";
      data-description="<?php the_excerpt(); ?>";
      >Linkedin
</div>

in the functions.php add script for enqueue ShareThis service:

wp_enqueue_script( 'share-this', '//platform-api.sharethis.com/js/sharethis.js#product=custom-share-buttons', array(), null, 'in_footer' );

also we need one more script - you can create it or enqueue existing e.g. main.js:

wp_enqueue_script( 'main', get_template_directory_uri() . '/js/main.js', array(), null, 'in_footer' );

Add next code to main.js file:

var shareButtons = document.querySelectorAll( '.st-custom-button[data-network]' );
	for ( var i = 0; i < shareButtons.length; i++ ) {
    var shareButton = shareButtons[ i ];
    
    shareButton.addEventListener( 'click', function( e ) {
    	var elm = e.target;
     	var network = elm.dataset.network;
   } );
  }

Advantages: we can edit share button styles and we use only 2 script for unlimited number of socials.

Disadvantages: this way a little harder previous way, but I prefer use it.