LikePay Academyが「スーパーサイトAcademy」に変わりました。詳しくはこちらです。

Social media

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

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

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

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

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

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

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

  1. FacebookのURLを接続します(または表示したいURL)
  2. Facebookボタンのレイアウトとサイズをカスタマイズします
  3. 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ボタンをドラッグします。

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

  1. ツイートボタン
  2. フォローボタン

ツイートボタンを作成する

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

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

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

Twitterのフォローボタンを作成する

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

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

  1. Twitterハンドルを入力: フォローボタンにリンクするTwitterアカウントを入力します(@サインなし)。
  2. バブルを表示または非表示にする: 提供されたハンドルのフォロワー数を表示します。
  3. ボタンサイズを選択する

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

目次

あなたもNoCodeのプロに

充実したサポートであなたも、最短3ヶ月間でノーコードWeb制作のプロになれます。

  • 300以上のノーコード動画教材

  • チャットサポート

  • 個別ビデオ通話相談