gistfile1.txt

<div class="shareButtons">
	{{#each media}}
		<button on-click="share:{{this}}" class="share-{{this}}"></button>
	{{/each}}
</div>

<style>
	.shareButtons{
	    font-size:0;
	 }
    button{
        height:30px;
        width:30px;
        border-radius:34px;
        background:#333;
        display:inline-block;
        border: none;
        cursor:pointer;
        outline: none;
        background-position:center;
        background-repeat: no-repeat;
        background-size:28px;
        margin: 0 2px;
        background-color:rgba(255,255,255,0.25);
    }

    button.share-facebook{
    	background-color:#3067a3;
        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iLTIgLTIgMzIgMzIiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0xNy45IDE0aC0zdjhIMTJ2LThoLTJ2LTIuOWgyVjguN0MxMiA2LjggMTMuMSA1IDE2IDVjMS4yIDAgMiAuMSAyIC4xdjNoLTEuOGMtMSAwLTEuMi41LTEuMiAxLjN2MS44aDNsLS4xIDIuOHoiLz48L3N2Zz4=);
    }
	button.share-twitter{
		background-color:#028dbc;
        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iLTIgLTIgMzIgMzIiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0yMS4zIDEwLjV2LjVjMCA0LjctMy41IDEwLjEtOS45IDEwLjEtMiAwLTMuOC0uNi01LjMtMS42LjMgMCAuNi4xLjguMSAxLjYgMCAzLjEtLjYgNC4zLTEuNS0xLjUgMC0yLjgtMS0zLjMtMi40LjIgMCAuNC4xLjcuMWwuOS0uMWMtMS42LS4zLTIuOC0xLjgtMi44LTMuNS41LjMgMSAuNCAxLjYuNC0uOS0uNi0xLjYtMS43LTEuNi0yLjkgMC0uNi4yLTEuMy41LTEuOCAxLjcgMi4xIDQuMyAzLjYgNy4yIDMuNy0uMS0uMy0uMS0uNS0uMS0uOCAwLTIgMS42LTMuNSAzLjUtMy41IDEgMCAxLjkuNCAyLjUgMS4xLjgtLjEgMS41LS40IDIuMi0uOC0uMy44LS44IDEuNS0xLjUgMS45LjctLjEgMS40LS4zIDItLjUtLjQuNC0xIDEtMS43IDEuNXoiLz48L3N2Zz4=);
    }
	button.share-mail{
		background-color:#767676;
        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iLTIgLTIgMzIgMzIiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0yMC4yIDExLjdsLS40LS40LTUuNyAyLjctNS43LTIuNy0uMy40IDYgNC45IDYuMS00Ljl6TTIxLjQgN0g2LjVMNSA5LjV2OS4zTDYuNiAyMGgxNC45bDEuNS0xLjJWOS41TDIxLjQgN3ptLS41IDEwLjhINy4xVjkuMmgxMy44djguNnoiLz48L3N2Zz4=);
    }

</style>


<script>
	component.exports = {

		onrender: function(){
			this.on({
				'share': function (e, platform, url){
			   			var shareWindow;
				        var twitterBaseUrl = "http://twitter.com/share?text=";
				        var facebookBaseUrl = "https://www.facebook.com/dialog/feed?display=popup&app_id=741666719251986&link=";
				        var articleUrl = "http://www.theguardian.com/world/ng-interactive/2015/jun/09/a-migrants-journey-from-syria-to-sweden-interactive"
			
				        var shareUrl = articleUrl ;

				        var message = 'The Journey: A Syrian refugee sets his sights on Sweden - and freedom'

				        var shareImage = "http://media.guim.co.uk/b93f5ac5cb86e8bb1a46ab672ca89ea46ff16fe1/0_0_3543_2362/2000.jpg";

				        if(platform === "twitter"){
				            shareWindow =
				                twitterBaseUrl +
				                encodeURIComponent(message) +
				                "&url=" +
				                encodeURIComponent(shareUrl)
				        }else if(platform === "facebook"){
				            shareWindow =
				                facebookBaseUrl +
				                encodeURIComponent(shareUrl) + "&redirect_uri=http://www.theguardian.com";
				        }else if(platform === "mail"){
				            shareWindow =
				                "mailto:" +
				                "?subject=" + message +
				                "&body=" + shareUrl
				        }
				        window.open(shareWindow, platform + "share", "width=640,height=320");
			    }
			});
		}

	}

</script>