# Instagramフィード ### Instagramフィード要素について [Instagramフィード](https://help.pagefly.io/manual/instagram-element/)要素は、ソーシャルネットワークをページに統合してコンバージョン率を高めるために設計されています。この要素を使用すると、ストアや商品に対するソーシャルプルーフを追加したり、単にブランドのソーシャルメディアページを訪問者に紹介したりできます。 詳細な手順に進む前に、以下のビデオをご覧ください。 {% embed url="" %} ### Instagramフィード要素へのアクセス方法 * **ステップ1**: 左側のツールバーにある**要素**機能をクリックします。 * **ステップ2**: **PageFly**タブの**ソーシャルセクション**の下にある**Instagram要素**をクリックします。 * **ステップ3**: 必要なバリアントをページエディターにドラッグ＆ドロップして使用を開始します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-ceb5bd315504f18f7c294a4658f3a7980e17c1a0%2FAD_4nXd7uAa8ZQZT99TgqNa35FDeqcG9WgxKqVt1LQCIOw4bquoj78lRUOUX_SQdZvgQpztxXVjjO0UVbSozu0IkJMY49JdKyEA0ZYgpmHR-x4EGjAqfLK1CXtRd1mcATELsEe5nWgSC5wlqFiU0-EIAkQkeydyfsYGhyr07fxcW8cJq55Q.gif?alt=media) ### Instagramフィード要素の設定方法 {% hint style="warning" %} **重要な注意**: 個人のInstagramアカウントを使用している場合は、アカウントをProfessionalステータス（ビジネスまたはクリエイター）に切り替える必要があります。切り替え後、現在のアクセス許可を取り消し、ビジネスプロフィールでアカウントを再接続してください。この変更は、Metaが2024年12月4日にBasic Display APIを廃止するという決定によるものです。アカウントのステータス切り替えに関する詳細については、[Instagramのこの投稿](https://business.instagram.com/getting-started)を参照してください。 {% endhint %} Instagram要素には、コンテンツの表示を微調整して最高のコンバージョン率を達成するための多数のパラメーターがあります。 レイアウトで要素を選択し、一般タブとスタイリングタブに移動してそのパラメーターを確認します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-160290e03107f3f5c66ed0893fe35bf56fd088c2%2FAD_4nXe4zdwfy-mRCse_GfEsqZqqZn7cfZiy7WMBOtcSGRumV9foov42dFa8eJaVfHRprMceIVDUTwYZYMWi-FWhsgZHc5Y5pOy7oZ5I4RrH8Gt0ltvYeR4luzr6k_6jOlhh9PIh_LlrImMTtOBe_SWxvQMBs7Jk?alt=media) #### 一般設定 一般タブに移動して、Instagramフィード要素を設定します。 **Instagramに接続** 「**Connect To Instagram**」ボタンをクリックしてInstagramに接続します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-5feaf11bae05164afb9bad3f232832112a4d0b04%2FAD_4nXd5-lZaUu-PbzkPaRoJI64PMnWywNZnuwdhqND56kZH2-L1wArl6DBh_Q9Lpr9h6JibZCZxyLP8qcwA0IcKN0aEJrcos3ZF1FnySVPqCeSSruU_cmsLQH3oDCylImQGWbZnktiTnwPZ0O8X-zsWg9WSCy24?alt=media) 下の画像のようなInstagramのログインページにリダイレクトされます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-f19d010f711d01bde33d5da016fc46575dafd8e8%2FAD_4nXceDrVeHSXoggc2P8PbCEMMQa7yIaR4ZiGVV14wGYpomOdF0l4QkzuNVnWr3jdPNPdhBvKyBQBnsNCHgi1_6CaE0VZjsXU-FPQ7IaS3AMeZlXroWQ7Ej_DBI4Zb107xvpoAzlNhoXpnqE0bUDqEfw-GoZCI?alt=media) ストアのInstagramアカウント情報を入力し、Allowボタンを選択してPageFlyがあなたのプロフィール情報とメディアにアクセスすることを許可します。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-8e3d43d669a02fb3ad687e8b82f5f639aa20a244%2FAD_4nXd7OMmWhLoMRpW4kWlWGGVPg0Vov5o0yqP7Bq1XY2LoEYYkdiJe-Jq-fwXrKi0LbGbiDXK4RJ8LFs9tq6AKHLmngmaH3FgFbC5rz1yUpHuKDM0vy4NBp-HtoGA9aRLK4csAVEgOF33vw_DE1rrC2JM9R_0-?alt=media) ストアのInstagramアカウントが正常に接続されると、「**Access granted**」という通知が表示されます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-c4f7b43a51a2f690ba077ec64330958fb0f427b9%2FAD_4nXfHwVqg4_LYz7v6C2ffhQ1kMRyhW_AHDMDY5h24pUWj5EXbUbNtlSm2tVosiWXhgiwOvJlZaoiHHLYkmhmbf3ibs7kU9jx6x07fdIRrsN603o_y2oo89hm0WPEniRkWv34GeHQ826vgduHpxQYb9j3BfmP_?alt=media) **コンテンツ読み込みの設定** Instagramフィードの読み込み方法をカスタマイズします。 * **Lazy Loading**: コンテンツはユーザーの画面に表示されたときのみ読み込まれ、帯域幅を節約し、最初のページ読み込み時間を改善します。 * **Standard Loading**: ページが開くとすべてのコンテンツがすぐに読み込まれ、すべてが即座に表示されます。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-f5fd149b1b239eed2c8ccdf759ade540dc21dc3a%2FAD_4nXeanNsUQ0GGULDz3aERXvq5nQ7vt0e-K-MVgQETnXterFrE3qX9QJ3kp2ipV88xXB3-YzwasEsAx362SdUkRY9v66auWd0gi5-35vibk91uPDJhtPr6QhD1XVDdSJU7Ns9JEcYcy9dqNMW9oNLA9mt6bgVJ?alt=media) **合計アイテム数を選択** 表示したい写真の枚数を選択します（最大値は20）。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-37fc0f3c671393782eec106de818c2f59bcb3fb2%2FAD_4nXc-K5GVQzCyKH3LQRd8BCj6IX0dypj8JUqNXd_8j33v_DSwF74GNd5qw8rRerT-WfVyHGtI-wPN7bh---YorJWg6EV6mk7k0mCx0YO2MY6L_uoiei3HmwI3GZOyo3OBPy24pWsq2MJ3NDqxHm3izQ9-3X1m?alt=media) **レイアウトを選択** Instagramフィード要素には、グリッドとスライドショーの2種類のレイアウトがあります。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-a2ba5989db47e40b453672a2c5d3bf4de0489778%2FAD_4nXctHstmz6yBXeUEhkyngndGI9oHR969Wj6n4xvUAABxUduT9vKJyBRC0-Okq8hhfU5EPY9M2spf3QE4r-wRTR7e_ct0zt7FQrXI3nN2knoqsdy2TnhnbVxz3ZG97q-DuOZHsEqzUZnN0rrACho_MRp6mdZf?alt=media) * **グリッドレイアウト**を使用すると、商品を構造化されたグリッド形式で配置し、顧客が一度に複数のフィードを簡単に閲覧できるようにします。以下の設定オプションを確認してください。 | **Items per row**: 1行に表示したい写真の枚数です。 | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXevP-34ocKCdUdZd-HnjXpD97pzsRgUjqWIRHvjZISOS2iRrcf6c_oX71h9Iv_0q9gtxonFgwcrYJ1Mfys6H98L_oRrAjRDymeYEGu3NGJHC9gsONlKfBqaRsKNme2o69MTLsjPBocwwNTiEPi0i8hMzKhT) | | **Items spacing**: 画像間の間隔です（最大値は100px）。 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-6a16fe2ee1fe718669c2ceb5358759b439cfdfe3%2FAD_4nXeJVaOG_eoXVraopqzJIjDkOxJJlISIfN-0XhTfNVu0YBXgPZNdbzmaGQwijhmuk8RnZCCIAQyMHCL_ejPVuCxNDFejPHN5ztJwUsYQHoLhScShbw_uiC-QCi_vNj0RB7fs8frK5nj26oqG2TD0Iqutmyg?alt=media) | | **Enable equal height**: すべての画像の高さを均一にするには、このオプションをオンにします。必要に応じて高さを調整できます。 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-b6417c51ff1295be31bcb40087bf15a007463978%2FAD_4nXeHNlwSqvz1XVI9GNs52q7yppnt12LzZ-UDYGfuTL9t3WN6yFUDhQQuu9_klVph4p6PWqV-uiQuUEuo7fQibJkIOufd5escSY-4HXqpl-iHyvweIo26s0xSj4jntI2o-MQx5cOSaMjrT0iTOV30qOS0_UT5?alt=media) | | **Image height**: ピクセル数を増減することで、画像の高さを調整します。注意: このオプションは、「Enable equal height」オプションを無効にした場合にのみ表示されます。 | | ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXcIC_ZhG0JOGoCkaraGmq3Xr_RAr7rXzFsPve74DnrMjHmxdgxgUbCZ44aHrWRGQFIYXFneJeK6iPZ_0rY-tWqIierBnQf11gBimBh2rXNCpKg_WX7LduEPlCZiPAW4fkE2KgGn1bdmINQ583bE4MzK-lPa) | * **スライドショーレイアウト**を使用すると、商品をスライドするバナー形式で配置し、顧客が一度に1つのアイテムをブラウズできるようにします（通常、アニメーション効果付き）。以下の設定オプションを確認してください。 | **Items displayed**: 1行に表示したい写真の枚数です。 | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXeeJ2rH8C36FnGuU_DcTW0O5AQwQmv_mHh0qX4W28PLqNm7NxQhX9XRoQRVxaAsGqxW0kPyKb77zuJ_BiOMwcBALSWHPvtXuwt0zrV36a_NVQLcPFQEtXEzfcs3FKiFjPOnBJU9lDWumKO_XiZiQ5PVzSM) | | **Items to Scroll:** 1行でスクロールしたい追加アイテムの数です。 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-a5bed6e4a7335ef601a2c400775259ba52529413%2FAD_4nXcHloUkQz8kBOyZBa_ioyhFUi1I6XoJqlBB7FmOColMC2wb2Plh8pRgDbhQEMudJIaewXTh55ngGaLcHaOvAnRzBTgr1Hs27TpsCTOCKxq8RxdbBCHjrY7T3xBY7mX75Pbd_QaWtOR7TIH3IzWYj_l8wdQ?alt=media) | | **Items spacing**: 画像間の間隔です（最大値は100px）。 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-ac8532736b15631f7d89e7421dc5b0ff20a9a4d1%2FAD_4nXdL0DbS0b_EwcmA21RaQY7cOLdqONjXT56uQGXFMvDfsTsGxIXccP49-z2LkGrncEDBF4NhRAk0k4wC_mRtKXArSp5WV26z1bbJFKWYgHqsb8-G74VPpmKIxAVrAsENPwaiUx9P0wZje_LqI7uSFbAJkqKY?alt=media) | | **Display partial items:** 前のアイテムと次のアイテムを部分的に表示させたい場合は、このオプションをオンにします。 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-e58033b0ccddae84ce88a35986b1356d3d586b2f%2FAD_4nXeyLDpobR4atSZbwnJhVpDSLV2giaeTV2LP0sidptWfPPEdKEq6P7wspFbcenkm3IdpYMNeXUQ2FLFSc82izyN_Deq_DYR554w4cxaGWPthWocjHR-MCrk9vhAOFPheIzOi0OREIimQyoYPLfzTn9e3fmQ?alt=media) | | **Navigation type:** 左右の矢印ナビゲーションボタンには5つの異なるスタイルがあります。「**None**」を選択してボタンを非表示にすることもできます。**注意**: デスクトップおよびノートパソコンでは、一部のオプションはマウスオーバー時のみ表示されます。 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-45e032bafb9aec2498375e88d1f83a35414330bf%2FAD_4nXeOi5Za6naXdoisaBjOahmfb_U7n5UCdAwH6IJy_oL8n_RMPxAcJMZ8zQ7yTqjUrGnQ-CzCwT_kGQx9nb_d8_PhKamrG2jkmXLAKXrziVZV1vj9m9qr7-pIFy0FCOzqTzb0sCEr4dTWfGm6RLobBKiV09U?alt=media) | | **Pagination type**: ページネーションインジケーターには3つの異なるスタイルがあります。 | | ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXeg3_p62awHxk5W067mijjXB0ZFip0a57NGBgcuB42wvglJMTL7STyGwjqIkwACPqHbJICooSU7ZlpWN051TPoB5K5zD2nOzJeZLrbOmxxfbGFoD39P28MGJxsJbQ1j4nqr3GVGesk-FFFRU3f7JSGm7uLh) | | **Enable Equal Height**: 表示されるすべての画像の高さを均一にしたい場合は、このオプションをオンにします。 | | ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXf5dc_ghX2QFZCCvqn6pPepmlOxaVYGRw1sIvQGLk4rvQPxRQjze4k_LQb5McMxsVWStM0tcM-woMfhbNwlqmQnAtGXkLbE8v3PuvI-4zmfpvH9mvSM1wqCnkPt2YNOHlRpWMLqFqf0MVztHK-pyuTREUC6) | | **Image Height**: ピクセル数を増減することで、画像の高さを調整します。**注意**: このオプションは、「**Enable equal height**」オプションを無効にした場合にのみ表示されます。 | | ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-a5d29ec5d092ab37ae14b11305389ca1ed16a23d%2FAD_4nXci7U4WVNnZye17RcX7sAewcQZnBfKItbaq5VIYkp7EgoLGV8VBncev4cQjR1EK3HCEeThiy2gUPD3RiIvaSHoON2BWpOTDk3znPsfk9q1PocV1XkY-OoVbYMIZRhXj0stzmZGQyLAfwICcTHT_5i8fSCuB?alt=media) | ATTRIBUTES、VISIBILITY、ANIMATIONパラメーターに関する詳細は[こちら](https://help.pagefly.io/manual/elements-general-settings/)をご覧ください。 #### スタイリング設定 スタイリングタブに関する詳細は[こちら](https://help.pagefly.io/manual/elements-style-settings/)をご覧ください。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-3ba1f5b7c95774c806a3d4845e99d22b1cb8dbdb%2FAD_4nXdOY2pJbFO2vwRjX3HvP7eRbvlpsJ2HFzJyb7zG-bTVJtpijK3nKHdj-Ci-cApZ2PAOXxSCZmqHmDaFPRxicaTU9_WsNy7xhNM6nsP-KczhKxnoaFYgkIC8kScO6HZ5-eAFY1FnpDCkxO1D1dQoHOs7sK8i?alt=media) ### よくあるケース #### Access Not GrantedまたはExpiredエラー ストアのInstagramアカウントが接続されていない/接続に失敗した場合、またはページが**60日以内**に公開されていない場合、「**Access ungranted or expired**」という通知が表示されます。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXeddu9SOAKOhL-rAoCceSr4DTPlwwR3NaxQnvzqZwlWB6uH-bWwNvM87rl7ZuldYoKziLL3Z81GW2aAPZYi2Gsheib16VtOi2d-KJXwvDgvBOThimBguCWiqKn38LvJBH4A2yhNDfZw-bZ-W3zPMKwwDwgx) これを解決するには、「**Connect to Instagram**」ボタンをクリックしてInstagramに再度接続してみてください。 #### Instagramからの切断 Instagramアカウントをページから切断したい場合は、**Revoke Access**ボタンをクリックするだけです。 ![](https://2271939490-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT9kr2rEW4UEj3nmGvBuq%2Fuploads%2Fgit-blob-db815f0328eac6aaa2fde707d3c070eec13d3181%2FAD_4nXdArBD-EF_B4aPl_m-gTzzMmlLtdLZrTwYOc4Clg1N2l7WH7a1rVyKj2x1KQFf7cbZz_deCxFARVgiWURAqVbR83833hh3Bd29qItwIAgQtmozQpVoGupgpjA1zqCRp3ct9ZTeRk2T6OPPp_PlGJC-MGTI?alt=media) ### よくある質問 **1. 1行に何個までアイテムを追加できますか？** 20個 **2. 写真の高さの要件はありますか？** 100px - 1280px **3. なぜShopifyストアにInstagramフィードを追加すべきなのですか？** PageFly Instagramフィード要素を使用することは、ストアにソーシャルプルーフを追加し、商品をアピールし、ブランドのソーシャルメディアプレゼンスを訪問者に紹介する素晴らしい方法です。 **4. ShopifyストアにInstagramの写真画像を挿入できますか？** はい、最大20枚の画像を挿入できます。 **5. すべてのInstagram写真を手動で挿入および編集する必要がありますか？** いいえ、必要ありません。InstagramアカウントがShopifyアカウントと正常に接続されると（「**Access granted**」という通知が表示されます）、写真画像は自動的に挿入されます。画像はInstagramフィードと同じ順序で表示され（これは携帯電話のInstagramアプリで確認できます）、必要に応じてこのセクションのスタイルを設定できます。 ### 追加リソース * [Facebookフィード要素の使用方法](https://help.pagefly.io/manual/facebook-page-element/) * [X (Twitter)要素の使用方法](https://help.pagefly.io/manual/twitter-element/)