Add a social share in wordpress

facebook-f.svg

google-plus-g.svg

linkeding-in.svg

social-share.php

<?php
/**
 * add social share buttons after wp content
 * paste this in your function.php
 * TODO: link to svg files
 * Use: echo scl_social_sharing_buttons();
 * @param $content
 * @return string
 */
function scl_social_sharing_buttons(){
        $content = '';
        // Get current page URL
        $shortURL = get_permalink();
        // Get current page title
        $shortTitle = get_the_title();

        // Construct sharing URL without using any script
        $twitterURL = 'https://twitter.com/intent/tweet?text=' . $shortTitle . '&amp;url=' . $shortURL . '&amp;via=TWITTER_NAME';
        $facebookURL = 'https://www.facebook.com/sharer/sharer.php?u=' . $shortURL;
        $googleURL = 'https://plus.google.com/share?url=' . $shortURL;
        $linkedinURL = 'https://www.linkedin.com/shareArticle?mini=true&url=' . $shortURL . '&title=' . $shortTitle;

        $atts = 'target="_blank"';
        // Add sharing button at the end of page/page content
        $content .= '<div class="social-post-block">';
        $content .= '<div class="pure-g">';
        $content .= '<div class="pure-u-1 pure-u-md-20-24">';

        $content .= '<div class="scl-social">';
        $content .= '<p>' . __('Share this article', 'ln') . '</p>';
        $content .= '<a ' . $atts . ' class="scl-link scl-twitter " href="' . $twitterURL . '" >twitter.svg</a>';
        $content .= '<a ' . $atts . ' class="scl-link scl-facebook " href="' . $facebookURL . '">facebook-f.svg</a>';
        $content .= '<a ' . $atts . ' class="scl-link scl-googleplus " href="' . $googleURL . '">google-plus-g.svg</a>';
        $content .= '<a ' . $atts . ' class="scl-link scl-buffer" href="' . $linkedinURL . '"">linkedin-in.svg</a>';
        $content .= '<div class="clearfix"></div> </div>';
        $content .= '</div>';
        $content .= '</div>';
        $content .= '</div>';

        return $content;

}

social-share.scss

$textColor: #000;
$iconBackgrounds: #ededed; 

.social-post-block{
  width: 100%;
  display: block;
  clear: both;
  float: left;
  margin: 0;
  padding: 0;
  p {
    font-weight: 300;
    font-size: 12px;
    float: left;
    margin: 0 10px 0 0;
    color:$textColor;
  }
  .scl-social {
    margin: 0;
    -webkit-font-smoothing: antialiased;
    font-size: 12px;
    clear: both;
    padding: 12px 0 1em;
    float: left;
    width: 98%;
    max-width: 100%;
    text-align: center;
    .scl-link {
      padding: 4px;
      color: #fff;
      font-size: 20px;
      background-color: $iconBackgrounds;
      border-right: 1px solid #fff;
      text-align: center;
      width: 18px;
      height: 18px;
      line-height: 18px;
      display: block;
      float: left;

      svg{
        max-width: 80%;
        margin: 0 auto;
        max-height: 14px;
        path{
          fill:#fff;
        }
      }
      &.scl-twitter:hover, &.scl-twitter:active {
        background: #279ebf;
      }
      &.scl-facebook:hover, &.scl-facebook:active {
        background: #4a66a0;
      }
      &.scl-googleplus:hover, &.scl-googleplus:active {
        background: #b53525;
      }
      &.scl-buffer:hover, &.scl-buffer:active {
        background: #0084bf;
      }
    }
  }
}
//Media
@media screen and(max-width: 768px) {
  .social-post-block{
    p{
      text-align: left!important;
    }
  }
}

twitter.svg