Como instalar ShareThis Module for Your Angular App
Temos o prazer de anunciar que ShareThis construiu o seu próprio módulo para Angular! Siga as instruções abaixo para saber como pode instalar os botões ShareThis Inline e Sticky Share nas suas aplicações/sites Angular.
O módulo Angular para PartilharEste botão está disponível no nosso repositório Git, de NPMjs ou pode iniciar através da CLI Angular.
Nota: A sua versão angular deve ser pelo menos 14.1.0 para que o módulo seja compatível.
- Inicie o seu projecto (Saltar se já o tiver). Se não tiver cli angular, pode descarregá-lo aqui: https://cli.angular.io/. Depois de descarregar, execute o seguinte comando para criar o seu projecto:
ng new - Instale a dependência sharethis-angular: Vá para a pasta do seu projecto:
cd - Execute o seguinte comando:
npm i sharethis-angular - Concluir a instalação e adicionar o módulo: Depois de terminar a instalação, vá para:
//src/app/app.module.ts
- Vais precisar de o fazer:
import { SharethisAngularModule } from 'sharethis-angular';
- e adicionar SharethisAngularModule às importações
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. Comece a customizar através de componentes: Agora vá para
6. Criar botões de configuração para partilha: Copie o InlineShareButtonsConfig abaixo e crie uma configuração (ver outras configurações de botões). Recomendamos o armazenamento da configuração num ficheiro separado e a importação para o componente que deseja utilizar. Então tudo o que precisará de fazer é passá-lo para a propriedade do componente.
Nota
A Contagem de Acções está ligada ao URL, se não for fornecido nenhum URL nos atributos de configuração, utilizará o URL onde os botões estão localizados. Lembre-se de personalizar ou remover o URL no exemplo abaixo.
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. Acrescentar código ao HTML: Agora configure o HTML, vá para:
Adicione o seguinte:
Também se pode configurar outros botões de partilha:
8. O último passo é correr:ng serve
9. Agora veja dentro do browser, vá para http://localhost:4200/ e os botões devem agora aparecer.
Além disso, aqui estão as configurações para os nossos outros botões:
//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)
};Partilha de Redes
Seguir Redes
Botões de Reacção
