I was working on a WordPress theme for a client and he requested me to add couple of social sharing buttons on his website. So I started browsing through the social sharing plugins for WordPress and found that most were either too complicated or bloated for the simple feature my client needed. I didn’t want to use a bloated plugin to weight down his WordPress website in any way since my client only need a couple of buttons at the end of the content to share article on popular social networks.

So I started digging and it turned out that it is actually really easy to add sharing options to your posts without having to load any scripts. Twitter, Facebook, Google+ and LinkedIn all provide a way to call their sharing functionality by linking to a URL and pass some parameters like the text or URL of the item to be shared. With most of these social networks, you only need to supply article URL and they fetch article title, introduction text and article image automatically.

So I created this simple WordPress snippet for him, which you can also paste in your single.php to add social sharing buttons from Twitter, Facebook, Google+ and LinkedIn.

<div class="social-sharing-links">
    <a href="http://twitter.com/intent/tweet/?text=<?php echo esc_html( get_the_title() ); ?>&url=<?php echo esc_url( get_the_permalink() ); ?>&via=WPCodeSnippet" class="twitter" target="_blank">Share on Twitter</a>
    <a href="http://www.facebook.com/sharer/sharer.php?u=<?php echo esc_url( get_the_permalink() ); ?>" class="facebook" target="_blank">Share on Facebook</a>
    <a href="http://plus.google.com/share?url=<?php echo esc_url( get_the_permalink() ); ?>" class="gplus" target="_blank" >Share on Google+</a>
    <a href="http://www.linkedin.com/shareArticle?mini=true&url=<?php echo esc_url( get_the_permalink() ); ?>&title=<?php echo esc_html( get_the_title() ); ?>&source=WPCodeSnippet.com" class="linkedin" target="_blank" >Share on LinkedIn</a>
</div>

If you want to style your social sharing buttons then you can use following CSS or you can define your own CSS styles for these buttons in your theme’s style.css.

/* CSS styles for social sharing buttons */
div.social-sharing-button {
    margin-bottom: 2em;
}

div.social-sharing-button a {
    display: inline-block;
    color: #FFF;
    font-size: 13px;
    font-weight: bold;
    margin-right: 1em;
    padding: 8px 10px;
    background-color: rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-decoration: none;
}

div.social-sharing-button a:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

div.social-sharing-button a.facebook {
    background: rgba(59, 89, 152, 0.7);
}

div.social-sharing-button a.facebook:hover {
    background: rgba(59, 89, 152, 1);
}

div.social-sharing-button a.twitter {
    background: rgba(0, 172, 237, 0.7);
}

div.social-sharing-button a.twitter:hover {
    background: rgba(0, 172, 237, 1);
}

div.social-sharing-button a.gplus {
    background: rgba(221, 75, 57, 0.7);
}

div.social-sharing-button a.gplus:hover {
    background: rgba(221, 75, 57, 1);
}

div.social-sharing-button a.linkedin {
    background: rgba(0, 123, 182, 0.7);
}

div.social-sharing-button a.linkedin:hover {
    background: rgba(0, 123, 182, 1);
}