Repository: djds4rce/angular-socialshare
Branch: master
Commit: cde17481c79d
Files: 8
Total size: 45.9 KB
Directory structure:
gitextract_aqwc0qfe/
├── .gitignore
├── README.md
├── angular-socialshare.css
├── angular-socialshare.js
├── angular-socialshare.less
├── bower.json
├── gulpfile.js
└── package.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
node_modules
================================================
FILE: README.md
================================================
Angular Social Share
=========
Angular Social Share is a collection of directives which lets you easily share your links various social networks. Currently Facebok, Google, Twitter and Linkdin are supported. Social Networks get the Meta data of the shared content like Title, Summary and Image from the Meta tags on the page by scraping. But Single Page Apps like Angular are unable to support crawling. But these dirictives use alternative so that Meta data is displayed where it is possible.
Checkout the [Demo].
Change Log
----
As of Verstion 1 This directive supports two way binding of data, so now you can populate the data in the directive from a HTTP request.
Future Plans
----
Support asyncronous loading of corresponding social plugin javascript assets.
Getting Started
-----
Install the library through bower.
```js
bower install angular-socialshare
```
Include the script (and optional css file) in your html file.
```html
<link rel='stylesheet' href="bower_components/angular-socialshare/angular-socialshare.min.css">
<script src="bower_components/angular-socialshare/angular-socialshare.min.js"></script>
```
Add to your APP's dependency.
```js
angular.module('testing',['djds4rce.angular-socialshare'])
```
IMPORTANT
----
For Correct Sharing of links and updating share count you must enable HTML5 Mode True for your application. i.e No `#` in URL'S .
```js
angular.module('testing').config(function($locationProvider){
$locationProvider.html5Mode(true).hashPrefix('!');
});
```
HTML5 Mode requires server configration [Explained Here]
Share on Facebook
----
Facebook share uses facebook API which requires us to provide a APPID. Register a facebook app and Configure the APPID in your appplication. Note that you will get an error regarding 'not permitted URL' if you are testing this button in a localhost environment.
```js
angular.module('testing').run(function($FB){
$FB.init('YOUR_APPID', 'COUNTRY_CODE'); // Country code format example: fr_FR
});
```
Use the Facebook Directive
```html
<a facebook class="facebookShare" data-url='http://google.com' data-shares='shares'>{{ shares }}</a>
```
As we are using Facebook share API and not the facebook share button, you will have to style your own Facebook button, or use the provided stylesheet that has styles for the horizontal count button. You also need to display the share count, which the directive fetches from a diffrent API. The directive has transclusion set to true. The latest Facebook share API only allows for a URL to be supplied, it will scrape the other data (image, title, description) from the supplied URL.
The Attributes for the directives are
```js
/*
data-url: URL of the Shared Content
data-shares: The Scope variable on which share count will be binded to. This lets you put
multiple share buttons on a single page and bind the share count to the respective model object.
data-callback: The Scope function which will receive [FB's Response object](https://developers.facebook.com/docs/javascript/reference/FB.ui)
data-translate: To change the text of the button. EX: data-translate="'Partager'"
*/
```
#### Share via Feed Dialog
The feed dialog works in the same way as the normal share dialog, but also has some addittional attributes available
```html
<a facebook-feed-share class="facebookShare" data-url='http://google.com' data-shares='shares', data-description="Example text">{{ shares }}</a>
```
```js
/*
data-url: URL of the Shared Content
data-shares: The Scope variable on which share count will be binded to. This lets you put
multiple share buttons on a single page and bind the share count to the respective model object.
data-picture: The URL of a picture attached to the share. The picture must be at least 200px by 200px.
data-source: The URL of a media file (either SWF or MP3) attached to this share. If SWF, you must also specify picture to provide a thumbnail for the video.
data-name: The name of the link attachment.
data-caption: The caption of the link (appears beneath the link name). If not specified, this field is automatically populated with the URL of the link.
data-description: The description of the link (appears beneath the link caption). If not specified, this field is automatically populated by information scraped from the link, typically the title of the page.
data-properties: A JSON object of key/value pairs which will appear in the stream attachment beneath the description, with each property on its own line. Keys must be strings, and values can be either strings or JSON objects with the keys text and href.
data-actions: A JSON array containing a single object describing the action link which will appear next to the 'Comment' and 'Like' link under posts. The contained object must have the keys name and link.
data-callback: The Scope function which will receive [FB's Response object](https://developers.facebook.com/docs/javascript/reference/FB.ui)
data-translate: To change the text of the button. EX: data-translate="'Partager'"
*/
```
Twitter
----
Include the twitter javascript in your HTML.
```html
<script src="http://platform.twitter.com/widgets.js"></script>
```
Add Directive to the element where you want to display your Twitter Button
```html
<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>
```
The Attributes for the directives are
```js
/*
data-lang: Language of the tweet
data-url: URL of the Shared Content
data-count: Position of the share counter
data-size: Size of the tweet button
data-text: Content of the tweet
data-via: User handle which will be tagged in the tweet
For options checkout https://dev.twitter.com/docs/tweet-button
*/
```
Linkedin
----
Although Linkedin has a share button and also a Javascript share API it does not take the title and the content as its parameters hence we will have to use the raw share URL to share the content.
Use the Linkedin Directive
```html
<div linkedin class="linkedinShare" data-url='http://www.google.com.au' data-title='Linkedin Share' data-summary="testing Linkedin Share" data-shares='linkedinshares'>{{linkedinshares}}</div>
```
Linkedin Directive works similar to the Facebook Mechanism. This will force us to add our own style to the button and also display count which is fetched by the directive through a diffrent API. The supplied stylesheet contains styling for the horizontal styled button.
The Attributes for the directives are
```js
/*
data-title: Title of the Shared Content
data-url: URL of the Shared Content
data-summary: Summary of the content
data-shares: The Scope variable on which share count will be binded to. This lets you put
multiple share buttons on a single page and bind the share count to the respective model object.
data-translate: To change the text of the button. EX: data-translate="'Partager'"
*/
```
Google +
----
```html
<div gplus class="g-plus" data-size="tall" data-annotation="bubble" data-href='http://google.com' data-action='share'></div>
```
For more information on the share button attributes check the [Google Share Documentation]
>If you change the class of the button to `g-plusone' it will be converted to a google plus one button.
Tumblr
----
#### Link Share
Include the tumblr javascript in your HTML.
```html
<script src="http://platform.tumblr.com/v1/share.js"></script>
```
```html
<div tumblr-text data-url='http://google.com' data-name='Sharing to Tumblr' data-title='test' data-buttontext='Sharing Text' data-styling="display:inline-block; text-indent:-9999px; overflow:hidden; width:129px; height:20px; background:url('http://platform.tumblr.com/v1/share_3.png') top left no-repeat transparent;" data-description='this is awesome'></div>
```
The Attributes for the directives are
```js
/*
data-url: URL of the content to be shared
data-name: Name of the content URL
data-title(Optional): Title of the button on hover
data-description: Description of the URL
data-style(Optional): Style of the button
*/
```
#### Qoute Share
```html
<div tumblr-qoute data-qoute='Texting Tumblr Qoute share' data-source='http://djds4rce.github.io'></div>
```
The Attributes for the directives are
```js
/*
data-source: Source URL of the qoute to be shared
data-qoute: Qoute to be shared
data-title(Optional): Title of the button on hover
data-style(Optional): Style of the button
*/
```
#### Image Share
```html
<div tumblr-image data-source='http://plnkr.co/img/plunker.png' data-caption='Image Share' data-clickthru='http://google.com'></div>
```
The Attributes for the directives are
```js
/*
data-source: Source URL of the Image to be shared
data-caption: Caption for the image
data-clickthru: clickthru URL for the image
data-title(Optional): Title of the button on hover
data-style(Optional): Style of the button
*/
```
#### Image Share
```html
<div tumblr-video data-embedcode='<iframe width="560" height="315" src="//www.youtube.com/embed/aqHBLS_6gF8" frameborder="0" allowfullscreen></iframe>'></div>
```
The Attributes for the directives are
```js
/*
data-embedcode: Embed code for the external video
data-caption: Caption for the Video
data-title(Optional): Title of the button on hover
data-style(Optional): Style of the button
*/
```
Pinterest
----
Include the Pinterest javascript in your HTML.
```html
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js" data-pin-build='parsePins'></script>
```
#### Usage
```html
<div pintrest data-href='http://google.com' data-description='testing share' data-img='http://plnkr.co/img/plunker.png' data-pin-do='buttonPin' data-pin-config='beside'></div>
```
The Attributes for the directives are
```js
/*
data-href: Url To be shared
data-Description: Description of the content
data-img: Image for the Pin
data-pin-do(Optional): Type of pin
data-pin-config(Optional): Pin count Orientation 'beside' or 'above'
*/
```
**Made with Love by [Djds4rce]**
**Additions with ♡ by [haxxxton]**
[Explained Here]:http://ericduran.io/2013/05/31/angular-html5Mode-with-yeoman/
[Demo]:http://plnkr.co/edit/Cah9FtwXDrUMQjChdBG2?p=info
[Google Share Documentation]:https://developers.google.com/+/web/share/
[Djds4rce]:http://djds4rce.wordpress.com/
[haxxxton]:http://gaandder.com/
Licenced Under MIT Licence.
================================================
FILE: angular-socialshare.css
================================================
.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;
}
================================================
FILE: angular-socialshare.js
================================================
'use strict';
/*
* * angular-socialshare v0.0.2
* * ♡ CopyHeart 2014 by Dayanand Prabhu http://djds4rce.github.io
* * Copying is an act of love. Please copy.
* */
angular.module('djds4rce.angular-socialshare', [])
.factory('$FB', ['$window', function($window) {
return {
init: function(fbId, languageCode) {
if (fbId) {
this.fbId = fbId;
languageCode = languageCode || 'en_US';
$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/" + languageCode + "/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
} else {
throw ("FB App Id Cannot be blank");
}
}
};
}]).directive('facebook', ['$http', function($http) {
return {
scope: {
callback: '=',
shares: '=',
translate: '=?'
},
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" ng-bind="translate"></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(scope.translate == undefined)
scope.translate = 'Share';
attr.$observe('url', function() {
if (attr.shares && attr.url) {
$http.get('http://graph.facebook.com/?id=' + attr.url + '&format=json', {withCredentials: false}).success(function(res) {
var count = (res && res.share && res.share.share_count) ?res.share.share_count.toString() : 0;
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;
});
}
element.unbind();
element.bind('click', function(e) {
FB.ui({
method: 'share',
href: attr.url
}, function(response){
if (scope.callback !== undefined && typeof scope.callback === "function") {
scope.callback(response);
}
});
e.preventDefault();
});
});
}
};
}]).directive('facebookFeedShare', ['$http', function($http) {
return {
scope: {
callback: '=',
shares: '=',
translate: '=?'
},
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" ng-bind="translate"></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(scope.translate == undefined)
scope.translate = 'Share';
attr.$observe('url', function() {
if (attr.shares && attr.url) {
$http.get('https://api.facebook.com/method/links.getStats?urls=' + attr.url + '&format=json', {withCredentials: false}).success(function(res) {
var count = res[0] ? res[0].total_count.toString() : 0;
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;
});
}
element.unbind();
element.bind('click', function(e) {
FB.ui({
method: 'feed',
link: attr.url,
picture: attr.picture,
name: attr.name,
caption: attr.caption,
description: attr.description
}, function(response){
if (scope.callback !== undefined && typeof scope.callback === "function") {
scope.callback(response);
}
});
e.preventDefault();
});
});
}
};
}]).directive('twitter', ['$timeout', function($timeout) {
return {
link: function(scope, element, attr) {
var renderTwitterButton = debounce(function() {
if (attr.url) {
$timeout(function() {
element[0].innerHTML = '';
twttr.widgets.createShareButton(
attr.url,
element[0],
function() {}, {
count: attr.count,
text: attr.text,
via: attr.via,
size: attr.size
}
);
});
}
}, 75);
attr.$observe('url', renderTwitterButton);
attr.$observe('text', renderTwitterButton);
}
};
}]).directive('linkedin', ['$timeout', '$http', '$window', function($timeout, $http, $window) {
return {
scope: {
shares: '=',
translate: '=?'
},
transclude: true,
template: '<div class="linkedinButton">' +
'<div class="pluginButton">' +
'<div class="pluginButtonContainer">' +
'<div class="pluginButtonImage">in' +
'</div>' +
'<span class="pluginButtonLabel"><span ng-bind="translate"></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(scope.translate == undefined)
scope.translate = 'Share';
var renderLinkedinButton = debounce(function() {
if (attr.shares && attr.url) {
$http.jsonp('https://www.linkedin.com/countserv/count/share?url=' + attr.url + '&callback=JSON_CALLBACK&format=jsonp').success(function(res) {
scope.shares = res.count.toLocaleString();
}).error(function() {
scope.shares = 0;
});
}
$timeout(function() {
element.unbind();
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);
});
});
}, 100);
attr.$observe('url', renderLinkedinButton);
attr.$observe('title', renderLinkedinButton);
attr.$observe('summary', renderLinkedinButton);
}
};
}]).directive('gplus', [function() {
return {
link: function(scope, element, attr) {
var googleShare = debounce(function() {
if (typeof gapi == "undefined") {
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
po.onload = renderGoogleButton;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
} else {
renderGoogleButton();
}
}, 100);
//voodo magic
var renderGoogleButton = (function(ele, attr) {
return function() {
var googleButton = document.createElement('div');
var id = attr.id || randomString(5);
attr.id = id;
googleButton.setAttribute('id', id);
element.innerHTML = '';
element.append(googleButton);
if (attr.class && attr.class.indexOf('g-plusone') != -1) {
window.gapi.plusone.render(id, attr);
} else {
window.gapi.plus.render(id, attr);
}
}
}(element, attr));
attr.$observe('href', googleShare);
}
};
}]).directive('tumblrText', [function() {
return {
link: function(scope, element, attr) {
var tumblr_button = document.createElement("a");
var renderTumblrText = debounce(function() {
tumblr_button.setAttribute("href", "https://www.tumblr.com/share/link?url=" + encodeURIComponent(attr.url) + "&name=" + encodeURIComponent(attr.name) + "&description=" + encodeURIComponent(attr.description));
tumblr_button.setAttribute("title", attr.title || "Share on Tumblr");
tumblr_button.setAttribute("style", attr.styling || "display:inline-block; text-indent:-9999px; overflow:hidden; width:81px; height:20px; background:url('https://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent;");
element[0].innerHTML = '';
element.append(tumblr_button);
}, 100);
attr.$observe('url', renderTumblrText);
attr.$observe('name', renderTumblrText);
attr.$observe('description', renderTumblrText);
}
}
}]).directive('tumblrQoute', [function() {
return {
link: function(scope, element, attr) {
var tumblr_button = document.createElement("a");
var renderTumblrQoute = debounce(function() {
tumblr_button.setAttribute("href", "https://www.tumblr.com/share/quote?quote=" + encodeURIComponent(attr.qoute) + "&source=" + encodeURIComponent(attr.source));
tumblr_button.setAttribute("title", attr.title || "Share on Tumblr");
tumblr_button.setAttribute("style", attr.styling || "display:inline-block; text-indent:-9999px; overflow:hidden; width:81px; height:20px; background:url('https://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent;");
element[0].innerHTML = '';
element.append(tumblr_button);
}, 100);
attr.$observe('qoute', renderTumblrQoute);
attr.$observe('source', renderTumblrQoute);
}
}
}]).directive('tumblrImage', [function() {
return {
link: function(scope, element, attr) {
var tumblr_button = document.createElement("a");
var renderTumblrImage = debounce(function() {
tumblr_button.setAttribute("href", "https://www.tumblr.com/share/photo?source=" + encodeURIComponent(attr.source) + "&caption=" + encodeURIComponent(attr.caption) + "&clickthru=" + encodeURIComponent(attr.clickthru));
tumblr_button.setAttribute("title", attr.title || "Share on Tumblr");
tumblr_button.setAttribute("style", attr.styling || "display:inline-block; text-indent:-9999px; overflow:hidden; width:81px; height:20px; background:url('https://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent;");
element[0].innerHTML = '';
element.append(tumblr_button);
}, 100);
attr.$observe('source', renderTumblrImage);
attr.$observe('caption', renderTumblrImage);
attr.$observe('clickthru', renderTumblrImage);
}
}
}]).directive('tumblrVideo', [function() {
return {
link: function(scope, element, attr) {
var tumblr_button = document.createElement("a");
var renderTumblrVideo = debounce(function() {
tumblr_button.setAttribute("href", "https://www.tumblr.com/share/video?embed=" + encodeURIComponent(attr.embedcode) + "&caption=" + encodeURIComponent(attr.caption));
tumblr_button.setAttribute("title", attr.title || "Share on Tumblr");
tumblr_button.setAttribute("style", attr.styling || "display:inline-block; text-indent:-9999px; overflow:hidden; width:81px; height:20px; background:url('https://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent;");
element[0].innerHTML = '';
element.append(tumblr_button);
}, 100);
attr.$observe('embedcode', renderTumblrVideo);
attr.$observe('caption', renderTumblrVideo);
}
}
}]).directive('pintrest', ['$window', '$timeout', function($window, $timeout) {
return {
template: '<a href="{{href}}" data-pin-do="{{pinDo}}" data-pin-config="{{pinConfig}}"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a>',
link: function(scope, element, attr) {
var pintrestButtonRenderer = debounce(function() {
var pin_button = document.createElement("a");
pin_button.setAttribute("href", '//www.pinterest.com/pin/create/button/?url=' + encodeURIComponent(attr.href) + '&media=' + encodeURIComponent(attr.img) + '&description=' + encodeURIComponent(attr.description));
pin_button.setAttribute("pinDo", attr.pinDo || "buttonPin");
pin_button.setAttribute("pinConfig", attr.pinConfig || "beside");
element[0].innerHTML = '';
element.append(pin_button);
$timeout(function() {
$window.parsePins(element);
});
}, 100);
attr.$observe('href', pintrestButtonRenderer);
attr.$observe('img', pintrestButtonRenderer);
attr.$observe('description', pintrestButtonRenderer);
}
}
}]);
//Simple Debounce Implementation
//http://davidwalsh.name/javascript-debounce-function
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this,
args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
//http://stackoverflow.com/questions/1349404/generate-a-string-of-5-random-characters-in-javascript
/**
* RANDOM STRING GENERATOR
*
* Info: http://stackoverflow.com/a/27872144/383904
* Use: randomString(length [,"A"] [,"N"] );
* Default: return a random alpha-numeric string
* Arguments: If you use the optional "A", "N" flags:
* "A" (Alpha flag) return random a-Z string
* "N" (Numeric flag) return random 0-9 string
*/
function randomString(len, an) {
an = an && an.toLowerCase();
var str = "",
i = 0,
min = an == "a" ? 10 : 0,
max = an == "n" ? 10 : 62;
for (; i++ < len;) {
var r = Math.random() * (max - min) + min << 0;
str += String.fromCharCode(r += r > 9 ? r < 36 ? 55 : 61 : 48);
}
return str;
}
================================================
FILE: angular-socialshare.less
================================================
.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;
&:hover .facebookButton .pluginButton,
&:active .facebookButton .pluginButton,
&: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;
}
.facebookButton{
color:#3b5998;
text-decoration: none;
font-size: 11px;
text-align: left;
display: inline-block;
width:55px;
.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;
.pluginButtonContainer {
-webkit-font-smoothing: antialiased;
text-shadow: 1px 1px 1px rgba(255,255,255,0.004);
.pluginButtonImage {
display: inline-block;
}
}
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;
.pluginButtonIcon {
height: 14px;
left: 0;
margin: 0 4px 0 4px;
position: relative;
top: 3px;
vertical-align: top;
width: 14px;
}
.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;
}
.sx_plugin-button-2x_favblue {
background-position: 0 -42px;
}
i.img {
-ms-high-contrast-adjust: none;
_overflow: hidden;
}
}
.pluginButtonLabel {
padding: 0 5px 0 0;
position: relative;
vertical-align: top;
}
}
}
.facebookCount{
display: inline-block;
width: auto;
.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;
span{
display: inline-block;
min-height:12px;
min-width:4px;
color:#333;
}
}
.pluginCountButtonNub {
height: 0;
left: 2px;
position: relative;
top: -15px;
width: 5px;
z-index: 2;
s,
i {
border-color: transparent #bbb;
border-style: solid;
border-width: 4px 5px 4px 0;
display: block;
position: relative;
top: 1px;
}
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;
&:hover .linkedinButton .pluginButtonLabel,
&:active .linkedinButton .pluginButtonLabel,
&: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 );
}
.linkedinButton{
display: inline-block;
width: 59px;
height:20px;
padding: 0;
margin: 0;
.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;
}
.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 );
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;
}
}
}
.linkedinCount{
padding: 0px;
margin: 0px;
text-indent: 0px;
display: inline-block;
vertical-align: baseline;
.pluginCountButton{
display: inline-block;
overflow: visible;
position: relative;
height: 18px;
padding-left: 2px;
.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;
.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;
span{
display: inline;
font-size: 11px;
color: #04558B;
font-weight: bold;
font-family: Arial, sans-serif;
line-height: 18px;
padding: 0 2px;
}
}
}
}
}
}
================================================
FILE: bower.json
================================================
{
"name": "angular-socialshare",
"main": [
"angular-socialshare.js",
"angular-socialshare.css",
"angular-socialshare.less"
],
"version": "1.4.4",
"authors": [
"djds4rce <djd4rce@gmail.com>"
],
"description": "Social Share buttons for AngularJS",
"keywords": [
"social",
"googleplus",
"facebook",
"twitter",
"linkdin"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}
================================================
FILE: gulpfile.js
================================================
var gulp = require('gulp');
var gutil = require('gulp-util');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
gulp.task('default', function(){
gulp.src('./angular-socialshare.js')
.pipe(rename('angular-socialshare.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./'));
});
================================================
FILE: package.json
================================================
{
"name": "angular-socialshare",
"version": "1.5",
"description": "Angular Social Share =========",
"main": "angular-socialshare.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/djds4rce/angular-socialshare.git"
},
"author": "",
"license": "MIT",
"bugs": {
"url": "https://github.com/djds4rce/angular-socialshare/issues"
},
"homepage": "https://github.com/djds4rce/angular-socialshare",
"dependencies": {
"gulp-rename": "^1.2.0",
"gulp-uglify": "^1.1.0",
"gulp-util": "^3.0.4"
}
}
gitextract_aqwc0qfe/ ├── .gitignore ├── README.md ├── angular-socialshare.css ├── angular-socialshare.js ├── angular-socialshare.less ├── bower.json ├── gulpfile.js └── package.json
SYMBOL INDEX (2 symbols across 1 files)
FILE: angular-socialshare.js
function debounce (line 381) | function debounce(func, wait, immediate) {
function randomString (line 407) | function randomString(len, an) {
Condensed preview — 8 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (51K chars).
[
{
"path": ".gitignore",
"chars": 13,
"preview": "node_modules\n"
},
{
"path": "README.md",
"chars": 10287,
"preview": "Angular Social Share\n=========\n\nAngular Social Share is a collection of directives which lets you easily share your link"
},
{
"path": "angular-socialshare.css",
"chars": 9315,
"preview": ".facebookShare {\n border: none;\n visibility: visible;\n width: auto;\n height: 22px;\n background: transparent;\n over"
},
{
"path": "angular-socialshare.js",
"chars": 14871,
"preview": "'use strict';\n\n/*\n * * angular-socialshare v0.0.2\n * * ♡ CopyHeart 2014 by Dayanand Prabhu http://djds4rce.github.io\n"
},
{
"path": "angular-socialshare.less",
"chars": 11135,
"preview": ".facebookShare{\n border: none;\n visibility: visible;\n width: auto;\n height: 22px;\n background: transparen"
},
{
"path": "bower.json",
"chars": 495,
"preview": "{\n \"name\": \"angular-socialshare\",\n \"main\": [\n \"angular-socialshare.js\",\n \"angular-socialshare.css\",\n \"angular"
},
{
"path": "gulpfile.js",
"chars": 303,
"preview": "var gulp = require('gulp');\nvar gutil = require('gulp-util');\nvar uglify = require('gulp-uglify');\nvar rename = require("
},
{
"path": "package.json",
"chars": 623,
"preview": "{\n \"name\": \"angular-socialshare\",\n \"version\": \"1.5\",\n \"description\": \"Angular Social Share =========\",\n \"main\": \"ang"
}
]
About this extraction
This page contains the full source code of the djds4rce/angular-socialshare GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 8 files (45.9 KB), approximately 12.6k tokens, and a symbol index with 2 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.