murhafsousli / ngx-sharebuttons Goto Github PK
View Code? Open in Web Editor NEWAngular Share Buttons ☂
Home Page: https://ngx-sharebuttons.netlify.app/
License: MIT License
Angular Share Buttons ☂
Home Page: https://ngx-sharebuttons.netlify.app/
License: MIT License
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?
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
How can i pass the description since i have a dynamic text, can you please help?
Thanks
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'
This attribute seems to be missing... Thanks!
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
WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
How to fix this?
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!
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
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
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
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
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
And keep the last version published in npm.
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.
I am getting error of No provider for ShareButtonsService. Please any suggestion?
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
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
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
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!
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.
Showing below error like,
"ShareButtonsModule is not an NgModule"
Please help me out for this error.
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... :(
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
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.
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
After clicking on e.g. the share button for facebook, it's now a window popup, how do I make it a modal?
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.
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.
Do you plan to add AOT support?
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
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!
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!
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
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!
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.
@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
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
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
?
Shorten text to fit the tweet
If possible please add the Instagram icon too for sharing.
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.