如何安裝 ShareThis 用於角應用的模組

我們很高興地宣佈 ShareThis 為安格樂構建了自己的模組！請按照以下說明瞭解如何安裝 ShareThis 內聯和 測欄固定式的分享按鈕 到您的角度應用程式/網站。

角度模組 ShareThis 按鈕在我們的 Git 儲存庫從 Npmjs。 或者您可以通過角度 CLI 啟動。 

注意： 您的 Angular 版本應至少為 14.1.0，模組才能相容。

1. 啟動專案 （如果已有，請跳過）。如果您沒有角度的氣候，可以在此處下載：https://cli.angular.io/。下載後，執行以下命令以創建專案：
   ng new
2. 安裝 sharethis -角度相依 ：轉到項目資料夾：
   cd
3. 執行以下指令：
   npm i sharethis-angular
4. 完成安裝並新增模組：完成安裝後，請轉到：
   //src/app/app.module.ts

• 您需要：
• import { SharethisAngularModule } from 'sharethis-angular';

• 並將 共用此角度模組 添加到導入

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. 開始通過元件進行自定義：現在轉到
/src/app/app.component.ts 

6. 為共用按鈕建立設定：複製下面的 內聯共用按鈕配置 並創建配置（請參閱 其他按鈕的配置).我們建議將配置存儲在單獨的檔中，然後導入到要使用的元件中。然後，您需要做的就是將其傳遞給元件屬性。 

注意

共用計數連結到 URL，如果在配置屬性中未提供 URL，它將使用按鈕所在的 URL。請記住自定義或刪除以下範例中的URL。

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. 將代碼新增到 HTML：現在設定代碼，轉到：
/src/app/app.component.html 
新增以下內容：

您還可以設定其他共享按鈕：

8. 最後一步是執行：
ng serve


9.現在在瀏覽器中查看，轉到 http://localhost:4200/ ，按鈕現在應該出現。

此外，以下是我們其他按鈕的配置：

//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)
};

共享網路

關注網路

反應按鈕