Social media

WebflowサイトにFacebookとTwitterのボタンを追加します。

この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。

ウェブサイトにソーシャルメディアボタンを追加すると、ユーザーとのインタラクションが増加し、ウェブサイトとソーシャルページの両方へのトラフィックが増えることがあります。

この記事では、Webflowのエレメントパネルに含まれる2つのソーシャルメディア要素を追加する方法を紹介します：

Facebookの「いいね」ボタンを追加する

左側のツールバーからプラスアイコン（the Add button)）をクリックし、コンポーネントの下にあるFacebook要素をデザインにドラッグします。

Facebookボタンをキャンバスに追加したら、以下のように設定します：

Facebookボタンの設定で、ボタンに接続したいページのURLを入力します。選択したページの「いいね」をFacebookが自動的に取得して表示します。したがって、これはFacebookページまたはFacebookの「いいね」を表示したいウェブサイトのURLになります。

複数のFacebookボタンをプロジェクトに追加することで、複数の異なるFacebookのURLに接続することができます。

デフォルトでは、FacebookボタンはFacebookページの「いいね」の数と一緒に表示されます。Facebookボタンの設定では、ボタンと「いいね」の数の表示方法をカスタマイズできます。

ボタン設定（button settings）で3つのレイアウトオプションから選ぶことができます：

ボタン設定では、ボタンの幅と高さも設定できます。

ロケール設定を使用して、Facebookコンポーネントの地域と言語設定を指定できます。

Facebookと同様に、追加パネル(Add panel)からTwitterボタンをドラッグします。

ボタンのタイプを選択します：

ツイートボタンを使用すると、サイト訪問者は簡単にあなたのサイトまたは特定のページへのリンクをシェアできます。ツイートボタンを使用することで、Twitterからのトラフィックをサイトに誘導し、コンテンツの可視性を高めることができます。

キャンバスにTwitterボタンを追加し、ツイートボタンオプション(tweet button option,)を選択したら、以下のツイートボタンの設定を更新できます：

シェアURL(share URL)を入力: ユーザーがページを共有する際にツイートを自動的に表示するURLです。
ツイートテキスト(tweet text)を入力: 共有するツイートに初期値として表示されるテキストを設定します。
バブル(bubble)を表示または非表示にする: Twitterはバブルを表示するオプションを提供していますが、値を取得せず、代わりに省略符号（...）が表示されるため、非表示にすることを検討してよいかもしれません。
ボタンサイズを選択する

フォローボタンを使用すると、ユーザーはTwitterプロフィールを見つけてフォローできます。これにより、サイトからTwitterプロフィールにトラフィックを誘導し、サイトの訪問者とのエンゲージメントを高めることができます。

キャンバスにTwitterボタンを追加し、フォローボタンオプションを選択したら、以下のボタン設定を更新できます：

ツイートボタンとフォローボタンの両方をページに追加するには、ページに2つの独立したTwitterボタンを追加してください。