How to Create Share Buttons for Your Website using Angular
Creating share buttons for your Angular website is easy!
First, add the following to your HTML component. If you put it on the root "app.component.html", it will appear globally on all of your pages:
Was this page useful? Share it! | <a style="color:navy;cursor:pointer" (click)="facebook()"><img src="../assets/facebook.png" /> Facebook</a> |
<a style="color:navy;cursor:pointer" (click)="twitter()"><img src="../assets/twitter.png" /> Twitter/X</a>
You'll need to add icons for facebook and twitter in your assets folder. Otherwise, just delete the img tags.
Next, add the following to your .ts script file:
facebook() {
var url = 'http://www.facebook.com/sharer.php';
url += '?u=' + encodeURIComponent(window.location.href);
this.popup(url);
}
twitter() {
var url = 'http://twitter.com/share?';
url += 'text=' + encodeURIComponent(document.title);
url += '&url=' + encodeURIComponent(window.location.href);
url += '&counturl=' + encodeURIComponent(window.location.href);
this.popup(url);
}
popup(url: string) {
window.open(url, '', 'toolbar=0,status=0,width=626, height=436');
}
Created By: amos 8/22/2023 10:34:08 PM
|
|