<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js" data-semver="1.2.6"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src='angular-socialshare.js'></script>
<script src="http://platform.twitter.com/widgets.js"></script>
</head>
<body ng-app='testing'>
<h1>Hello Plunker!</h1>
<div ng-controller='temp'>
<div facebook class="facebookShare" data-url='http://google.com' data-shares='shares'>{{ shares }}</div>
<br /><br />
<a twitter data-lang="en" data-count='horizontal' data-url='http://google.com' data-via='notsosleepy' data-size="medium" data-text='Testing Twitter Share' ></a>
<br /><br />
<div class="linkedinShare" linkedin data-url='http://www.google.com.au' data-title='Linkdin Share' data-summary="testing Linkdin Share" data-shares='linkedinshares'>{{linkedinshares}}</div>
<br /><br />
<div gplus class="g-plus" data-size="tall" data-annotation="bubble" data-href='http://google.com' data-action='share'></div>
</div>
</body>
</html>
angular.module('testing',['djds4rce.angular-socialshare'])
.run(function($FB){
$FB.init('535753043217191');
});
angular.module('testing').controller('temp',function($scope){
});
.facebookShare {
border: none;
visibility: visible;
width: auto;
height: 22px;
background: transparent;
overflow: hidden;
-webkit-text-size-adjust: none;
color: #333;
line-height: 1.28;
margin: 0;
padding: 0;
text-align: left;
direction: ltr;
cursor: pointer;
font-family: 'Helvetica Neue', Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
display: inline-block;
}
.facebookShare:hover .facebookButton .pluginButton,
.facebookShare:active .facebookButton .pluginButton,
.facebookShare:focus .facebookButton .pluginButton {
background: #5b7bd5;
background: -moz-linear-gradient(top, #5b7bd5 0%, #4864b1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5b7bd5), color-stop(100%, #4864b1));
background: -webkit-linear-gradient(top, #5b7bd5 0%, #4864b1 100%);
background: -o-linear-gradient(top, #5b7bd5 0%, #4864b1 100%);
background: -ms-linear-gradient(top, #5b7bd5 0%, #4864b1 100%);
background: linear-gradient(to bottom, #5b7bd5 0%, #4864b1 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5b7bd5', endColorstr='#4864b1', GradientType=0);
border-color: #5874c3 #4961a8 #41599f;
box-shadow: inset 0 0 1px #607fd6;
}
.facebookShare .facebookButton {
color: #3b5998;
text-decoration: none;
font-size: 11px;
text-align: left;
display: inline-block;
width: 55px;
}
.facebookShare .facebookButton .pluginButton {
background: #4c69ba;
background: -moz-linear-gradient(top, #4c69ba 0%, #3b55a0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4c69ba), color-stop(100%, #3b55a0));
background: -webkit-linear-gradient(top, #4c69ba 0%, #3b55a0 100%);
background: -o-linear-gradient(top, #4c69ba 0%, #3b55a0 100%);
background: -ms-linear-gradient(top, #4c69ba 0%, #3b55a0 100%);
background: linear-gradient(to bottom, #4c69ba 0%, #3b55a0 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c69ba', endColorstr='#3b55a0', GradientType=0);
border: none;
border-radius: 3px;
color: #fff;
cursor: pointer;
font-weight: bold;
height: 20px;
line-height: 20px;
padding: 0;
text-shadow: 0 -1px 0 #354c8c;
white-space: nowrap;
}
.facebookShare .facebookButton .pluginButton .pluginButtonContainer {
-webkit-font-smoothing: antialiased;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.004);
}
.facebookShare .facebookButton .pluginButton .pluginButtonContainer .pluginButtonImage {
display: inline-block;
}
.facebookShare .facebookButton .pluginButton button {
background: transparent;
border: 0;
color: inherit;
cursor: pointer;
font: inherit;
font-weight: bold;
margin: -1px;
outline: none;
padding: 0;
text-shadow: 0 -1px 0 #354c8c;
}
.facebookShare .facebookButton .pluginButton button .pluginButtonIcon {
height: 14px;
left: 0;
margin: 0 4px 0 4px;
position: relative;
top: 3px;
vertical-align: top;
width: 14px;
}
.facebookShare .facebookButton .pluginButton button .sp_plugin-button-2x {
background-image: url(https://fbstatic-a.akamaihd.net/rsrc.php/v2/y5/r/KxVPs0eEy36.png);
background-size: 30px 72px;
background-repeat: no-repeat;
display: inline-block;
height: 14px;
width: 14px;
}
.facebookShare .facebookButton .pluginButton button .sx_plugin-button-2x_favblue {
background-position: 0 -42px;
}
.facebookShare .facebookButton .pluginButton button i.img {
-ms-high-contrast-adjust: none;
_overflow: hidden;
}
.facebookShare .facebookButton .pluginButton .pluginButtonLabel {
padding: 0 5px 0 0;
position: relative;
vertical-align: top;
}
.facebookShare .facebookCount {
display: inline-block;
width: auto;
}
.facebookShare .facebookCount .pluginCountButton {
background: white;
border: 1px solid #bbb;
border-radius: 3px;
color: #6a7180;
display: inline-block;
font-size: 11px;
height: auto;
line-height: 18px;
margin-left: 6px;
min-width: 15px;
padding: 0 3px;
text-align: center;
white-space: nowrap;
}
.facebookShare .facebookCount .pluginCountButton span {
display: inline-block;
min-height: 12px;
min-width: 4px;
color: #333;
}
.facebookShare .facebookCount .pluginCountButtonNub {
height: 0;
left: 2px;
position: relative;
top: -15px;
width: 5px;
z-index: 2;
}
.facebookShare .facebookCount .pluginCountButtonNub s,
.facebookShare .facebookCount .pluginCountButtonNub i {
border-color: transparent #bbb;
border-style: solid;
border-width: 4px 5px 4px 0;
display: block;
position: relative;
top: 1px;
}
.facebookShare .facebookCount .pluginCountButtonNub i {
border-right-color: #fff;
left: 2px;
top: -7px;
}
@-moz-document url-prefix() {
.facebookShare .facebookButton .pluginButton button .pluginButtonIcon {
margin: 0 1px;
}
}
.linkedinShare {
line-height: 1;
vertical-align: baseline;
display: inline-block;
text-align: center;
width: auto;
padding: 0;
margin: 0;
position: relative;
border: 0;
text-decoration: none;
height: 20px;
cursor: pointer;
}
.linkedinShare:hover .linkedinButton .pluginButtonLabel,
.linkedinShare:active .linkedinButton .pluginButtonLabel,
.linkedinShare:focus .linkedinButton .pluginButtonLabel {
border: 1px solid #000;
border-top-color: #ABABAB;
border-right-color: #9A9A9A;
border-bottom-color: #787878;
border-left-color: #04568B;
border-left: 0;
background: #ededed;
background: -moz-linear-gradient(top, #ededed 0%, #dedede 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ededed), color-stop(100%, #dedede));
background: -webkit-linear-gradient(top, #ededed 0%, #dedede 100%);
background: -o-linear-gradient(top, #ededed 0%, #dedede 100%);
background: -ms-linear-gradient(top, #ededed 0%, #dedede 100%);
background: linear-gradient(to bottom, #ededed 0%, #dedede 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dedede', GradientType=0);
}
.linkedinShare .linkedinButton {
display: inline-block;
width: 59px;
height: 20px;
padding: 0;
margin: 0;
}
.linkedinShare .linkedinButton .pluginButtonImage {
background-image: url(https://www.linkedin.com/scds/common/u/images/apps/connect/sprites/sprite_connect_v14.png);
background-position: 0px -276px;
background-repeat: no-repeat;
cursor: pointer;
border: 0;
text-indent: -9999em;
overflow: hidden;
padding: 0;
margin: 0;
position: absolute;
left: 0px;
top: 0px;
display: block;
width: 20px;
height: 20px;
border-radius: 2px;
color: #069;
}
.linkedinShare .linkedinButton .pluginButtonLabel {
color: #333;
cursor: pointer;
display: block;
white-space: nowrap;
float: left;
margin-left: 1px;
overflow: hidden;
text-align: center;
height: 18px;
padding: 0 4px 0 23px;
border: 1px solid #000;
border-top-color: #E2E2E2;
border-right-color: #BFBFBF;
border-bottom-color: #B9B9B9;
border-left-color: #E2E2E2;
border-left: 0;
text-shadow: #ffffff -1px 1px 0;
line-height: 20px;
border-radius: 2px;
background-color: #ECECEC;
background: -moz-linear-gradient(top, #fefefe 0%, #ececec 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #ececec));
background: -webkit-linear-gradient(top, #fefefe 0%, #ececec 100%);
background: -o-linear-gradient(top, #fefefe 0%, #ececec 100%);
background: -ms-linear-gradient(top, #fefefe 0%, #ececec 100%);
background: linear-gradient(to bottom, #fefefe 0%, #ececec 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fefefe', endColorstr='#ececec', GradientType=0);
}
.linkedinShare .linkedinButton .pluginButtonLabel span {
color: #333;
font-size: 11px;
font-family: Arial, sans-serif;
font-weight: bold;
font-style: normal;
-webkit-font-smoothing: antialiased;
display: inline-block;
background: transparent none;
vertical-align: top;
height: 18px;
line-height: 20px;
float: none;
}
.linkedinShare .linkedinCount {
padding: 0px;
margin: 0px;
text-indent: 0px;
display: inline-block;
vertical-align: baseline;
}
.linkedinShare .linkedinCount .pluginCountButton {
display: inline-block;
overflow: visible;
position: relative;
height: 18px;
padding-left: 2px;
}
.linkedinShare .linkedinCount .pluginCountButton .pluginCountButtonRight {
display: block;
float: left;
height: 18px;
padding-right: 4px;
background-image: url(https://www.linkedin.com/scds/common/u/images/apps/connect/sprites/sprite_connect_v14.png);
background-color: transparent;
background-repeat: no-repeat;
background-position: right -100px;
}
.linkedinShare .linkedinCount .pluginCountButton .pluginCountButtonRight .pluginCountButtonLeft {
display: block;
float: left;
padding-left: 8px;
text-align: center;
background-image: url(https://www.linkedin.com/scds/common/u/images/apps/connect/sprites/sprite_connect_v14.png);
background-color: transparent;
background-repeat: no-repeat;
background-position: 0px -60px;
}
.linkedinShare .linkedinCount .pluginCountButton .pluginCountButtonRight .pluginCountButtonLeft span {
display: inline;
font-size: 11px;
color: #04558B;
font-weight: bold;
font-family: Arial, sans-serif;
line-height: 18px;
padding: 0 2px;
}
// Code goes here
'use strict';
/*
* * angular-socialshare v0.0.1
* * ♡ CopyHeart 2014 by Dayanand Prabhu http://djds4rce.github.io
* * Copying is an act of love. Please copy.
* * Edited with ♡ by James Gill @haxxxton
* */
angular.module('djds4rce.angular-socialshare', [])
.factory('$FB',['$window',function($window){
return {
init: function(fbId){
if(fbId){
this.fbId = fbId;
$window.fbAsyncInit = function() {
FB.init({
appId: fbId,
channelUrl: 'app/channel.html',
status: true,
xfbml: true
});
};
(function(d){
var js,
id = 'facebook-jssdk',
ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement('script');
js.id = id;
js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
}
else{
throw("FB App Id Cannot be blank");
}
}
};
}]).directive('facebook', ['$timeout','$http', function($timeout,$http) {
return {
scope: {
shares: '='
},
transclude: true,
template: '<div class="facebookButton">' +
'<div class="pluginButton">' +
'<div class="pluginButtonContainer">' +
'<div class="pluginButtonImage">' +
'<button type="button">' +
'<i class="pluginButtonIcon img sp_plugin-button-2x sx_plugin-button-2x_favblue"></i>' +
'</button>' +
'</div>' +
'<span class="pluginButtonLabel">Share</span>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="facebookCount">' +
'<div class="pluginCountButton pluginCountNum">' +
'<span ng-transclude></span>' +
'</div>' +
'<div class="pluginCountButtonNub"><s></s><i></i></div>' +
'</div>',
link: function(scope, element, attr) {
if(attr.shares){
$http.get('https://api.facebook.com/method/links.getStats?urls='+attr.url+'&format=json').success(function(res){
var count = res[0].share_count.toString();
var decimal = '';
if(count.length > 6){
if(count.slice(-6,-5) != "0"){
decimal = '.'+count.slice(-6,-5);
}
count = count.slice(0, -6);
count = count + decimal + 'M';
}else if(count.length > 3){
if(count.slice(-3,-2) != "0"){
decimal = '.'+count.slice(-3,-2);
}
count = count.slice(0, -3);
count = count + decimal + 'k';
}
scope.shares = count;
}).error(function(){
scope.shares = 0;
});
}
$timeout(function(){
element.bind('click',function(e){
FB.ui(
{method: 'share',
href: attr.url
});
e.preventDefault();
});
});
}
};
}]).directive('twitter',['$timeout',function($timeout) {
return {
link: function(scope, element, attr) {
$timeout(function() {
twttr.widgets.createShareButton(
attr.url,
element[0],
function() {}, {
count: attr.count,
text: attr.text,
via: attr.via,
size: attr.size
}
);
});
}
};
}]).directive('linkedin', ['$timeout','$http', '$window',function($timeout,$http,$window) {
return {
scope: {
shares: '='
},
transclude: true,
template: '<div class="linkedinButton">' +
'<div class="pluginButton">' +
'<div class="pluginButtonContainer">' +
'<div class="pluginButtonImage">in' +
'</div>' +
'<span class="pluginButtonLabel"><span>Share</span></span>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="linkedinCount">' +
'<div class="pluginCountButton">' +
'<div class="pluginCountButtonRight">' +
'<div class="pluginCountButtonLeft">' +
'<span ng-transclude></span>' +
'</div>' +
'</div>' +
'</div>' +
'</div>',
link: function(scope, element, attr) {
if(attr.shares){
$http.jsonp('http://www.linkedin.com/countserv/count/share?url='+attr.link+'&callback=JSON_CALLBACK&format=jsonp').success(function(res){
scope.shares = res.count.toLocaleString();
}).error(function(){
scope.shares = 0;
});
}
$timeout(function(){
element.bind('click',function(){
var url = encodeURIComponent(attr.url).replace(/'/g,"%27").replace(/"/g,"%22")
$window.open("//www.linkedin.com/shareArticle?mini=true&url="+url+"&title="+attr.title+"&summary="+attr.summary);
});
});
}
};
}]).directive('gplus',[function(){
return {
link: function(scope,element,attr){
if(typeof gapi == "undefined"){
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
}
}
};
}]);