オンラインネットワーキング

オンライン ネットワーキング アイコンをサイトに統合すると、ユーザー エンゲージメントが強化され、サイトとソーシャル プロファイルの両方へのアクセスが増加します。

この投稿では、Webflow の要素パネルで提供される 2 つのオンライン ネットワーキング コンポーネントを組み込む方法について説明します。

1. Facebookの承認ボタン
2. Twitterの購読と投稿ボタン

Facebook承認ボタンを追加する

Facebook 要素をデザインに挿入するには、左側のツールバーの追加シンボル ([追加] ボタン) をクリックし、[コンポーネント] の下にある Facebook コンポーネントを見つけます。それをレイアウトにドラッグします。

キャンバスに Facebook ボタンを配置したら、次のように設定します。

1. FacebookのURL（または「いいね！」をスポットライトしたいURL）をリンクします
2. Facebookボタンのデザインとサイズを調整する
3. Facebookボタンの場所を指定する

FacebookのURLをリンクする

Facebook ボタンの設定で、ボタンにリンクするページの URL を入力します。Facebook は、選択したページのいいねを自動的に取得して表示します。これは、Facebook のいいねを表示したい Facebook ページまたは Web サイトの URL になります。

必要に応じて、プロジェクトに複数の Facebook ボタンを含めて、複数の固有の Facebook URL にリンクすることができます。

Facebookボタンのデザインとサイズを調整する

デフォルトでは、Facebook ボタンは接続された Facebook ページの「いいね！」の数の横に表示されます。Facebook ボタンの設定で、ボタンと「いいね！」の数の表示方法を変更できます。

ボタン設定では、3 つのレイアウトから選択できます。  

• 標準： 「いいね！」ボタンとテキストの要約を1行で表示します
• 箱： 「いいね！」ボタンと、その数を縦に並べたボックスで表示します。
• ボタン: 「いいね！」ボタンといいね数を1つのボタンにまとめます

ボタン設定では、ボタンの固有の幅と高さを設定することもできます。これを行うには、それぞれのフィールドに希望の幅と高さを入力します。

Facebookボタンの場所を指定する

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

Twitterの購読ボタンと投稿ボタンを追加する

Facebook の場合と同様に、[追加] パネルから Twitter ボタンをドラッグします。

ボタンの種類を選択してください: 

1. 投稿ボタン
2. 購読ボタン 

投稿ボタンを作成する

投稿ボタンを使用すると、ユーザーは自分の Twitter プロフィールでサイトへのリンクやサイトの特定のページをすばやく共有できます。このボタンは、Twitter からサイトへのトラフィックをリダイレクトするのに役立ち、コンテンツの露出を高めます。

Twitterボタンをキャンバスに追加し、 役職 ボタンをクリックすると、投稿ボタンの設定を構成できます。

1. 共有URLを入力してください: このURLは、ユーザーがあなたのページを共有したときに共有ツイートのベースになります。
2. ツイートのテキストを入力してください: あらかじめ入力された共有ツイートのテキストをカスタマイズする
3. バブルを表示または非表示にする: Twitter ではバブルを表示するオプションがありますが、Twitter ではカウントが表示されなくなり、省略記号のみが表示されるようになったため、バブルを非表示にすることをお勧めします。
4. ボタンのサイズを選択してください

Twitterの購読ボタンを作成する

購読ボタンを使用すると、ユーザーは Twitter プロフィールをすばやく見つけてフォローできるため、サイトから Twitter プロフィールへのトラフィックが誘導され、サイト訪問者とのエンゲージメントが向上します。

キャンバスにTwitterボタンを追加し、 フォローする ボタンをクリックすると、ボタンの設定を変更できます。

1. Twitter ハンドルを入力してください: フォローボタンに関連付けられたTwitterアカウント（@記号を除く）  
2. バブルを表示または非表示にします: 指定されたハンドルのフォロワー数が表示されます 
3. ボタンのサイズを選択してください

ページに投稿ボタンとフォローボタンの両方を含めるには、ページに 2 つの個別の Twitter ボタンを追加します。