DEV Community

Cover image for Adding the social media share buttons component to an Angular application
Rodrigo Kamada
Rodrigo Kamada

Posted on • Edited on

Adding the social media share buttons component to an Angular application

#angular #sharebuttons #beginners #tutorial

Introduction

Angular is a development platform for building WEB, mobile and desktop applications using HTML, CSS and TypeScript (JavaScript). Currently, Angular is at version 15 and Google is the main maintainer of the project.

ngx-sharebuttons is a share buttons component library with many social media supported.

Prerequisites

Before you start, you need to install and configure the tools:

Getting started

Create the Angular application

1. Let's create the application with the Angular base structure using the @angular/cli with the route file and the SCSS style format.



ng new angular-sharebuttons
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
CREATE angular-sharebuttons/README.md (1065 bytes)
CREATE angular-sharebuttons/.editorconfig (274 bytes)
CREATE angular-sharebuttons/.gitignore (604 bytes)
CREATE angular-sharebuttons/angular.json (3291 bytes)
CREATE angular-sharebuttons/package.json (1082 bytes)
CREATE angular-sharebuttons/tsconfig.json (783 bytes)
CREATE angular-sharebuttons/.browserslistrc (703 bytes)
CREATE angular-sharebuttons/karma.conf.js (1437 bytes)
CREATE angular-sharebuttons/tsconfig.app.json (287 bytes)
CREATE angular-sharebuttons/tsconfig.spec.json (333 bytes)
CREATE angular-sharebuttons/src/favicon.ico (948 bytes)
CREATE angular-sharebuttons/src/index.html (305 bytes)
CREATE angular-sharebuttons/src/main.ts (372 bytes)
CREATE angular-sharebuttons/src/polyfills.ts (2820 bytes)
CREATE angular-sharebuttons/src/styles.scss (80 bytes)
CREATE angular-sharebuttons/src/test.ts (788 bytes)
CREATE angular-sharebuttons/src/assets/.gitkeep (0 bytes)
CREATE angular-sharebuttons/src/environments/environment.prod.ts (51 bytes)
CREATE angular-sharebuttons/src/environments/environment.ts (658 bytes)
CREATE angular-sharebuttons/src/app/app-routing.module.ts (245 bytes)
CREATE angular-sharebuttons/src/app/app.module.ts (393 bytes)
CREATE angular-sharebuttons/src/app/app.component.scss (0 bytes)
CREATE angular-sharebuttons/src/app/app.component.html (24617 bytes)
CREATE angular-sharebuttons/src/app/app.component.spec.ts (1115 bytes)
CREATE angular-sharebuttons/src/app/app.component.ts (225 bytes)
✔ Packages installed successfully.
Enter fullscreen mode Exit fullscreen mode

2. Install and configure the Bootstrap CSS framework. Do steps 2 and 3 of the post Adding the Bootstrap CSS framework to an Angular application.

3. Install the @angular/cdk, @fortawesome/angular-fontawesome, @fortawesome/fontawesome-svg-core, @fortawesome/free-brands-svg-icons, @fortawesome/free-solid-svg-icons and ngx-sharebuttons libraries.



npm install @angular/cdk @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-solid-svg-icons ngx-sharebuttons
Enter fullscreen mode Exit fullscreen mode

4. Configure the ngx-sharebuttons library. Change the angular.json file and add the circles-dark-theme.scss file as below.



"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss",
  "node_modules/bootstrap-icons/font/bootstrap-icons.css",
  "node_modules/ngx-sharebuttons/themes/circles.scss",
  "node_modules/ngx-sharebuttons/themes/modern.scss",
  "src/styles.scss"
],
Enter fullscreen mode Exit fullscreen mode

5. Import the ShareButtonsModule and ShareIconsModule modules. Change the app.module.ts file and add the lines as below.



import { ShareButtonsModule } from 'ngx-sharebuttons/buttons';
import { ShareIconsModule } from 'ngx-sharebuttons/icons';

imports: [
  BrowserModule,
  AppRoutingModule,
  ShareButtonsModule,
  ShareIconsModule,
],
Enter fullscreen mode Exit fullscreen mode

6. Remove the contents of the AppComponent class from the src/app/app.component.ts file.

7. Remove the contents of the src/app/app.component.html file. Add the buttons component as below.



<div class="container-fluid py-3">
  <h1>Angular Share Buttons</h1>

  <share-buttons theme="circles-dark"
    [include]="['copy', 'facebook', 'email', 'messenger', 'mix', 'line', 'linkedin', 'pinterest', 'print', 'reddit', 'sms', 'telegram', 'tumblr', 'twitter', 'viber', 'vk', 'xing', 'whatsapp']"
    [showIcon]="true"
    [showText]="false"
    url="https://rodrigo.kamada.com.br/"
    description="Angular Share Buttons"
    twitterAccount="rodrigokamada"
    class="pt-5">
  </share-buttons>

  <share-buttons theme="modern-dark"
    [include]="['copy', 'facebook', 'email', 'messenger', 'mix', 'line', 'linkedin', 'pinterest', 'print', 'reddit', 'sms', 'telegram', 'tumblr', 'twitter', 'viber', 'vk', 'xing', 'whatsapp']"
    [showIcon]="true"
    [showText]="true"
    url="https://rodrigo.kamada.com.br/"
    description="Angular Share Buttons"
    twitterAccount="rodrigokamada"
    class="pt-5">
  </share-buttons>

  <share-buttons theme="modern-dark"
    [include]="['copy', 'facebook', 'email', 'messenger', 'mix', 'line', 'linkedin', 'pinterest', 'print', 'reddit', 'sms', 'telegram', 'tumblr', 'twitter', 'viber', 'vk', 'xing', 'whatsapp']"
    [showIcon]="false"
    [showText]="true"
    url="https://rodrigo.kamada.com.br/"
    description="Angular Share Buttons"
    twitterAccount="rodrigokamada"
    class="pt-5">
  </share-buttons>
</div>
Enter fullscreen mode Exit fullscreen mode

8. Run the application with the command below.



npm start

> angular-sharebuttons@1.0.0 start
> ng serve

✔ Browser application bundle generation complete.

Initial Chunk Files | Names         |      Size
vendor.js           | vendor        |   3.84 MB
styles.css          | styles        | 277.56 kB
polyfills.js        | polyfills     | 128.52 kB
scripts.js          | scripts       |  76.67 kB
main.js             | main          |  11.54 kB
runtime.js          | runtime       |   6.64 kB

                    | Initial Total |   4.33 MB

Build at: 2021-08-22T20:20:39.646Z - Hash: b18162a20902dbc8f4cf - Time: 20556ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully.
Enter fullscreen mode Exit fullscreen mode

9. Ready! Access the URL http://localhost:4200/ and check if the application is working. See the application working on GitHub Pages and Stackblitz.

Angular Share Buttons

The application repository is available at https://github.com/rodrigokamada/angular-sharebuttons.

This tutorial was posted on my blog in portuguese.

Top comments (4)

Collapse
 
matavic profile image
Vicente Mata •

Is there any way to share an image and not only a url?

Collapse
 
rodrigokamada profile image
Rodrigo Kamada •

Just URL or text message.

Collapse
 
rakhisshah profile image
Rakhi Shah •

Using this document im able to do this functionality..Thanks for this document.
but can you please suggest how to assign URL dynamically?
I tried using property binding nd interpolation its not working..do you have any example of dynamical URL?

Collapse
 
ofarril870616 profile image
ofarril870616 • • Edited

urlShared is variable in the component.ts

[include]="['copy', 'facebook', 'email', 'whatsapp']"
[showIcon]="true"
[showText]="false"
[url]=urlShared
description="Angular Share Buttons"
twitterAccount=""
class="pt-5"
style="text-align: center">

Read next

apurvupadhyay profile image

Qwen2.5 Coder — The Future of Local Code Generation! 🎉

Apurv Upadhyay -

auyeungdavid_2847435260 profile image

5 Essential SQL Skills Learned from a Decade of Experience

David Au Yeung -

prince_beec5ccde00b7c6c73 profile image

Smart Screen Animation using html css and javascript

Prince -

wizzyb profile image

Creating a Linux VM and installing nginx on it

Wisdom Benson -