Come installare il modulo ShareThis per la vostra applicazione angolare

Siamo lieti di annunciare che ShareThis ha creato il proprio modulo per Angular! Seguite le indicazioni riportate di seguito per scoprire come installare ShareThis Inline e Sticky Share Buttons nelle vostre applicazioni/siti Angular.

Il modulo Angular per i pulsanti di ShareThis è disponibile all'interno del nostro sito web Deposito Git, da NPMjs oppure si può avviare tramite la CLI di Angular. 

Nota: la versione di Angular deve essere almeno la 14.1.0 perché il modulo sia compatibile.

1. Iniziate il vostro progetto (saltate se lo avete già). Se non avete angular cli, potete scaricarlo qui: https://cli.angular.io/. Dopo averlo scaricato, eseguire il seguente comando per creare il progetto:
   ng new
2. Installare sharethis-dipendenza angolare: Vai alla cartella del progetto:
   cd
3. Eseguire il seguente comando:
   npm i sharethis-angular
4. Terminare l'installazione e aggiungere il modulo: Una volta completata l'installazione, vai a:
   //src/app/app.module.ts

• Ne avrete bisogno:
• import { SharethisAngularModule } from 'sharethis-angular';

• e aggiungere SharethisAngularModule alle importazioni

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SharethisAngularModule } from 'sharethis-angular';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SharethisAngularModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

5. 5.Iniziare la personalizzazione tramite componenti: Ora vai a
/src/app/app.component.ts 

6. Creare una configurazione per i pulsanti di condivisione: Copiare l'InlineShareButtonsConfig qui sotto e creare una configurazione (vedere configurazioni di altri pulsanti). Si consiglia di memorizzare la configurazione in un file separato e di importarla nel componente che si desidera utilizzare. A quel punto, sarà sufficiente passarlo alla proprietà del componente. 

Nota

Il conteggio delle condivisioni è collegato all'URL; se non viene fornito alcun URL negli attributi di configurazione, verrà utilizzato l'URL in cui si trovano i pulsanti. Ricordarsi di personalizzare o rimuovere l'URL nell'esempio seguente.

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

const InlineShareButtonsConfig = {
  alignment: 'center', // alignment of buttons (left, center, right)
  color: 'social', // set the color of buttons (social, white)
  enabled: true, // show/hide buttons (true, false)
  font_size: 16, // font size for the buttons
  labels: 'cta', // button labels (cta, counts, null)
  language: 'en', // which language to use (see LANGUAGES)
  networks: [
    // which networks to include (see SHARING NETWORKS)
    'whatsapp',
    'linkedin',
    'messenger',
    'facebook',
    'twitter',
  ],
  padding: 12, // padding within buttons (INTEGER)
  radius: 4, // the corner radius on each button (INTEGER)
  show_total: true,
  size: 40, // the size of each button (INTEGER)

  // OPTIONAL PARAMETERS

  url: 'https://www.sharethis.com', // (defaults to current url)
  image: 'https://bit.ly/2CMhCMC', // (defaults to og:image or twitter:image)
  description: 'custom text', // (defaults to og:description or twitter:description)
  title: 'custom title', // (defaults to og:title or twitter:title)
  message: 'custom email text', // (only for email sharing)
  subject: 'custom email subject', // (only for email sharing)
  username: 'custom twitter handle', // (only for twitter sharing)
};

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})

export class AppComponent {
  inlineShareButtonsConfig = InlineShareButtonsConfig;
}

7. Aggiungere il codice all'HTML: Ora impostate l'HTML, andando su:
/src/app/app.component.html 
Aggiungere quanto segue:

È inoltre possibile impostare altri pulsanti di condivisione:

8. L'ultimo passo è correre:
ng serve


9. Ora, all'interno del browser, andate su http://localhost:4200/ e i pulsanti dovrebbero apparire.

Inoltre, ecco le configurazioni degli altri pulsanti:

//Sticky Share Buttons

const stickyShareButtonsConfig: StickyShareButtonsConfig={
            alignment: 'left',    // alignment of buttons (left, right)
            color: 'social',      // set the color of buttons (social, white)
            enabled: true,        // show/hide buttons (true, false)
            font_size: 16,        // font size for the buttons
            hide_desktop: false,  // hide buttons on desktop (true, false)
            labels: 'counts',     // button labels (cta, counts, null)
            language: 'en',       // which language to use (see LANGUAGES)
            min_count: 0,         // hide react counts less than min_count (INTEGER)
            networks: [           // which networks to include (see SHARING NETWORKS)
              'linkedin',
              'facebook',
              'twitter',
              'pinterest',
              'email'
            ],
            padding: 12,          // padding within buttons (INTEGER)
            radius: 4,            // the corner radius on each button (INTEGER)
            show_total: true,     // show/hide the total share count (true, false)
            show_mobile: true,    // show/hide the buttons on mobile (true, false)
            show_toggle: true,    // show/hide the toggle buttons (true, false)
            size: 48,             // the size of each button (INTEGER)
            top: 160,             // offset in pixels from the top of the page


            // OPTIONAL PARAMETERS

            url: 'https://www.sharethis.com', // (defaults to current url)
            image: 'https://bit.ly/2CMhCMC',  // (defaults to og:image or twitter:image)
            description: 'custom text',       // (defaults to og:description or twitter:description)
            title: 'custom title',            // (defaults to og:title or twitter:title)
            message: 'custom email text',     // (only for email sharing)
            subject: 'custom email subject',  // (only for email sharing)
            username: 'custom twitter handle' // (only for twitter sharing)
};

// Inline Follow Buttons

const inlineFollowButtonsConfig: InlineFollowButtonsConfig = {
            action: 'Follow us:', // call to action (STRING)
            action_enabled: true,  // show/hide call to action (true, false)
            action_pos: 'bottom', // position of call to action (left, top, right)
            alignment: 'center',  // alignment of buttons (left, center, right)
            color: 'white',       // set the color of buttons (social, white)
            enabled: true,        // show/hide buttons (true, false)
            networks: [           // which networks to include (see FOLLOW NETWORKS)
              'twitter',
              'facebook',
              'instagram',
              'youtube'
            ],
            padding: 8,           // padding within buttons (INTEGER)
            profiles: {           // social profile links for buttons
              twitter: 'sharethis',
              facebook: 'sharethis',
              instagram: 'sharethis',
              youtube: '/channel/UCbM93niCmdc2RD9RZbLMP6A?view_as=subscriber'
            },
            radius: 9,            // the corner radius on each button (INTEGER)
            size: 32,             // the size of each button (INTEGER)
            spacing: 8            // the spacing between buttons (INTEGER)
};

// Inline Reaction Buttons

const inlineReactionButtonsConfig: InlineReactionButtonsConfig = {
            alignment: 'center',  // alignment of buttons (left, center, right)
            enabled: true,        // show/hide buttons (true, false)
            language: 'en',       // which language to use (see LANGUAGES)
            min_count: 0,         // hide react counts less than min_count (INTEGER)
            padding: 12,          // padding within buttons (INTEGER)
            reactions: [          // which reactions to include (see REACTIONS)
              'slight_smile',
              'heart_eyes',
              'laughing',
              'astonished',
              'sob',
              'rage'
            ],
            size: 48,             // the size of each button (INTEGER)
            spacing: 8,           // the spacing between buttons (INTEGER)

            // OPTIONAL PARAMETERS

            url: 'https://www.sharethis.com' // (defaults to current url)
};

Reti di condivisione

Seguire le reti

Pulsanti di reazione