ShareThis モジュールをAngularアプリにインストールする方法

ShareThis が Angular 用に独自のモジュールを構築したことを発表できることを嬉しく思います。ShareThis Inline and Sticky Share Buttons をあなたのAngularアプリ/サイトにインストールする方法については、以下の説明に従ってください。

ShareThis ボタン用の Angular モジュールは、私たちの Gitリポジトリからです。 NPMjs または、Angular CLIから起動することができます。

注意:モジュールの互換性を確保するため、Angular のバージョンは 14.1.0 以降である必要があります。

プロジェクトを開始します（すでに持っている場合はスキップします）。angular cliを持っていない場合は、ここからダウンロードできます: https://cli.angular.io/.ダウンロード後、以下のコマンドを実行し、プロジェクトを作成します。
ng new
sharethis-angular の依存関係をインストールします。プロジェクトフォルダに移動します。
cd
次のコマンドを実行してください。
npm i sharethis-angular
インストールを終了し、モジュールを追加します。インストールが完了したら、以下にアクセスしてください。
//src/app/app.module.ts

が必要になります。
import { SharethisAngularModule } from 'sharethis-angular';

を作成し、SharethisAngularModuleをimportに追加します。

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.シェアボタン用のコンフィグを作成する。下記のInlineShareButtonsConfigをコピーして、コンフィグを作成します。他ボタン設定).コンフィグを別のファイルに保存して、使用したいコンポーネントにインポートすることをお勧めします。そうすれば、あとはそれをコンポーネントのプロパティに渡すだけです。

備考

共有回数は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にコードを追加する。今度は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)
};

ネットワークの共有

フォローネットワーク

リアクションボタン

データ製品

データ使用例

アイデンティティ・ソリューション

産業別ソリューション

リソース

ShareThis モジュールをAngularアプリにインストールする方法

備考

サポートガイド

検索サポート

ウェブサイトツール

ShareThisデータ

会社

プライバシー