Social Sharing in Angular

This blog handles the requirement to include social sharing capability in your Angular application. This is one of the most common functional requirements in any application.

Below I have listed two approaches to achieve social sharing in an Angular application.

Using ng2-social-share

  1. Install using npm
    npm install --save ng2-social-share
  2. Import in app.module.ts or whichever module you want to include the sharing functionality.
    import { CeiboShare } from 'ng2-social-share';
  3. Include in the declarations of the @NgModule in app.module.ts
    @NgModule({
      bootstrap: [ AppComponent ],
      declarations: [
        AppComponent,
        CeiboShare
      ],
      imports: [ // import Angular's modules
        BrowserModule,
       ],
    })
  4. In the component.ts file where you need to use declare and provide value for the variables needed. Below shown for Facebook providing the url to be shared:
    public repoUrl:string;
    this.repoUrl="http://www.rd.com/health/diet-weight-loss/speed-up-metabolism";//url to be shared
  5. In the component.html, include the image or button to handle the sharing functionality shown below for Facebook.
     <img class="ui mini circular image imageUser" src="../../assets/img/Facebook.png" ceiboShare  ="{u: repoUrl}">

Following similar approach, you can implement all the other social sharing sites.

 

Using ngx-sharebuttons

  1. Install using npm
    npm install ngx-sharebuttons --save
  2. Add ShareButtonsModule to NgModule imports array
    import {ShareButtonsModule} from "ngx-sharebuttons";
     @NgModule({
     imports: [
     ShareButtonsModule.forRoot()
     ]
     })
  3. Include in your template as below:
    <share-buttons [url]="linkToShare"></share-buttons>
  4. Check https://github.com/MurhafSousli/ngx-sharebuttons/wiki for other details of customization.

This approach adds the share buttons along with the functionality.

Conclusion

Using the above two approaches, including social sharing in Angular application becomes very easy to implement. We need to be watchful on the content and image getting shared for your application and update meta tags properly to ensure the right data gets shared.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s