WordPress portfolio Template chat_bubble0 14 Aug 2017
Development Tutorials

Social share button is very useful to share post on social networking websites like facebook, twitter and google plus. this will boost visitor traffic to your website from these websites. there is lots of social share plugins available but problem is these will increase page load time by loading unnecessary css and js files. that will also cause SEO issue in future for your website. so you should keep simple for social sharing button to avoid long page load time. in this post, I will show you how to add social sharing button without any plugin.

How to add social share button?

Here is the code you need to add on your theme  functions.php file

function dartthemes_post_view_count_display($content){

    // Check the post type you want to count view is_singular('post')
    if(is_singular('post')){
      // get the current post id
      $post_id = get_the_ID();
      $post_link = get_permalink($post_id);
      $post_title = get_the_title($post_id);

      $count_html= '';
      $count_html.='<div class="social-share">';
      $count_html.=' <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">';
      $count_html.= '<a href="https://www.facebook.com/sharer/sharer.php?u='.$post_link.'"><i class="fa fa-facebook-square" aria-hidden="true"></i></a>';
      $count_html.= '<a href="https://twitter.com/intent/tweet?source='.$post_link.'&text='.$post_title.'"><i class="fa fa-twitter-square" aria-hidden="true"></i></a>';
      $count_html.= '<a href="https://plus.google.com/share?url='.$post_link.'"><i class="fa fa-twitter-square" aria-hidden="true"></i></a>';
      $count_html.='</div>';
      $count_html.='<style>';
      $count_html.='

            .social-share{}
            .social-share a {
              display: inline-block;
              margin: 0 3px;
            }
            .social-share a .fa {
              font-size: 30px;
            }';
      $count_html.='</style>';

      return $content.$count_html;
    }
    else{
      return $content;
    }
}

add_filter('the_content','dartthemes_post_view_count_display');

We have used font awesome icons for social buttons, you can use background image as button icons if you don’t like font awesome. here is the output will be looked like.

social share button

 


Notice: ob_end_flush(): failed to send buffer of zlib output compression (0) in /home/dartthemes/public_html/wp-includes/functions.php on line 4669