This is a simple React component to display Social media sharing buttons for articles etc.  If you don’t use React you can do same with small changes in vanilla JavaScript or jQuery as well. Main information content here is the URL patterns for different social medias sharing functionalities. Rest is just UI. We will have one share button that opens sharing options: Facebook, Linkedin and Twitter. For social media icons we will use Font-awesome icons.

Update 19.1.2020: Updated Twitter url pattern that has changed.

First thing we will do is to have basic React skeleton and add some JSX to show our HTML elements.

import React, { Component } from 'react';

import './SocialShare.css';


class SocialShare extends Component {

    constructor(props) {
        super(props);
    
      }
    
  

  render() {

  

    return (
        <div className="socialShareContainer">
            <div>
                <button className="socialShareButton" >Share </button>
            </div>
            <div>
                <a href=# target="_blank"> <i className="fa fa-facebook-square"></i></a>
                <a href=# target="_blank"><i className="fa fa-linkedin-square"></i></a>
                <a href=# target="_blank"> <i className="fa fa-twitter-square"></i></a>
            </div>           
        </div>
    );
  }
}

export default SocialShare;

Next thing is we do is to toggle for div containing our social media buttons. For this we will have state to tell are sharing options visible or not. We will set our initial situation in constructor and then alter it with shareOpenToggle method we make here. Remember to bind your method to ‘this’ on constructor.  Also we can toggle buttons text to give user more feedback. Then we call this method on button using onClick. We will also have following CSS to actually hide / show div depending what is the class set to div by our state.

import React, { Component } from 'react';

import './SocialShare.css';



class SocialShare extends Component {

    constructor(props) {
        super(props);
        this.state = {
            shareOpen: "closeShare",
            toggleButtonText: "Share this"
        };
      
        this.shareOpenToggle = this.shareOpenToggle.bind(this);
    
      }
    
    shareOpenToggle() {
        if (this.state.shareOpen==="closeShare") {
            this.setState({
                shareOpen: "openShare",
                toggleButtonText: "Hide sharing options"
            });
        }else {
            this.setState({
                shareOpen: "closeShare",
                toggleButtonText: "Share this"
            });
        }   
    }
   

  render() {

  
 
    return (
        <div className="socialShareContainer">
            <div>
                <button className="socialShareButton" onClick={this.shareOpenToggle}>{this.state.toggleButtonText}</button>
            </div>
            <div className={this.state.shareOpen}>
                <a href=# target="_blank"> <i className="fa fa-facebook-square"></i></a>
                <a href=# target="_blank"><i className="fa fa-linkedin-square"></i></a>
                <a href=# target="_blank"> <i className="fa fa-twitter-square"></i></a>
            </div>           
        </div>
    );
  }
}

export default SocialShare;

SCSS here.

@keyframes socialShareAnimation {
    from {opacity: 0;}
    to {opacity: 1;}
}

.socialShareContainer {
    .socialShareButton {
        height: 50px;
        line-height: 50px;
        padding: 0px 25px;
        background: #666;
        color: #fff;
        cursor: pointer;
    }
    .closeShare {
        display: none;
        opacity: 0;
    }
    .openShare {
        display: block;
        opacity: 1;
        animation: socialShareAnimation 1s;
    }
    i {
        font-size: 50px;
        color: #666;
        margin: 0px 10px;
    }

}

Last step is to pick our page url from window and add our social media sharing URL patterns. We will combine our URL with these share URL:s using ES6 template literals. Template literals work like this:

 `this-is-string-which-in-our-code-is-some-url-pattern${this-is-expression-in-our-case-const-url}`

So our final code looks like this.

import React, { Component } from 'react';

import './SocialShare.css';



class SocialShare extends Component {

    constructor(props) {
        super(props);
        this.state = {
            shareOpen: "closeShare",
            toggleButtonText: "Share this"
        };
      
        this.shareOpenToggle = this.shareOpenToggle.bind(this);
    
      }
    
    shareOpenToggle() {
        if (this.state.shareOpen==="closeShare") {
            this.setState({
                shareOpen: "openShare",
                toggleButtonText: "Hide sharing options"
            });
        }else {
            this.setState({
                shareOpen: "closeShare",
                toggleButtonText: "Share this"
            });
        }   
    }
   

  render() {

  
    //URL from current page
    const url = window.location.href;
    //URL patterns for Social media sites share functionalities
    const facebookUrl = `https://www.facebook.com/sharer/sharer.php?u=${url}`;
    const twitterUrl = `https://twitter.com/intent/tweet?url=${url}`;
    const linkedinUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${url}`;

    return (
        <div className="socialShareContainer">
            <div>
                <button className="socialShareButton" onClick={this.shareOpenToggle}>{this.state.toggleButtonText}</button>
            </div>
            <div className={this.state.shareOpen}>
                <a href={facebookUrl} target="_blank"> <i className="fa fa-facebook-square"></i></a>
                <a href={linkedinUrl} target="_blank"><i className="fa fa-linkedin-square"></i></a>
                <a href={twitterUrl} target="_blank"> <i className="fa fa-twitter-square"></i></a>
            </div>           
        </div>
    );
  }
}

export default SocialShare;