<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS directives for social sharing buttons - Facebook Like, Google+, Twitter and Pinterest</title>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
</head>
<body>
<div ng-controller="myController" class="jumbotron text-center">
<div class="container">
<div class="col-xs-3">
<div fb-like="myModel.Url"></div>
</div>
<div class="col-xs-3">
<div tweet="myModel.Name" tweet-url="myModel.Url"></div>
</div>
<div class="col-xs-3">
<div google-plus="myModel.Url"></div>
</div>
<div class="col-xs-3">
<div pin-it="myModel.Name" pin-it-image="myModel.ImageUrl" pin-it-url="myModel.Url"></div>
</div>
</div>
</div>
<div class="credits text-center">
<p>
<a href="http://www.jasonwatmore.com/post/2014/08/01/AngularJS-directives-for-social-sharing-buttons-Facebook-Like-GooglePlus-Twitter-and-Pinterest.aspx">AngularJS directives for social sharing buttons</a>
</p>
<p>
<a href="http://www.jasonwatmore.com">www.jasonwatmore.com</a>
</p>
</div>
<script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://code.angularjs.org/1.2.16/angular.js"></script>
<script src="angulike.js"></script>
<script src="app.js"></script>
</body>
</html>
angular.module('myApp', ['angulike'])
.run([
'$rootScope', function ($rootScope) {
$rootScope.facebookAppId = '[FacebookAppId]'; // set your facebook app id here
}
]);
angular.module('myApp')
.controller('myController', [
'$scope', function ($scope) {
$scope.myModel = {
Url: 'http://jasonwatmore.com/post/2014/08/01/AngularJS-directives-for-social-sharing-buttons-Facebook-Like-GooglePlus-Twitter-and-Pinterest.aspx',
Name: "AngularJS directives for social sharing buttons - Facebook, Google+, Twitter and Pinterest | Jason Watmore's Blog",
ImageUrl: 'http://www.jasonwatmore.com/pics/jason.jpg'
};
}
]);
/**
* AngularJS directives for social sharing buttons - Facebook Like, Google+, Twitter and Pinterest
* @author Jason Watmore <jason@pointblankdevelopment.com.au> (http://jasonwatmore.com)
* @version 1.2.0
*/
(function () {
angular.module('angulike', [])
.directive('fbLike', [
'$window', '$rootScope', function ($window, $rootScope) {
return {
restrict: 'A',
scope: {
fbLike: '=?'
},
link: function (scope, element, attrs) {
if (!$window.FB) {
// Load Facebook SDK if not already loaded
$.getScript('//connect.facebook.net/en_US/sdk.js', function () {
$window.FB.init({
appId: $rootScope.facebookAppId,
xfbml: true,
version: 'v2.0'
});
renderLikeButton();
});
} else {
renderLikeButton();
}
var watchAdded = false;
function renderLikeButton() {
if (!!attrs.fbLike && !scope.fbLike && !watchAdded) {
// wait for data if it hasn't loaded yet
watchAdded = true;
var unbindWatch = scope.$watch('fbLike', function (newValue, oldValue) {
if (newValue) {
renderLikeButton();
// only need to run once
unbindWatch();
}
});
return;
} else {
element.html('<div class="fb-like"' + (!!scope.fbLike ? ' data-href="' + scope.fbLike + '"' : '') + ' data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>');
$window.FB.XFBML.parse(element.parent()[0]);
}
}
}
};
}
])
.directive('googlePlus', [
'$window', function ($window) {
return {
restrict: 'A',
scope: {
googlePlus: '=?'
},
link: function (scope, element, attrs) {
if (!$window.gapi) {
// Load Google SDK if not already loaded
$.getScript('//apis.google.com/js/platform.js', function () {
renderPlusButton();
});
} else {
renderPlusButton();
}
var watchAdded = false;
function renderPlusButton() {
if (!!attrs.googlePlus && !scope.googlePlus && !watchAdded) {
// wait for data if it hasn't loaded yet
watchAdded = true;
var unbindWatch = scope.$watch('googlePlus', function (newValue, oldValue) {
if (newValue) {
renderPlusButton();
// only need to run once
unbindWatch();
}
});
return;
} else {
element.html('<div class="g-plusone"' + (!!scope.googlePlus ? ' data-href="' + scope.googlePlus + '"' : '') + ' data-size="medium"></div>');
$window.gapi.plusone.go(element.parent()[0]);
}
}
}
};
}
])
.directive('tweet', [
'$window', '$location',
function ($window, $location) {
return {
restrict: 'A',
scope: {
tweet: '=',
tweetUrl: '='
},
link: function (scope, element, attrs) {
if (!$window.twttr) {
// Load Twitter SDK if not already loaded
$.getScript('//platform.twitter.com/widgets.js', function () {
renderTweetButton();
});
} else {
renderTweetButton();
}
var watchAdded = false;
function renderTweetButton() {
if (!scope.tweet && !watchAdded) {
// wait for data if it hasn't loaded yet
watchAdded = true;
var unbindWatch = scope.$watch('tweet', function (newValue, oldValue) {
if (newValue) {
renderTweetButton();
// only need to run once
unbindWatch();
}
});
return;
} else {
element.html('<a href="https://twitter.com/share" class="twitter-share-button" data-text="' + scope.tweet + '" data-url="' + (scope.tweetUrl || $location.absUrl()) + '">Tweet</a>');
$window.twttr.widgets.load(element.parent()[0]);
}
}
}
};
}
])
.directive('pinIt', [
'$window', '$location',
function ($window, $location) {
return {
restrict: 'A',
scope: {
pinIt: '=',
pinItImage: '=',
pinItUrl: '='
},
link: function (scope, element, attrs) {
if (!$window.parsePins) {
// Load Pinterest SDK if not already loaded
(function (d) {
var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');
p.type = 'text/javascript';
p.async = true;
p.src = '//assets.pinterest.com/js/pinit.js';
p['data-pin-build'] = 'parsePins';
p.onload = function () {
if (!!$window.parsePins) {
renderPinItButton();
} else {
setTimeout(p.onload, 100);
}
};
f.parentNode.insertBefore(p, f);
}($window.document));
} else {
renderPinItButton();
}
var watchAdded = false;
function renderPinItButton() {
if (!scope.pinIt && !watchAdded) {
// wait for data if it hasn't loaded yet
watchAdded = true;
var unbindWatch = scope.$watch('pinIt', function (newValue, oldValue) {
if (newValue) {
renderPinItButton();
// only need to run once
unbindWatch();
}
});
return;
} else {
element.html('<a href="//www.pinterest.com/pin/create/button/?url=' + (scope.pinItUrl || $location.absUrl()) + '&media=' + scope.pinItImage + '&description=' + scope.pinIt + '" data-pin-do="buttonPin" data-pin-config="beside"></a>');
$window.parsePins(element.parent()[0]);
}
}
}
};
}
]);
})();