ShareThis' ReactJSにツールをインストールする方法

ShareThis ツールを ReactJs アプリ/サイトで動作させるには、以下の手順に従って、弊社のシェアボタン、フォローボタン、および/またはリアクションボタンをインストールしてください。重要なお知らせ、ShareThis ウェブサイトツールの詳細については、こちらをご覧ください。 詳細はこちら。.

注：ShareThis ボタン用のReactJSモジュールは、弊社の Gitリポジトリ または NPMjs. このコマンドで、ReactJSアプリ内にライブラリをインストールすることができます。

npm install --save sharethis-reactjs

  1. まだプロジェクトが設定されていない場合は、ここで新しいreactアプリを作成することができます。 https://reactjs.org/docs/create-a-new-react-app.html
  2. ターミナルで以下のコードを実行します。
npx create-react-app 
cd 
npm start
  1. コンポーネントファイルの先頭に、プロジェクトで使用したいShareThis ツールを追加します。以下のものをサポートしています。
    • InlineReactionButtons
    • InlineShareButtons
    • StickyShareButtons
    • InlineFollowButtons

  2. ShareThis ツールを表示させたい場所にコンポーネントを追加します。
    import {InlineReactionButtons} from 'sharethis-reactjs';
    import {InlineShareButtons} from 'sharethis-reactjs';
    import {StickyShareButtons} from 'sharethis-reactjs';
    import {InlineFollowButtons} from 'sharethis-reactjs';
  3. 各ツールには、ボタンをカスタマイズするために使用できる設定属性があります。例として以下をご覧ください。

備考

共有回数はURLと連動しており、設定属性でURLが指定されていない場合は、ボタンが配置されているURLを使用します。以下の例では、URLのカスタマイズや削除を忘れないようにしてください。

インライン シェアボタン

付箋シェアボタン

インラインフォローボタン

インライン・リアクション・ボタン

ボタン設定のカスタマイズが完了したら、お好みのネットワークを追加します。以下のネットワークが選択できます。

ネットワークの共有

フォローネットワーク

リアクションボタン