No frills social share links for Wordpress sites

There are many plugins available for WordPress which lets visitors share the post or current page on various social networking sites like Google Plus, Facebook, Twitter, Linkedin, Reddit, Digg, Stubleupon, etc.

I tried few popular ones and realized that these plugins pulls lots of javascript and css from the plugin and often from these social networking sites. Some sites use lazy loading approach. Still I could not find a simple plugin with no javascript, css. I wanted the plugin to insert the links and let me take care of css style. Since these links appear on every post, I’m somewhat obsessed with page performance due to addition of these links.

I finally wrote a simple wordpress plugin for no frills social shareing of links.
Here is the main php source code containing the url parameters needed for sharing at various social sites. The code is also available on github. You many need to customize it little bit as I have used image paths from location /img/

function nfssl_the_content_filter ($content) {
  $posturl = urlencode(get_permalink());
  $posttitle = urlencode(html_entity_decode(get_the_title(), ENT_COMPAT, 'UTF-8'));
  $share_html = "<div class='nfssl'>Share: ";

  // G+
  $link = "https://plus.google.com/share?url=$posturl";
  $title = "share on Google+";
  $img = "/img/Google_plus_icon-18.png";
  $share_html .= " <a title='$title' href='$link' target='_blank'><img src='$img' alt='$title' /></a>";

  // fb
  $link = "http://www.facebook.com/share.php?u=$posturl";
  $title = "share on facebook";
  $img = "/img/F_icon-18.png";
  $share_html .= " <a title='$title' href='$link' target='_blank'><img src='$img' alt='$title' /></a>";

  // linkedin
  $link = "http://www.linkedin.com/shareArticle?mini=true&url=$posturl" . "&title=$posttitle";
  $title = "share on linkedin";
  $img = "/img/Linkedin_icon-18.png";
  $share_html .= " <a title='$title' href='$link' target='_blank'><img src='$img' alt='$title' /></a>";

  // twitter
  $link = "https://twitter.com/intent/tweet?url=$posturl" .  "&text=$posttitle";
  $title = "tweet this";
  $img = "/img/Twitter-18.png";
  $share_html .= " <a title='$title' href='$link' target='_blank'><img src='$img' alt='$title' /></a>";

  // reddit
  $link = "http://www.reddit.com/submit?url=$posturl" . "&title=$posttitle";
  $title = "submit to reddit";
  $img = "/img/Reddit-18.png";
  $share_html .= " <a title='$title' href='$link' target='_blank'><img src='$img' alt='$title' /></a>";

  // stumbleupon
  $link = "http://www.stumbleupon.com/submit?url=$posturl";
  $title = "share on stumbleupon";
  $img = "/img/Stumbleupon-18.png";
  $share_html .= " <a title='$title' href='$link' target='_blank'><img src='$img' alt='$title' /></a>";

  //digg
  $link = "http://digg.com/submit?url=$posturl" . "&title=$posttitle";
  $title = "share on digg";
  $img = "/img/Digg_Shiny_Icon-18.png";
  $share_html .= " <a title='$title' href='$link'><img src='$img' alt='$title' target='_blank' /></a>";

  $share_html .= "</div>\n";
  $content .= $share_html;
  return $content;
}
add_filter( 'the_content', 'nfssl_the_content_filter');

You also need to get the icon images. The icon images are usually available on the respective social sharing/bookmarking site. You can also take the SVG icon images available in public domain and generate required size png icons or other format icons. I prefer the approach of loading of images from blog domain itself browser does not need to do an additional DNS lookup in that case.

You can use following SVG icons to generate png or other format icon images.

No frills social share links for WordPress sites

Suggested posts: