WebflowウェブページにインタラクティブなTwitter共有ボタンを挿入する

重要： このガイドでは、Webflow の埋め込みコンポーネントを使用して、カスタマイズされたコードを組み込みます。埋め込みコンポーネントは、有料のサイト プランおよび Core、Growth、Agency、Freelancer Workspace プランで利用できます。 

動的埋め込みを利用すると、ブログ投稿、音楽批評、イベントなどの素材など、Web サイトのコンテンツ用にカスタマイズされた Twitter 共有ボタンをデザインできます。 

このチュートリアルでは、次のことを学びます。 

1. Twitterから埋め込みコードを取得する手順
2. Webflow ウェブページにインタラクティブな Twitter 共有ボタンを埋め込む

Twitterから埋め込みコードを取得する方法 

Twitter から埋め込みコードを取得するには: 

1. Twitter埋め込みジェネレーターをご覧ください
2. プレス Twitter ボタン
3. 選択する シェアボタン
4. 打つ カスタマイズオプションを設定する
5. サンプルテキスト（例：「トライアルテキスト」）を ツイートのテキストを事前に入力しますか? セクション — 後でこれを鮮やかなテキストに置き換えます
6. (オプション) その他のカスタマイズ オプション (ボタンの比率など) を構成します。 
7. プレス アップデート 
8. プレス コードをコピー 埋め込みコードを複製する

Webflow ウェブページにインタラクティブな Twitter 共有ボタンを挿入する方法

重要： CMS コンピレーション (「ブログ投稿」、「音楽レビュー」など) を作成し、少なくとも 1 つのイベント コンピレーション要素を作成していることを確認します。CMS には、コンピレーションの構成に役立つテンプレートが用意されています。

ここでは、Web ページにインタラクティブな Twitter 共有ボタンを挿入して、任意の CMS コンパイルからコンテンツを配信する方法を説明します。 

これを 2 つのステップで実行します。 

1. ツイートテキスト用のコンピレーションフィールドを作成する
2. 動的埋め込みを生成する 

ツイートテキスト用のコンピレーションフィールドを作成する

ツイート テキスト (つまり、サイト訪問者が統合された Twitter 共有ボタンをクリックしたときにツイートに組み込むテキスト) 用に新しいクリア テキスト フィールドを設計するか、既存のコンパイル フィールドを使用することができます。 

ツイートのテキストに新しいコンパイル フィールドを作成するには: 

1. 発見する CMSパネル
2. コンピレーションにマウスを移動し、設定「歯車表示されるアイコン 
3. プレス 新しいフィールドを追加
4. 選ぶ プレーンテキスト
5. フィールドに指定を割り当てます（例：「ツイートテキスト」） 
6. プレス フィールドを保存

動的埋め込みを生成する

動的埋め込みは動的コンテンツでのみ機能するため、コンピレーション ページまたは固定ページのコンピレーション リスト内にのみ追加できます。Twitter 共有ボタン埋め込みを、共有したいコンテンツ (「ブログ投稿」、「音楽レビュー」、「レシピ」など) にリンクされたコンピレーション ページにマージするか、Twitter でコンテンツを共有する予定のコンピレーションにコンピレーション リストを結合する必要があります。

動的埋め込みを追加するには:

1. 案内する パネルを追加 > 高度な
2. 含める 埋め込み キャンバスに要素を追加する
3. コードエディターにTwitter共有ボタンの埋め込みコードを貼り付けます 
4. コード内の「data-text=」の後のTwitterカスタマイズオプションに入力したサンプルテキストを見つけます。
5. 引用符内のサンプルテキストを強調表示します
6. プレス フィールドを追加
7. コンテンツを共有したいコンピレーションフィールドを選択します（例：「ツイートテキスト」）
8. プレス 保存して閉じる 

準備ができたら、サイトをデビューさせて、新しい Twitter 共有ボタンを公開します。サイト訪問者が Twitter 共有ボタンをクリックすると、そのツイートには、コンパイル内の各アイテムのコンパイル フィールドの値が自動入力されます。 

プロのヒント: コンパイル ページとコンパイル リストで条件付きの表示を利用して、ツイート テキストのないコンパイル要素の Twitter 共有ボタンを非表示にすることができます。

‍重要： Twitter 共有ボタンはデザイナー キャンバスには表示されません。つまり、デザイナーで共有ボタンを予測することはできず、代わりにプレースホルダーが表示されます。サイトの公開またはエクスポート後、配置した場所に Twitter 共有ボタンが表示されます (つまり、展示されます)。カスタマイズされたドメインでサイトを公開する前に共有ボタンをプレビューする必要がある場合は、webflow.io ステージング サブドメインでサイトを起動できます。