ng-social-media-share/src/index.ts

A reusable Angular component for social media share buttons.

import { Component, Input } from '@angular/core';

@Component({
  selector: 'social-media-share',
  template: `
    <div class="social-media-share">
      <a *ngFor="let platform of socialMediaList" [href]="getShareLink(platform)" target="_blank">
        <img [src]="getIconUrl(platform)" [alt]="platform">
      </a>
    </div>
  `,
  styles: [`
    .social-media-share {
      display: flex;
    }
    .social-media-share img {
      margin-right: 10px;
      width: 30px; 
      height: auto;
    }
  `]
})
export class SocialMediaShareComponent {
  @Input() url: string;
  @Input() width: number = 30; 
  @Input() platforms: string[] = []; 


  socialMediaList: string[] = [
    'facebook', 'twitter', 'linkedin', 'instagram', 'pinterest', 
    'whatsapp', 'reddit', 'tumblr', 'telegram', 'snapchat', 
    'youtube', 'email', 'medium' 
  ];

  getIconUrl(platform: string): string {
    return `https://cdn.jsdelivr.net/npm/simple-icons@5.15.2/icons/${platform}.svg`;
  }

  getShareLink(platform: string): string {
    switch(platform) {
      case 'facebook':
        return `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(this.url)}`;
      case 'twitter':
        return `https://twitter.com/intent/tweet?url=${encodeURIComponent(this.url)}`;
      case 'linkedin':
        return `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(this.url)}`;
      case 'instagram':
        return `https://www.instagram.com/share?url=${encodeURIComponent(this.url)}`;
      case 'pinterest':
        return `https://pinterest.com/pin/create/button/?url=${encodeURIComponent(this.url)}`;
      case 'whatsapp':
        return `https://api.whatsapp.com/send?text=${encodeURIComponent(this.url)}`;
      case 'reddit':
        return `https://reddit.com/submit?url=${encodeURIComponent(this.url)}`;
      case 'tumblr':
        return `https://www.tumblr.com/share/link?url=${encodeURIComponent(this.url)}`;
      case 'telegram':
        return `https://telegram.me/share/url?url=${encodeURIComponent(this.url)}`;
      case 'snapchat':
        return `https://www.snapchat.com/add/${encodeURIComponent(this.url)}`;
      case 'youtube':
        return `https://www.youtube.com/watch?v=${encodeURIComponent(this.url)}`;
      case 'email':
        return `mailto:?body=${encodeURIComponent(this.url)}`;
      case 'medium':
        return `https://medium.com/p/${encodeURIComponent(this.url)}`;
      default:
        return '';
    }
  }
}