A Pen by Joe Watkins.

index.html

<h1>Thank you!</h1>
<p>You just did awesome! Now share it with your friends :)</p>

<div class="easy-share"
   data-title="This is the title"
   data-url="http://codepen.com"
   data-tweet="The tweet goes here"
   data-hash-tags="taghere,another,tag">
</div>



<script type="text/template" id="easyShareTemplate">
  <div class="easy-share">
    {{#shareData}}
    <ul>
      <li class="facebook">
        <a href="#" onClick="{{faceBook}}"><i class="fa fa-facebook-square"></i> Share on Facebook</a>
      </li>
      <li class="twitter">
        <a href="#" onClick="{{twitter}}"><i class="fa fa-twitter-square"></i> Share on Twitter</a>
      </li>
      <li class="google-plus">
        <a href="#" onClick="{{googlePlus}}"><i class="fa fa-google-plus-square"></i> Share on Google+</a>
      </li>
    </ul>
    {{/shareData}}
  </div>
</script>

script.js

$(function() {

  var $easyShare = $('.easy-share'),
      $template = $('#easyShareTemplate').html(),
      faceBookUrl = 'http://www.facebook.com/sharer.php',
      twitterUrl = 'https://twitter.com/share',
      googlePlusUrl = 'https://plus.google.com/share',
      shareData = [];
  
      $easyShare.each(function(index,item){
        shareData.push({
          faceBook : 'window.open ("'+faceBookUrl+'?u='+$(this).data('url')+'&t='+$(this).data('title')+'","tdFBShare","status=0,resizable=1,height=400,width=600")',
          twitter : 'window.open ("'+twitterUrl+'?url='+$(this).data('url')+'&text='+escape($(this).data('tweet'))+'&hashtags='+$(this).data('hash-tags')+' ,placeholder","tdTWShare","status=0,resizable=1,height=400,width=600")',
          googlePlus : 'window.open ("'+googlePlusUrl+'?url='+$(this).data('url')+'","tdTWShare","status=0,resizable=1,height=400,width=600")'
        }); // push
      }); // each
  
      console.log(shareData);
  
      var html = Mustache.to_html($template, { shareData : shareData });
      
      $easyShare.html(html);
  
});

style.scss

@import "compass";
.easy-share {
  
	$easyShareFontSize: 1.5em;
  $easyShareTwitter: #45B0E3;
	$easyShareFacebook: #39599F;
  $easyShareGooglePlus: #DD4B39;
  
  width:100%;
  position:relative;
  overflow:hidden;
  
  ul { 
    margin:0; 
    padding:0; 
  } 
  li { 
    width:12em;
    margin:0 0 .4em 0;
    list-style:none;
    line-height:1.5em;
    position:relative;
    font-size:$easyShareFontSize;
   
    a {
			padding:.2em .5em;
			color:#fff;
			width:100%;
			display: block;
      text-decoration:none;
			&:hover { color: white; }
			i {
				color: white;
        margin:0 .6em 0 0;
				&:hover { color: white; }
        &:after {
          position:absolute;
          top:0;
          left:1.8em;
          width:1px;
          height:1.9em;
          content: ' ';
          background:white;
          opacity:.2;
        }
			}
		}
		&.facebook {
			a { background: $easyShareFacebook;
				&:hover {
					background: darken($easyShareFacebook,5%);
				}
			}
		}
		&.twitter {
			a { background: $easyShareTwitter;
				&:hover {
					background: darken($easyShareTwitter,5%);
				}
			}
		}
    &.google-plus {
			a { background: $easyShareGooglePlus;
				&:hover {
					background: darken($easyShareGooglePlus,5%);
				}
			}
		}
	} // li
  
} // easy-share








/* demo styles */
@import url('//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css');

* { box-sizing:border-box; }

body { 
  margin:1.3em;
}

h1 { color: #000; }
p { color: #222; }

wip---easyShare.markdown

wip - easyShare

A Pen by Joe Watkins on CodePen.

License.