Comment installer le module ShareThis sur Angular
Nous sommes heureux d'annoncer que ShareThis a construit son propre module pour Angular ! Suivez les instructions ci-dessous pour apprendre comment vous pouvez installer ShareThis Inline et Boutons de partage flottant sur vos applications/sites Angular.
Le module Angular pour les boutons ShareThis est disponible dans notre site Web. Dépôt Git, de NPMjs ou vous pouvez initier via Angular CLI.
Note : Votre version d'Angular doit être au moins 14.1.0 pour que le module soit compatible.
- Initiez votre projet (Skip si vous l'avez déjà). Si vous n'avez pas angular cli, vous pouvez le télécharger ici : https://cli.angular.io/. Après le téléchargement, exécutez la commande suivante pour créer votre projet :
ng new - Installez sharethis- dépendance angulaire: Allez dans le dossier de votre projet :
cd - Exécutez la commande suivante :
npm i sharethis-angular - Terminez l'installation et ajoutez le module: Une fois que vous avez terminé l'installation, allez à
//src/app/app.module.ts
- Vous en aurez besoin :
import { SharethisAngularModule } from 'sharethis-angular';
- et ajoutez SharethisAngularModule aux importations
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. Commencez la personnalisation via les composants: Allez maintenant à
6. Créez la configuration pour les boutons de partage: Copiez la configuration InlineShareButtonsConfig ci-dessous et créez une configuration (cf. les configurations d'autres boutons). Nous vous recommandons de stocker la configuration dans un fichier séparé et de l'importer dans le composant que vous souhaitez utiliser. Il vous suffira ensuite de la passer à la propriété du composant.
Note
Le nombre de partages est lié à l'URL. Si aucune URL n'est fournie dans les attributs de configuration, l'URL où se trouvent les boutons sera utilisée. N'oubliez pas de personnaliser ou de supprimer l'URL dans l'exemple ci-dessous.
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. Ajoutez le code au HTML: Maintenant, configurez le HTML, allez à :
Ajouter ce qui suit :
Vous pouvez également configurer d'autres boutons de partage :
8. La dernière étape est de courir :ng serve
9. Maintenant, dans le navigateur, allez à http://localhost:4200/ et les boutons devraient maintenant apparaître.
En outre, voici les configurations pour nos autres boutons :
//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)
};Réseaux de partage
Suivre les réseaux
Boutons de réaction
