murhafsousli/ngx-sharebuttons

Angular Share Buttons ☂

Angular Share Buttons

Documentation

For the documentation see the WIKI page.

Packages

• ngx-sharebuttons - Share button directive to convert any element to a share button.
• ngx-sharebuttons/button - Share button component to add buttons individually.
• ngx-sharebuttons/buttons - Share buttons component to add a collection of share buttons.
• ngx-sharebuttons/icons - Simplifies import the share icons from FontAwesome.

Available buttons

1. Facebook
2. Twitter
3. LinkedIn
4. Pinterest
5. WhatsApp
6. Messenger
7. Viber
8. Reddit
9. Tumblr
10. Telegram
11. Email
12. SMS
13. VK
14. Mix
15. Xing
16. Line
17. Copy link
18. Print

Need more buttons?

The plugin allows you to add your own buttons as well. if you like to add a new share button to this package feel free to submit a PR, or open an issue with dev docs link of the social network you want to include.

Issues

If you identify any errors in this component, or have an idea for an improvement, please open an issue.

Support

Author

Murhaf Sousli

• github/murhafsousli
• twitter/murhafsousli

More plugins by the author

• ngx-gallery
• ngx-progressbar
• ngx-bar-rating
• ngx-disqus
• ngx-wordpress
• ngx-highlightjs
• ngx-scrollbar
• ngx-teximate

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

ngx-sharebuttons's Issues

Tweet text exceeds its limit

Shorten text to fit the tweet

image and event count not working on twitter

Hi i have this code :
<div> <button class="btn btn-facebook " (sbCount)="sumCounts($event)" [shareButton]="'facebook'"[sbUrl]="url+magazine.id" [sbShowCount]="true" [sbTitle]="'Magazine'" [sbImage]="magazine.coverpageImage" [sbDescription]="'Découvrer mon dernier magazine sur Folomi'" (click)="back()" ><i class="fa fa-facebook"></i></button> <button class="btn btn-twitter " (sbCount)="sumCounts($event)" [shareButton]="'twitter'" [sbUrl]="url+magazine.id" [sbShowCount]="true" [sbTitle]="'Magazine'" [sbImage]="magazine.coverpageImage" [sbDescription]="'Découvrer mon dernier magazine sur Folomi'" (click)="back()" ><i class="fa fa-twitter"></i></button> <button class="btn btn-google " (sbCount)="sumCounts($event)" [shareButton]="'GOOGLEPLUS'" [sbUrl]="url+magazine.id" [sbShowCount]="true" [sbTitle]="'Magazine'" [sbImage]="magazine.coverpageImage" [sbDescription]="'Découvrer mon dernier magazine sur Folomi'" (click)="back()" ><i class="fa fa-google"></i></button> </div>
Angular 2 version 2.4.9
the facebook image link is showed when sharing and also the event count work but google and twitter don't show the image, the event count is not working with twitter, description not showed in google+.
Please help

Customization

Hi! In the customization, you say: "Each share service has its own button template, pass your custom button template as string in its input, e.g. give facebook a custom template [facebook]="facebookTemplate"."
What exactly "facebookTemplate" is and how to apply style for other class like: sb-buttons after I set default style to false? Thanks

Support for Angular 2.0.2

Hello,

We are currently using Angular 2.0.2 and would really like to use your social share module, but it looks as if there is a hard dependency on Angular 2.0.0 in your package.json file. Is this intentional, or did you intend to specify ~2.0.0 or ^2.0.0?

Thanks,
Mike

Getting only the like counts

Is there any easy way to just pass a social media profile type from ShareProvider, ala. FACEBOOK and a FACEBOOK url and get the like count, without creating a button?

I have pondered around the source code, but the count() functions seem to be private and I'd rather not tamper with the source code.

I am asking this because on some pages, I just need to show the like count of some social profiles, without having a button on sharing, and furthermore I need to do this dynamically, eg. ngFor="let socialProfile of socialProfiles" and as such, using components as you suggested in your advanced usage scenarios ( eg. on ngOnInit use this.twitterButton = ...) and then using that in the directive requires too much code for a simple task.

Image doesn't get displayed ! Please help

When i pass [image]=" 'http://www.xyz.com/image.jpg?alt=media&token=xyz12345' "
It doesn't share the image. When i checked the url of image that is being share,

It was src=" 'http://www.xyz.com/image.jpg?alt=media' " i.e. The token went missing.
Due to the above problem i am unable to use the module. Kindly revert back asap.

Pinterest share button not working

Hi, do I need to configure pinterest with some additional attributes?
When I click the pinterest share button I get the following error:

TypeError: Cannot read property 'getAttribute' of null
    at Object.pinShare (share-links.functions.js:86)
    at ShareButtonsService.share (share-buttons.service.js:48)
    at ShareButtonComponent.share (share-button.component.js:65)
    at CompiledTemplate.proxyViewClass.View_ShareButtonComponent0.handleEvent_0 (component.ngfactory.js:26)
    at HTMLButtonElement.<anonymous> (dom_renderer.js:512)
    at ZoneDelegate.invokeTask (zone.js:275)
    at Object.onInvokeTask (ng_zone.js:262)
    at ZoneDelegate.invokeTask (zone.js:274)
    at Zone.runTask (zone.js:151)
    at HTMLButtonElement.ZoneTask.invoke (zone.js:345)

All the other sharing services work fine.
Thanks for your help.

Share on the social app directly on mobile

for mobile usage, Instead of opening the share dialog on mobile browser we can share directly on the app. we can use user agent e.g. navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|i) or window.innerWidth for device detection

:root break the layout of my entire app

Hello,

This code:

:root {
  font-size: 16px;
}

Will break every project using em/rem units. When using thoses, the font-size is most of the time set to font-size: 62.5% to be able to have 1em = 10px, but because of this line all the layout is broken.

Why imposing a font-size to all the application (:root = <html>), why not only :host ?

ShareButtonsModule is not an NgModule

Hello, First thanks for your plugin. It's really awesome. Today, I updated angular, angular-cli and node. But I have few error with this plugin.

node v7.2.0
angular 2.2.3
angular-cli : 1.0.0-beta.22-1
OS : MacOs 10.11.6 (El Capitan)

ng build return this error :
10% building modules 2/2 modules 0 activeShareButtonsModule is not an NgModule Error: ShareButtonsModule is not an NgModule at AotPlugin.getNgModuleMetadata (/Applications/MAMP/htdocs/foo/node_modules/@ngtools/webpack/src/plugin.js:332:19) at /Applications/MAMP/htdocs/foo/node_modules/@ngtools/webpack/src/plugin.js:345:51 at Array.map (native) at AotPlugin.extractLoadChildren (/Applications/MAMP/htdocs/foo/node_modules/@ngtools/webpack/src/plugin.js:343:14) at AotPlugin._processNgModule (/Applications/MAMP/htdocs/foo/node_modules/@ngtools/webpack/src/plugin.js:272:38) at /Applications/MAMP/htdocs/foo/node_modules/@ngtools/webpack/src/plugin.js:242:39 at process._tickCallback (internal/process/next_tick.js:103:7)

And ng build --prod --aot : and (got stuck at 19%)
10% building modules 2/2 modules 0 active(node:9701) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: Unexpected value 'ShareButtonsModule' imported by the module 'AppModule' (node:9701) DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code. 19% building modules 78/78 modules 0 active

I think for the first error (with ng build). It's because of the update of angular 2.2.3
But for the second error, I think It's because of the update from node 6 => node 7

Thanks in advance for you help

Order of share buttons using `share-buttons` component

Is it possible to define the order of the buttons in the share buttons component? I'd like to use the container and everything as it is, but I'd like to customize the order of the providers.

If not, I'll be happy to do a PR if a hint for the implementation could be given :)

Thanks for an awesome library!

Title text can't be included on Twitter Button

Hi I could implement share bottons.
But the title text can't be included on the Twitter button when I click button.
The Facebook button is going well.

<share-buttons [showCount]="ture" [title]="title" [pinterest]="false" [reddit]="false" [stumbleUpOn]="false" [google]="false" [whatsApp]="false" [tumblr]="false" [linkedIn]="false" ></share-buttons>

Thank you.

Single shareButton with 'google' is not working

Using angular 4.0.0-rc.3 and ng2-sharebuttons 2.0.1

The following leads to an error:

<button md-mini-fab [shareButton]="'google'"><i class="fa fa-google"></i></button>

error:

EXCEPTION: [shareButton] must be set to one of the values (numeric or string) of ShareProvider enum: was 'google'

[url] value from component class

I get invalid url when I try to pass in the [url] from class.

export someclass {
 url = `https://someurl.com/${this.item.sid}/${this.item.item}/`
}

 <share-buttons [shareTitle]="'Total Shares - '"
      [url]= "'url'"
      ></share-buttons>

ShareButtons: Invalid URL, switching to window.location.href

Callback functions after the share functionality is done

Hi - I was wondering if it's possible (and if so, how) I can trigger callback functions after a social media link is triggered and complete. Thanks!

Passing description instead of using Meta Data?

How can i pass the description since i have a dynamic text, can you please help?

Thanks

Showing error when I import "ShareButtonsModule" in application

Showing below error like,
"ShareButtonsModule is not an NgModule"

Please help me out for this error.

AOT compile

Hi, thanks for this great library.

I am trying to compile to AOT but I get the following error:
Error: Error encountered resolving symbol values statically. Could not resolve ng2-sharebuttons relative to..

Does the libarary support AOT at this time?

Thanks!

Consider using tags for releases

And keep the last version published in npm.

Share button with hashlocationstrategy URL.

When i am setting Dyanmic Url to share button let suppose

https://mywebsite.com/#/abc/234

than your share button will share url only as https://mywebsite.com instead of sharing Full URL address.

PS: Binding is dynamic from Rest API.

AOT Fails.

Error: Unexpected value 'ShareButtonsModule' imported by the module 'AppModule'
    at /Projects/SL/anothernode_modules/@angular/compiler/bundles/compiler.umd.js:13996:37
    at Array.forEach (native)
    at CompileMetadataResolver.getNgModuleMetadata (/Projects/SL/anothernode_modules/@angular/compiler/bundles/compiler.umd.js:13981:46)
    at /Projects/SL/anothernode_modules/@angular/compiler/bundles/compiler.umd.js:12801:47
    at Array.forEach (native)
    at analyzeModules (/Projects/SL/anothernode_modules/@angular/compiler/bundles/compiler.umd.js:12800:17)
    at OfflineCompiler.analyzeModules (/Projects/SL/anothernode_modules/@angular/compiler/bundles/compiler.umd.js:12826:18)
    at CodeGenerator.codegen (/Projects/SL/anothernode_modules/@angular/compiler-cli/src/codegen.js:122:47)
    at codegen (/Projects/SL/anothernode_modules/@angular/compiler-cli/src/main.js:7:81)
    at Object.main (/Projects/SL/anothernode_modules/@angular/tsc-wrapped/src/main.js:30:16)
Compilation failed

Add email button

LinkedIn Sharing URL

LinkedIn Share button shows the following error in the popup windows
We’re sorry. Something unexpected happened and your request could not be completed. Please close this window and try again.

I use this share link which I got from LinkedIn Offical Docs

linkLinkedin = 'http://www.linkedin.com/shareArticle?url=' + url;

Even their example at the end of the page gives the same error.
https://www.linkedin.com/shareArticle?mini=true&url=http://developer.linkedin.com&title=LinkedIn%20Developer%20Network &summary=My%20favorite%20developer%20program&source=LinkedIn

Detecting when share button is clicked

Hi, thanks alot for your help.
Is it possible to detect which share button is clicked? I need this because I would like to change the description depending on which share button is clicked. Forinstance Twitter might have a shorter description than Facebook since there are total character limits, and I might want to include the title information because Twitter doesn´t use the Title field like Facebook.

Thanks!

StumbleUpOn Share count

Unable to get the timestamp count for URL from StumbleUpOn, the response works in the browser but not within the app, I applied what is written on the Badge API documentation site, and I got the following error:

XMLHttpRequest cannot load http://www.stumbleupon.com/services/1.01/badge.getinfo?url=https://twitter.com. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

I switched to JSONP, and I tried

var url = 'http://www.stumbleupon.com/services/1.01/badge.getinfo?url=http://www.treehugger.com/&format=json&callback=JSONP_CALLBACK';

var getStumbleUpOnCount = () =>{
    return this.jsonp.request(url).map(..)...
}

and I got a response with error:

Response {
   _body: "JSONP injected script did not invoke callback."
   , status: 200, ok: true, statusText: "Ok", headers: Headers…
}

It seems that StumbleUpOn API doesn't support JSONP .. waiting for a miracle

Instagram Share

If possible please add the Instagram icon too for sharing.

1.1.2 Update Error

@tinesoft After pushing the updates to npm in 1.1.2, I get this error

ERROR in Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supporte
d. Consider replacing the function or lambda with a reference to an exported function, resolving symbol NgModule in C:/Users/Mur
haf/Documents/GitHub/ng2-sharebuttons/demo/node_modules/ng2-sharebuttons/node_modules/@angular/core/src/metadata/ng_module.d.ts,
 resolving symbol NgModule in C:/Users/Murhaf/Documents/GitHub/ng2-sharebuttons/demo/node_modules/ng2-sharebuttons/node_modules/
@angular/core/src/metadata.d.ts, resolving symbol NgModule in C:/Users/Murhaf/Documents/GitHub/ng2-sharebuttons/demo/node_module
s/ng2-sharebuttons/node_modules/@angular/core/src/core.d.ts, resolving symbol NgModule in C:/Users/Murhaf/Documents/GitHub/ng2-s
harebuttons/demo/node_modules/ng2-sharebuttons/node_modules/@angular/core/index.d.ts, resolving symbol ShareButtonsModule in C:/
Users/Murhaf/Documents/GitHub/ng2-sharebuttons/demo/node_modules/ng2-sharebuttons/dist/share-buttons.module.d.ts, resolving symb
ol ShareButtonsModule in C:/Users/Murhaf/Documents/GitHub/ng2-sharebuttons/demo/node_modules/ng2-sharebuttons/dist/share-buttons
.module.d.ts

I also want to mention that we should add index.js to the root because now importing is only possible from dist dir
import {ShareButtonsModule} from 'ng2-sharebuttons/dist

Google Plus is not working

Hi i am try to post in google plus but the post is not share in share dialog .

twitter and linkdin count is not showing in front end
plz help me urgent

Dynamic title, description and image not working.

I am setting dynamic value of title, description and image. But not working.
Template :

     <share-buttons 
           [title]="fbShareTitle"
           [url]="'http://maprentalsstaging.azurewebsites.net'"
           [twitter]=false
           [google]=false
           [pinterest]=false
           [linkedIn]=false
           [tumblr]=false
           [reddit]=false
           [stumbleUpOn]=false
           [whatsApp]=false
           [description]="fbShareDescription" 
           [tags]="'tags'">
    </share-buttons>

In component I am setting like this :

   fbShareTitle = '';
   fbShareDescription = "";

   ngOnInit() {
	this.fbShareDescription = 'This is a first sharing description';   // Working fine here.
	this.fbShareTitle = 'Testing';             // Working fine here

            this.propertyService.getProperyById(this.propertyId)
	     .subscribe((data: any) => {
	            	let object = Object.assign({}, data);
	            	this.fbShareDescription = object.desc;    // This is not working
	                this.fbShareTitle = object.title;     // This is not working
            });
   }

Getting error :

Please any suggestion?
Thanks

whatsapp button blank window on web browser

Some features doesn't work on all social network buttons

For example:

[title], [description] and [image] doesn't work on Google plus
[image] doesn't work on twitter, it would be possible to add image feature on twitter?
[image] doesn't work on linkedin

whatsapp share button open a blank screen but doesn't open whatsapp (EDIT: not work if title or description has been configured. The image not work)

what would be wrong? Thanks

AOT

Do you plan to add AOT support?

convert single quotation in title and description

Convert unsupported single quotation for description and title inputs

example:

the text after the unsupported single quotation is skipped, it should be replaced with ' to become like

Custom share button only allows 1 class

Thanks for developing this - it is really helpful. I found an issue that is not a show-stopper, but I would like to correct:

There does not appear to be a way to pass in more than 1 class into a custom share button. For example here is a custom method I've written:

getTwitterButton(): ShareButton {
let twitterButton = new ShareButton(
ShareProvider.TWITTER,
" Tweet",
'btn btn-primary'
);
return twitterButton;
}

This throws an error:

inline template:17:4 caused by: Failed to execute 'add' on 'DOMTokenList': The token provided ('btn btn-primary') contains HTML space characters, which are not valid in tokens

if I just put 'btn' it works fine.

How do I pass in multiple classes?

Styles are missing

There are no .sass file in the repository, but you are compiling them in gulp.

could it be that they are missing? at least I am missing a lot of styles in my app (see the picture, "fa fa-facebook" don't get any styles..).
There is nothing displayed, just when I hover over the invisible buttons their color change like it should, but I am missing for example the "\F09A" in the facebook sharing button and so on...

do you have any idea why? Did everything like the readme said.
I would be please if a fast solution is possible, because my project have to be finished in a few days... :(

Angular2 Universal support

Am getting this error when trying to run ng2-buttons with Angular2's Universal (prerender) on the server side:

EXCEPTION: window is not defined
ORIGINAL STACKTRACE:
ReferenceError: window is not defined
    at e.ngAfterViewInit (/var/www/drupal/frontend/universal-starter/node_modules/ng2-sharebuttons/dist/components/share-button/share-button.component.js:1:983)

It works without prerender. This is a common error it seems in components that try to use window.

Add whatsapp share button

hash symbol inside description

Hi, I am trying to share the hash symbol in the description variable but it doesn't appear in the sharing dialog. Is this even possible? I know there is the tags variable but I want the hash tags to be part of the description because I am sharing a user comment.

Thanks!

Is there a way to turn off whatsapp in the bar?

This attribute seems to be missing... Thanks!

Not working in systemjs

When I tried to integrate in systemjs based app it is not working. How ever your plugin works in angular-cli. Can you please fix it or guide me through the process, I am ready to contribute as well

Share URL doesn't update when router URL changes

When application load, and then i share url it take work properly and when i select value in the drop down, a route will change at this time when i share a url it take old url not initial url.

Ex:
Steps: 1- Initial url when application load: http://localhost:4200/#/tracker/2015
Step: 2- Share url , it take http://localhost:4200/#/tracker/2015 ( which is correct )
Step:3 - Change year form drop down, from 2015 to 2007, now url change to http://localhost:4200/#/tracker/2007

Step:4 - When i share, it take initial url that is http://localhost:4200/#/tracker/2015 , that the issue, it cannot take current url

Note : iam not using [url] property of plugin

Compiled in aot on npm not working for normal use

It seems the deployed version on npm was compiled using aot comiler, and thus has an export in the index.js file which crashes when we try to build our project without aot. Is there a way around this?

Can't get basic example to work

I get an error trying to implement the basic example, any idea what the issue is? Thx

Error: No provider for ShareButtonsService!

I am getting error of No provider for ShareButtonsService. Please any suggestion?

How to make it a modal instead of window popup?

After clicking on e.g. the share button for facebook, it's now a window popup, how do I make it a modal?

Sanitize warning

WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).

How to fix this?

Facebook share show blank dialog for a second and disappear

On production server I have this issue:
When I click on button to share the page on Facebook I get a blank dialog for a second and later it disappear.

Can you help me?

Error on console.

Hello,
I'm getting following error on console.

                    <share-buttons
                            [url]="requestLink"
                            [count]="true"
                            [totalCount]="false"

                            [pinterest]="false"
                            [linkedIn]="false"
                            [tumblr]="false"
                            [reddit]="false"
                            [stumbleUpOn]="false"
                    ></share-buttons>

[networking] create a gitter community for the project

Gitter is a chat and networking platform that helps to manage, grow and connect communities through messaging, content and discovery.

This tool can help us discuss better about future developments on the project (via private one-to-one chat), along with allowing public users to ask questions, share tips and experience about using ng2-sharebuttons, ...

Once you signed it with you github account, you can create a community from the project: https://gitter.im/home#createcommunity

ng2-sharebuttons/dist.js not found