ShareThis でインライン ソーシャル ボタンを追加する

ShareThis を使用すると、インライン ソーシャル ボタンを Webflow プロジェクトに統合できます。サイトの訪問者はコンテンツを簡単に共有でき、共有を監視できます。これにより、関係者全員にとって有益な結果が生まれます。

このチュートリアルで扱うトピック:

1. ShareThisにプロジェクトを追加する
2. コードスニペットをWebflowに挿入します
3. インラインボタンを統合して設計する

プロジェクトをShareThisに統合する

まだ登録していない場合は、ぜひ ShareThisアカウントを作成する 今。 

登録が完了したら、 新しいプロパティを設定する ShareThisアカウントの右上にあるドロップダウンメニューからプロジェクトのドメインを入力し、 追加.

コードスニペットをWebflowに挿入します

このステップでは、インラインソーシャルシェアリングを組み込むためのコードスニペットを取得します。 共有ツール > インラインソーシャルボタン、 クリック コードを取得するをクリックし、 コピー スニペットをクリップボードに保存します。

ダッシュボードまたはデザイナーからWebflowに戻ったら、 プロジェクト設定 前の手順でコピーしたスニペットを貼り付けます。 

以内 カスタムコード セクションにコードを挿入します ヘッドコード フィールドでCommand + V（Macの場合）またはControl + V（Windowsの場合）を使用して変更を保存し、 変更内容を保存、右上隅に移動して選択します 公開 に続く 選択したドメインに公開.

ShareThis内で進捗状況を確認できます。 共有ツール > インラインソーシャルボタン、 選ぶ 手動で確認プロジェクトのURLを入力し、クリックします 確認する、 そして次に進む アップデート. 

インラインボタンを統合してカスタマイズする

ShareThisプラットフォームで 共有ツール > インラインソーシャルボタンクリックするだけです コードをコピー.

‍

これで、同じインターフェース内でボタンをカスタマイズできるようになりました。また、このカスタマイズを後で再度実行することもできます。これについては、後ほど説明します。

Webflowプロジェクトに戻ります。左側のサイドバーからプラスアイコンをクリックし、 コンポーネントドラッグして 埋め込み ShareThis ボタンを表示する領域に要素を追加します。 

とき HTML埋め込みコードエディター が表示されたら、ShareThisのコードスニペットを貼り付けて、 保存して閉じる.

挿入したコードスニペットは前のステップで統合したものを参照しているので、ボタンはまだ表示されません。ボタンを表示するには、 公開 右上から、 選択したドメインに公開をクリックし、ライブサイトを開くと、指定した場所にボタンが表示されるようになります。 

‍

ShareThisに戻ってボタンの配置、色、言語、その他の設定を変更することができます。変更が完了したら、 アップデート最近の調整を表示するには、Command + R (Mac の場合) または Control + R (Windows の場合) を押して Webflow プロジェクトを更新します。

ShareThis アカウント内のソーシャル分析ダッシュボードにアクセスして、共有のパフォーマンスを長期にわたって監視できるようになりました。素晴らしい仕事です!