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

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

最終更新日 2025年1月20日

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

この機能へのアクセス

このガイドの手順には⁠、コ⁠ード挿入の使用とコ⁠ード ブロ⁠ックへの高度なコ⁠ードの追加が含まれます⁠。これらは⁠、コア⁠、プラス⁠、アドバンス⁠、ビジネス⁠、コマ⁠ース ベ⁠ーシ⁠ック⁠、コマ⁠ース アドバンスの各プランで利用できる機能です⁠。詳細については⁠、「⁠適切なSquarespaceプランを選択する⁠」をご覧ください⁠。

始める前に

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. [⁠保存⁠] をクリ⁠ックします⁠。
The_code_pasted_into_the_Post_Blog_Item_Code_Injection_box.png

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

KB Guide Image

備考

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

Footer Image
  • コミ⁠ュニテ⁠ィからサポ⁠ートを受ける

  • 高度なカスタマイズについて⁠、コミ⁠ュニテ⁠ィからサポ⁠ートを受けられます⁠。

  • Squarespace Expertを雇う

  • 経験豊富なデザイナ⁠ーや開発者から力を借りて⁠、オンラインで目を引くサイトを構築しまし⁠ょう⁠。

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