Squarespaceにソーシャルメディアフィードを追加する方法

Squarespaceでウェブサイトを作成しているクリエイターや小規模ブランドの方なら、サイトを常に新鮮な状態に保つことがいかに重要で、いかに難しいかをご存じでしょう。ソーシャルプロフィールには常に最新の投稿が表示されますが、ホームページは数か月間そのままになっていることが多く、実際には活発に活動していても、ブランドが停滞しているように見えてしまうことがあります。

Squarespaceサイトにソーシャルメディアフィードを追加すれば、こうした問題をすべて解決できます。最新の投稿が自動的に表示され、投稿するたびに更新されるため、同じコンテンツを二度更新する必要はありません。このライブフィードは、実際の投稿による最新のソーシャルプルーフを訪問者に提供し、手作業を一切行うことなく、ホームページに最新のビジュアルを表示し続けます。さらに、フィードはサイト上に表示されるため、訪問者はInstagramやFacebookに移動することなくコンテンツを閲覧できます。他のプラットフォームに移動すると、あなたのウェブサイトに戻るよりも、自分のフィードをスクロールし続ける可能性がはるかに高くなるからです。 

では、これらの投稿をどのように組み込めばよいのでしょうか。Squarespaceには、最近の投稿を表示するネイティブのInstagramブロックがありますが、専用のブロックがあるのはこのソーシャルメディアプラットフォームだけで、しかも勝手に接続が切れるという既知の問題があります。もう1つの選択肢は、ホスト型ウィジェットです。これは複数のソーシャルプラットフォームを1つのフィードにまとめて、ページに埋め込むことができます。

切断されたAPIトークンやInstagramブロックの制限に悩まされることなく、動的なソーシャルコンテンツを表示して滞在時間を延ばしたい場合は、このまま読み進めてください。このガイドでは、Squarespaceにソーシャルメディアフィードを追加する方法について、まずネイティブオプションから、次にウィジェットの順に解説します。

オプション1：Squarespaceのネイティブ Instagramブロックを使用する

Squarespaceで実際の投稿を表示するための組み込みオプションがInstagramブロックで、最近の写真をページ上に直接表示します。SquarespaceにInstagramフィードを埋め込みたい場合は、このブロックを使用します。名前が似ているソーシャルリンクブロックは、訪問者をあなたのプロフィールに誘導するクリック可能なアイコンを追加するだけです。

ネイティブのInstagramブロックを使用してSquarespaceにソーシャルメディアフィードを追加するには、次の手順に従ってください。

1. Squarespaceの管理画面で、設定アイコンを選択し、次にサードパーティツールを選択します。接続済みアカウントを選択し、次にInstagramを選択します。ログインして認証をクリックします。この接続には、Instagramのプロフェッショナルアカウントが必要です。

2. サイトを編集し、+ ブロックを追加または挿入ポイントをクリックして、Instagramを選択します。鉛筆アイコンをクリックしてブロックエディタを開きます。

3. アカウントタブで、接続済みアカウントを選択し、表示する投稿数（最大20件）を設定します。デザインタブで、スライドショー、カルーセル、グリッド、スタックの中からレイアウトを選択し、ページを保存します。

SquarespaceはAPI認証を通じてInstagramに接続しますが、この認証は定期的に期限切れになります。期限が切れると、ブロックはエラーを表示することなく、最後に読み込んだ投稿のまま固まってしまいます。2024年12月、MetaはInstagram Basic Display API（ブロックが投稿を取得するために使用していたサービス）を廃止したため、サイト所有者がアカウントを再接続するまで、既存の接続は機能しなくなりました。ブロックには、重複した投稿、アーカイブされた投稿、「unauthorized（認証されていません）」というメッセージ、あるいは何も表示されないといった状態が発生する可能性があり、これらはすべてSquarespace自身のトラブルシューティングガイドに記載されています。これらを修正するには、再度ログインして手動で再接続する必要があります。

避けられない接続切れ以外にも、この方法でSquarespaceにソーシャルメディアフィードを追加することをためらわせるような制限がいくつかあります。まず、投稿数は20件が上限で、ハッシュタグやキーワードによるフィルタリング機能はありません。さらに、TikTokやその他のソーシャルプラットフォーム用のネイティブブロックは存在せず、複数のネットワークを1つのグリッドにまとめることもできません。

オプション2：無料の統合型ソーシャルフィードウィジェットを追加する（おすすめ）

Squarespaceが各プラットフォームに接続するのではなく、Squarespaceのソーシャルメディアウィジェットがソース自体を管理し、ページに貼り付けるための埋め込みコードを提供します。さまざまなアカウントを再接続することなく更新され続けるマルチプラットフォームのフィードが欲しい場合、これはSquarespaceにソーシャルメディアフィードを追加するためのより信頼できる選択肢です。

Jotformのソーシャルフィードウィジェットは、Instagram、Facebook、LinkedIn、YouTube、X、そしてあらゆるRSSソースから投稿を集め、それらを1つのレスポンシブなフィードに表示します。これは無料のソーシャルフィード埋め込みなので、何かに縛られる前に設定して見た目を確認できます。

始める前に、Squarespaceのプランを確認してください。コードブロックにiFrameやJavaScriptコードを追加するのはプレミアム機能で、Core以上のプランが必要です。Basicプランでは、コードはブロックに残りますが機能しません。

Jotformを使用してフィードを作成し、Squarespaceのページに追加する方法は次のとおりです。

1. Jotform ワークスペースのページで作成をクリックし、ウェブサイトウィジェットを選択します。次にソーシャルフィードウィジェットを検索し、ウィジェットを使用をクリックします。

2. 右側のウィジェットのプロパティメニューの一般タブで、+ 最初のソースを追加をクリックします。ドロップダウンからプラットフォームを選択し、アカウントのハンドル名または公開プロフィールのURLを入力して、接続をクリックします。フィードに追加したいアカウントごとにこれを繰り返すと、接続したすべてのソースの投稿が1つにまとめられます。

3. スタイルタブとレイアウトタブを使用して、テーマ、色、投稿のスタイル、列数、投稿数の上限を設定します。その後、上部のナビゲーションバーで公開をクリックします。

4. 埋め込みセクションでコードをコピーをクリックします。また、左側のメニューからプラットフォームに移動し、Squarespaceを選択すると、プラットフォーム固有の手順を確認できます。

また、左側のメニューからプラットフォームに移動し、Squarespaceを選択すると、プラットフォーム固有の手順を確認できます。

5. Squarespaceで、フィードを配置したいページを開き、+ ブロックを追加をクリックして、コードを選択します。プレースホルダーのテキストを削除し、埋め込みコードを貼り付けます。ブロックがHTMLに設定され、ソースを表示がオフになっていることを確認してから、保存をクリックします。

ソースを組み合わせられることが、ネイティブブロックに対するJotformの主な利点です。Squarespace上で複数のソーシャルフィードを、それぞれ個別のブロックを用意するのではなく、1つのレイアウトに表示できるからです。ソースタブを使えば、訪問者はセクションを離れることなく各フィードを閲覧でき、投稿者名、日付、キャプション、ソースバッジ、エンゲージメント数など、各投稿カードに表示する内容を自分で制御できます。また、Jotformでは列、間隔、色、テーマを調整したり、カスタムCSSを追加したりして、フィードをサイトのスタイルに合わせることもできます。

スマートでサーバーレスなウィジェットでSquarespaceサイトを強化しよう

ソーシャルフィードは、テンプレートのデザインに手を加えることなく追加できる多くの要素のうちの1つにすぎません。Jotformの無料のウェブサイトウィジェットディレクトリには150以上のオプションがあり、サービスページの社会的証明に役立つGoogleレビューウィジェット、受信トレイを埋め尽くす質問に対応するFAQウィジェット、ローンチや申込締切のためのカウントダウンタイマーなどが含まれています。それぞれ同じ方法で埋め込めるため、Squarespaceのレイアウトはそのまま保たれます。同じサイトで予約、問い合わせ、サインアップが必要な場合は、JotformとSquarespaceの連携でフォームにも対応できます。

数週間ごとにログインして壊れたアカウントを再接続するよりも、コンテンツの作成や投稿に時間を使う方がずっと有意義です。Jotformのソーシャルフィードウィジェットやその他のディレクトリは、あなたの手間をかけることなくサイトを常に最新の状態に保つので、Squarespaceのテンプレートはあなたがデザインしたそのままの形で維持されます。