訪問者がお客様のコンテンツをFacebookフィードに共有できるようにします。

Facebookの [いいね！] ボタンをサイトに追加すると、訪問者がFacebookの友達のニュース フィードでコンテンツを共有できるようになります。 このガイドでは、コード ブロックを使用してページやブログ投稿にカスタムの [いいね！] ボタンを追加する方法について説明します。

このガイドの手順には、コード挿入の使用とコード ブロックへの高度なコードの追加が含まれます。 これらは、BusinessプランとCommerceプランで利用できるプレミアム機能です。

始める前に

Facebookの [いいね！] ボタンを追加する最適な方法は、お客様のサイトが使用しているSquarespaceのバージョンによって異なります。

• バージョン7.1 - バージョン7.1には、[いいね！] ボタンを追加するための組み込みオプションはありません。 このガイドの手順に従って追加します。
• バージョン 7.0 - 代わりに [共有] ボタンを使用して、[いいね！] ボタンを表示させることをお勧めします。 ただし、コーディングの知識があり、ボタンの表示場所をより細かく制御したい場合は、このガイドの手順に従うことができます。 カスタムコードを使用している場合は、まず次の手順でFacebookの [共有] ボタンを無効にしてください。

Facebookの [いいね！] ボタンを追加する

Facebookの [いいね！] ボタンをサイトに追加するには、次の手順を実行します。

1. サイトのバージョンが 7.0の場合は、まずFacebookの [共有] ボタンを無効にします。 「共有ボタン」パネルを開き、 Facebook] のチェックを外します。
2. Facebookの開発者向け資料の手順に従って、Facebook Like Button Configuratorを使用してカスタム コードを生成します。画面が開き、2つのフィールドにお客様のコードが表示されます。
3. 最初のフィールドから Javascript SDK コードをコピーします。
4. Squarespaceのサイトを新しいタブで開きます。 [コード挿入] パネルを開きます。
5. 「ヘッダー」フィールドに Javascript SDK コードを貼り付け、 [保存] をクリックします。
6. Facebook Like Button Configurator に戻り、2 番目のフィールドからコードをコピーします。 これがFacebookの[いいね！] ボタンのコードです。
7. [いいね！] ボタンを追加したいページまたは投稿のエディターを開き、挿入箇所をクリックし、ブロックメニューからコードを選択します。
8. コード ブロック エディターで、[いいね！] ボタンのコードを貼り付けます。

   備考: セキュリティー対策として、ログイン中は埋め込みコードが無効になることがあります。 コードが表示されない場合は、ログアウトするか、ブラウザーのプライベート モードまたはシークレット モードを使用してページを表示してください。 詳細については、 「サイトにログインしているときにカスタム コードが表示されないのはなぜですか？」を参照してください。

ブログ投稿に投稿固有の [いいね！] ボタンを追加する

カスタム コードを変更して、各ブログ投稿の下に固有のFacebookの「いいね！」ボタンを表示することができます。 訪問者がこの [いいね！] ボタンをクリックすると、サイト全体ではなく、特定のブログ投稿に [いいね！] を付けることになります。

ブログ記事固有の [いいね！] ボタンを追加するには、次の手順を実行します。

1. 「ページ」パネルで、ブログ ページにカーソルを置き、をクリックしてページ設定を開きます。
2. [詳細設定] タブで、Facebookの [いいね！] ボタン コード (上記の手順 6 から) を [ブログ投稿アイテム コード挿入] フィールドに貼り付けます。
3. コード内のサイトURLを「{permalink}」に置き換えます。
4. [保存] をクリックします。

Facebookの [いいね！] ボタンが、各ブログ投稿のコンテンツの直後に表示されます。

備考: このコードベースのカスタマイズは、弊社のサポート範囲外です。つまり、セットアップやトラブルシューティングに関し、これ以上は弊社よりサポートを提供することができません。さらに、これはコードベースのソリューションであるため、その機能性やSquarespaceとの完全な互換性は保証されません。これには、Squarespaceのレスポンシブ デザインにおける当該ソリューションの機能性 (特にモバイル端末上での外観)、および、すべてのテンプレートでソリューションが機能するかどうかが含まれます。コードベースのカスタマイズは、弊社プラットフォームの今後の更新時に、表示に関連する問題を引き起こす可能性もあります。弊社はこれ以上サポートを提供できかねますが、次のように、お客様が問題解決のために参照できるリソースが多数あります。

• カスタム コードを追加するためのベスト プラクティスを確認してください。
• 「コードベースのカスタマイズに関する基本ガイド」をお読みください。
• Facebookのデベロッパー ツールのヘルプについては、Facebookの資料をご覧ください。
• 当社のお客様と開発者のフォーラムである Squarespace Forum をご覧ください。
• Squarespace Expertを雇い、ご自分のサイト用のカスタム コードの作成を依頼しましょう。