Webflowでウェブサイトを構築するのは、とても便利ですよね。でも、それをさらに良くする方法があるとしたらどうでしょう。ライブのSNSフィードを追加することです。これはまるで、ブランドをめぐる活発なやり取りをそのままホームページ上で見せるようなものです。そしてEmbedSocialのようなSNSアグリゲーターを使えば、これがとても簡単に実現できます。
このガイドは、手間をかけずにWebflowサイトをより魅力的にするためのものです。Webflow初心者の方も、少し慣れている方も、SNSの最新情報でサイトをいきいきと保つことがいかに簡単かをご覧いただけます。
それでは、さっそく始めて、あなたのサイトにソーシャルな活気を流し込んでいきましょう!
ステップ1:SNSフィードを集約する
WebflowサイトにSNSウィジェットを埋め込む最初のステップは、ブランドのSNS活動を取り込むコンテンツストリームを設定することです。EmbedSocialで始める方法は以下の通りです。
EmbedSocialのウェブサイトにアクセスし、アカウントを登録します。無料トライアルを開始して、すぐに契約せずにすべての機能をお試しいただけます。
アカウントが有効になったら、最初のステップはSNSアカウントを接続することです。EmbedSocialは、ブランドのほぼすべてのSNSチャンネルからコンテンツを生成できます。最新のInstagram投稿でも、Facebookの更新でも、ツイートでも、EmbedSocialはこれらを1つのまとまったfeedに取り込むことができます。
まず、データを取得したいSNSプラットフォームを選択します。
ソースに移動し、(例として)「Instagram」をクリックして、必要な権限を付与する手順に従います。

Instagramを選択する場合は、Instagramアカウントのfeed、特定のハッシュタグを含むコンテンツ、自分のInstagram Storiesなどのいずれを作成したいかを選んで、セットアップを続けられます。

WebflowにInstagram feedを埋め込む方法について詳しくはこちらをご覧ください。
ステップ2:SNSフィードウィジェットのデザインを選ぶ
コンテンツを集約したら、次のステップはそれをWebflowサイト上でどのように表示するかを決めることです。
EmbedSocialは、あなたのデザインやコンテンツ戦略に最適に合わせられる、さまざまなレイアウトオプションを備えた膨大なSNSウィジェットテンプレートのライブラリを提供しています。ウィジェットを作成するには、「このテンプレートを使う」ボタンをクリックするだけです。するとウィジェットエディターにリダイレクトされ、その他のカスタマイズを続けられます。

ライブラリで提供しているウィジェットの一部をご紹介します。
masonryレイアウトのSNSフィード
より自然で変化に富んだ見た目にぴったりの、masonryスタイルのレイアウトです。
SNSグリッド

SNSコンテンツを整然とした形で見せる、すっきりとした統一感のあるレイアウトです。こちらは、このグリッドレイアウトを使ったInstagram feedの例です。
SNSカルーセル

ページに動きを加える、ダイナミックでスライドするレイアウトです。1度に1件の投稿を見せていきます。
その他のウィジェットを見るには、以下をご覧ください。
ステップ3:WebflowのSNSフィードを埋め込む
お好みのSNSフィードウィジェットのデザインを選択したら、EmbedSocialが埋め込みコードを提供します。
コードを取得するには、「埋め込み」タブに移動し、以下のように「コードをコピー」をクリックするだけです。

これはシンプルなプロセスです。コーディングは不要で、コピーして貼り付けるだけ。これだけで、わずかな手間でブランドの認知度を高め、認知を広げる準備が整います。コードを取得したら、Webflowに移動し、有料のWebflowプランに加入していることを確認してください。これはサードパーティの埋め込みを追加するために必要です。
Webflowプロジェクトを開き、SNSフィードを表示したいページに移動します。
「+」アイコンをクリックして、ページに新しい要素を追加します。要素をスクロールして「Embed」オプションを見つけたら、ページ上の希望する場所にドラッグ&ドロップします。

設定パネルがポップアップし、埋め込みコードの入力を求められます。EmbedSocialが提供したコードをそのフィールドに貼り付けます。

「Save & Close」をクリックして、埋め込みを所定の位置に固定します。これで、サイトを公開または更新すると、SNSフィードが公開され、すべての訪問者に表示されるようになります。
Embed要素にコードを埋め込む方法について、Webflow公式ヘルプセンターで詳しくご覧ください。
さらに詳しく
なぜWebflowサイトにSNSフィードを追加するのか?
これらのSNSウィジェットを埋め込むことは、現在のSNSフォロワーのエンゲージメントを維持するだけでなく、より多くのSNSフォロワーを獲得するのにも役立ちます。Instagramアカウントの投稿やFacebookの更新など、SNSアカウントから新鮮で本物のコンテンツを継続的に追加することで、EmbedSocialによって動作するライブ更新型のfeedを作り出し、ウェブサイト訪問者の購入判断に影響を与えることができます。
これがソーシャルプルーフの実践です。購入を迷っているとき、顧客の背中を押す最大の動機の1つです。それでは、ウェブサイトでSNSフィードを使う主なメリットをまとめてご紹介します。
- コンテンツを新鮮に保つ:ライブフィードがあれば、サイトには常に新しいコンテンツがあり、訪問者を何度も呼び戻すことができます。
- エンゲージメントを高める:リアルタイムの更新やUGCを見ることで、訪問者がサイト上でもSNS上でも、あなたのブランドとより積極的に交流するようになります。
- ソーシャルプルーフで信頼を築く:見込み客が実際の人々があなたの製品やサービスを愛している様子を見れば、信頼性が増し、購入判断に影響を与えられます。
- リーチを広げる:あなたのSNSでの取り組みが、フォロワーだけでなくサイトのすべての訪問者にも、より多く露出されます。
- SNSのフォロワーを増やす:露出が増えれば潜在的なフォロワーも増え、SNSプラットフォームでより大きなオーディエンスを築く助けになります。
はじめましょう
EmbedSocialを使ってWebflowサイトにSNSフィードを追加することは、賢い選択です。それは単なる見た目の問題ではありません。訪問者の心に響く、いきいきとして魅力的で信頼できるオンライン空間を作り出すことなのです。上記で説明した手順に従えば、サイトを静的なパンフレットから、ブランドの鼓動を映し出すダイナミックな拠点へと変えることができます。
それでは、ぜひ試してみませんか。EmbedSocialに登録し、最適なレイアウトを選んで、Webflowサイトでソーシャルな活気を流し込みましょう。あなたのオーディエンスは、さまざまな形であなたとつながるのを待っています。そして今、それを実現するためのツールが手に入りました。
EmbedSocialは主要なすべてのSNSプラットフォームと連携しており、Twitter、Instagram、Facebook、YouTube、TikTok、Pinterest、Vimeoのソーシャルメディアウィジェットを埋め込むことができます。







