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 ツールを追加する

  1. Log in or sign up to the ShareThis プラットフォーム.
  2. Add your domain.
  3. Copy your unique ShareThis installation script.
    • You can find it in Step 1 of any App page (e.g., Inline Share Buttons, Sticky Share Buttons, Follow Buttons).
    • Or, you can find the same script in Settings → Setup inside the Platform.
  4. Log in to Webflow’s website. On your Projects Dashboard, select the three dots icon from the project you want your buttons on, and click Settings.
  5. プロジェクト設定]で[カスタムコード]セクションに移動します。
  6. Paste the unique ShareThis code that you copied from step 3 and click Publish.
  7. In the ShareThis Platform, open the app you want to use and click Enable App to activate it on your site.
  8. (Optional but recommended) Customize your app.
    • Choose between Smart Share Buttons or manual selection of networks.
    • Adjust colors to match your brand.
    • Set button size, shape, alignment, and enable share counts if desired.

特定のページでShareThis ツールを追加する

  1. Log in or sign up to the ShareThis プラットフォーム.
  2. Add your domain.
  3. Copy your unique ShareThis installation script.
    • You can find it in Step 1 of any App page (e.g., Inline Share Buttons, Sticky Share Buttons, Follow Buttons).
    • Or, you can find the same script in Settings → Setup inside the Platform.
  4. Log in to your Webflow website. Open your website in design mode, select Pages from the left sidebar, then select Edit Page Settings from the specific page you want your buttons to be on.
  5. ページ設定]で[カスタムコード]セクションまでスクロールダウンします。
  6. 手順4でコピーした固有のShareThis コードを貼り付け、[公開]をクリックします。
  7. In the ShareThis Platform, open the app you want to use and click Enable App to activate it on your site.
  8. (Optional but recommended) Customize your app.
    • Choose between Smart Share Buttons or manual selection of networks.
    • Adjust colors to match your brand.
    • Set button size, shape, alignment, and enable share counts if desired.

インラインShareThis ツールの追加

インラインツールは、あなたのサイトで動作するようにコードの余分なスニペットを必要とします。インライン共有ボタン、フォローボタン、反応ボタン、ソーシャルフィードツールをウェブサイトにインストールしたい場合は、ツールを表示したい場所に配置コードを追加する必要があります。

  1. ShareThis プラットフォームで、使用するShareThis ツールを選択し、配置コードをコピーします。インストールするツールによっては、以下のようなコードになるはずです。
  2. Webflow のデザインモードで、ボタンを表示させたいページに移動します。
  3. 左サイドバーから「追加 」を選択し、「埋め込み」オプションを検索して、ボタンを表示させたい場所にドラッグします。
  4. 新しいHTML Embed Code Editorウィンドウに、ステップ1でコピーした固有のShareThis コードを貼り付けます。
  5. 保存して閉じる］をクリックします。
  6. 発行」をクリックします。

注意事項

  • ShareThis ツールは、ウェブサイトのバックエンドに表示されないことがあるため、表示するには公開されているウェブサイトにアクセスする必要があります。
  • Webflow では、ボタンを Flex コンテナに埋め込む傾向があり、一部のコンテンツ（特に最後のボタン）の表示が制限される可能性があります。
    親コンテナの表示をflexから inline-blockに 変更せずに修正する方法として、ボタンの幅を固定値で設定する方法があります。

    これを行うには、ボタン自体をクリックし、Webflow Editor上でその幅を 現在よりも大きな値に設定します（モバイル画面でのみ発生する場合は、同じ原理で、Webflow Editor上部のモバイルブレークポイントをモバイル画面/タブレットに変更します）。
Webflow Editor上では、ボタンのwidthフィールドは180に設定され、その他の値は変更されません。