ShareThis' Tools on Webflow のインストール方法
注意：Webflow の無料プランをご利用の場合、カスタムコード機能がロックされているため、残念ながらShareThis のツールはご利用いただけません。
In order for ShareThis tools to work on your Webflow website, follow the steps below to add your unique ShareThis code to the <head> section of your website:
すべてのページでShareThis ツールを追加する
- ログイン または 登録する を、ShareThis プラットフォームに追加しました。
- 使用したいShareThis ツールを選択し、[ Enable tool] ボタンをクリックして有効にします。
- そして、ボタンをカスタマイズするために、ソーシャルチャンネル、サイズ、形状を選択し、さらに、カウントを表示するために必要な最小のシェア数などの追加要素を設定します。
- 右上の「コードを有効にする」ボタンを選択します。ポップアップで、「コードをコピーする」ボタンをクリックします。
- WebflowのWebサイトにログインします。
- プロジェクトダッシュボードで、ボタンを設置したいプロジェクトの3つの点のアイコンを選択し、[設定]をクリックします。
- プロジェクト設定]で[カスタムコード]セクションに移動します。
- ステップ4でコピーしたユニークなShareThis コードを貼り付け、「公開」をクリックします。
特定のページでShareThis ツールを追加する
- ログイン または 登録する を、ShareThis プラットフォームに追加しました。
- 使用したいShareThis ツールを選択し、[Enable tool] ボタンをクリックして有効にします。
- そして、ボタンをカスタマイズするために、ソーシャルチャンネル、サイズ、形状を選択し、さらに、カウントを表示するために必要な最小のシェア数などの追加要素を設定します。
- 右上の「 コードを有効にする」ボタンを選択します。ポップアップで、「コードをコピーする」ボタンをクリックします。
- WebflowのWebサイトにログインします。
- デザインモードでウェブサイトを開き、左サイドバーから「ページ 」を選択し、ボタンを設置したい特定のページから「 ページ設定の編集 」を選択します。
- ページ設定]で[カスタムコード]セクションまでスクロールダウンします。
- 手順4でコピーした固有のShareThis コードを貼り付け、[公開]をクリックします。
インラインShareThis ツールの追加
インラインツールは、あなたのサイトで動作するようにコードの余分なスニペットを必要とします。インライン共有ボタン、フォローボタン、反応ボタン、ソーシャルフィードツールをウェブサイトにインストールしたい場合は、ツールを表示したい場所に配置コードを追加する必要があります。
- ShareThis プラットフォームで、使用するShareThis ツールを選択し、配置コードをコピーします。インストールするツールによっては、以下のようなコードになるはずです。
- Webflow のデザインモードで、ボタンを表示させたいページに移動します。
- 左サイドバーから「追加 」を選択し、「埋め込み」オプションを検索して、ボタンを表示させたい場所にドラッグします。
- 新しいHTML Embed Code Editorウィンドウに、ステップ1でコピーした固有のShareThis コードを貼り付けます。
- 保存して閉じる］をクリックします。
- 発行」をクリックします。
注意事項
- ShareThis ツールは、ウェブサイトのバックエンドに表示されないことがあるため、表示するには公開されているウェブサイトにアクセスする必要があります。
- Webflow では、ボタンを Flex コンテナに埋め込む傾向があり、一部のコンテンツ（特に最後のボタン）の表示が制限される可能性があります。
親コンテナの表示をflexから inline-blockに 変更せずに修正する方法として、ボタンの幅を固定値で設定する方法があります。
これを行うには、ボタン自体をクリックし、Webflow Editor上でその幅を 現在よりも大きな値に設定します（モバイル画面でのみ発生する場合は、同じ原理で、Webflow Editor上部のモバイルブレークポイントをモバイル画面/タブレットに変更します）。
