ウェブサイトにソーシャルメディアボタンを追加すると、ユーザーとのインタラクションが増加し、ウェブサイトとソーシャルページの両方へのトラフィックが増えることがあります。
この記事では、Webflowのエレメントパネルに含まれる2つのソーシャルメディア要素を追加する方法を紹介します：
Facebookの「いいね」ボタンを追加する
左側のツールバーからプラスアイコン（the Add button)）をクリックし、コンポーネントの下にあるFacebook要素をデザインにドラッグします。
Facebookボタンをキャンバスに追加したら、以下のように設定します：
- FacebookのURLを接続します（または表示したいURL）
- Facebookボタンのレイアウトとサイズをカスタマイズします
- Facebookボタンのロケールを指定します
FacebookのURLを接続する
Facebookボタンの設定で、ボタンに接続したいページのURLを入力します。選択したページの「いいね」をFacebookが自動的に取得して表示します。したがって、これはFacebookページまたはFacebookの「いいね」を表示したいウェブサイトのURLになります。
複数のFacebookボタンをプロジェクトに追加することで、複数の異なるFacebookのURLに接続することができます。
Facebookボタンのレイアウトとサイズをカスタマイズする
デフォルトでは、FacebookボタンはFacebookページの「いいね」の数と一緒に表示されます。Facebookボタンの設定では、ボタンと「いいね」の数の表示方法をカスタマイズできます。
ボタン設定（button settings）で3つのレイアウトオプションから選ぶことができます：
- Standard(スタンダード)： 1行に「いいね」ボタンとテキストサマリーを表示
- Box（ボックス）： ボックス内に「いいね」ボタンといいねの数を垂直に表示
- Button（ボタン）： 「いいね」ボタンといいねの数を1つのボタンにまとめたもの
ボタン設定では、ボタンの幅と高さも設定できます。
Facebookボタンのロケール(地域と言語設定)を指定する
ロケール設定を使用して、Facebookコンポーネントの地域と言語設定を指定できます。
Twitterのフォローとツイートボタンを追加する
Facebookと同様に、追加パネル(Add panel)からTwitterボタンをドラッグします。
ボタンのタイプを選択します：
- ツイートボタン
- フォローボタン
ツイートボタンを作成する
ツイートボタンを使用すると、サイト訪問者は簡単にあなたのサイトまたは特定のページへのリンクをシェアできます。ツイートボタンを使用することで、Twitterからのトラフィックをサイトに誘導し、コンテンツの可視性を高めることができます。
キャンバスにTwitterボタンを追加し、ツイートボタンオプション(tweet button option,)を選択したら、以下のツイートボタンの設定を更新できます：
- シェアURL(share URL)を入力: ユーザーがページを共有する際にツイートを自動的に表示するURLです。
- ツイートテキスト(tweet text)を入力: 共有するツイートに初期値として表示されるテキストを設定します。
- バブル(bubble)を表示または非表示にする: Twitterはバブルを表示するオプションを提供していますが、値を取得せず、代わりに省略符号（...）が表示されるため、非表示にすることを検討してよいかもしれません。
- ボタンサイズを選択する
Twitterのフォローボタンを作成する
フォローボタンを使用すると、ユーザーはTwitterプロフィールを見つけてフォローできます。これにより、サイトからTwitterプロフィールにトラフィックを誘導し、サイトの訪問者とのエンゲージメントを高めることができます。
キャンバスにTwitterボタンを追加し、フォローボタンオプションを選択したら、以下のボタン設定を更新できます：
- Twitterハンドルを入力: フォローボタンにリンクするTwitterアカウントを入力します（@サインなし）。
- バブルを表示または非表示にする: 提供されたハンドルのフォロワー数を表示します。
- ボタンサイズを選択する
ツイートボタンとフォローボタンの両方をページに追加するには、ページに2つの独立したTwitterボタンを追加してください。
