https://qwerty.work/tags/instagram/ Recent content in Instagram on qwerty.work Hugo -- gohugo.io ja-JP Fri, 29 Nov 2024 00:00:00 +0000 https://qwerty.work/post/2024/11/instagram%E3%81%AE%E6%9C%80%E8%BF%91%E3%81%AE%E6%8A%95%E7%A8%BF%E3%82%92%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AB%E5%9F%8B%E3%82%81%E8%BE%BC%E3%82%80%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3-%E3%82%A6/ Fri, 29 Nov 2024 00:00:00 +0000 https://qwerty.work/post/2024/11/instagram%E3%81%AE%E6%9C%80%E8%BF%91%E3%81%AE%E6%8A%95%E7%A8%BF%E3%82%92%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AB%E5%9F%8B%E3%82%81%E8%BE%BC%E3%82%80%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3-%E3%82%A6/ <p>WEBサイト制作時の自分用メモ。</p> <h2 id="クラウドサービス">クラウドサービス </h2><ul> <li> <p>それぞれFreeプランあり</p> </li> <li> <p>その他、FacebookやXなど、各種SNS用のウィジェットやWordpress用のプラグイン（無料）があるサービスもあり</p> </li> </ul> <div class="link-card"> <a href="https://elfsight.com/instagram-feed-instashow" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://elfsight.com/instagram-feed-instashow" alt="https://elfsight.com/instagram-feed-instashow" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://elfsight.com/instagram-feed-instashow</span> <span class="link-card-url">https://elfsight.com/instagram-feed-instashow</span> </div> </a> </div> <div class="link-card"> <a href="https://embedsocial.jp/p/templates/feed/category/instagram" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://embedsocial.jp/p/templates/feed/category/instagram" alt="https://embedsocial.jp/p/templates/feed/category/instagram" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://embedsocial.jp/p/templates/feed/category/instagram</span> <span class="link-card-url">https://embedsocial.jp/p/templates/feed/category/instagram</span> </div> </a> </div> <div class="link-card"> <a href="https://snapwidget.com/widgets" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://snapwidget.com/widgets" alt="https://snapwidget.com/widgets" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://snapwidget.com/widgets</span> <span class="link-card-url">https://snapwidget.com/widgets</span> </div> </a> </div> <p><strong>STUDIOでの使い方</strong></p> <ul> <li> <p><a class="link" href="https://help.studio.design/ja/articles/3305539-instagram%E3%81%AE%E3%83%95%E3%82%A3%E3%83%BC%E3%83%89%E3%82%92%E5%9F%8B%E3%82%81%E8%BE%BC%E3%82%80%E6%89%8B%E9%A0%86" target="_blank" rel="noopener" >https://help.studio.design/ja/articles/3305539-instagram%E3%81%AE%E3%83%95%E3%82%A3%E3%83%BC%E3%83%89%E3%82%92%E5%9F%8B%E3%82%81%E8%BE%BC%E3%82%80%E6%89%8B%E9%A0%86</a></p> </li> <li> <p><a class="link" href="https://note.com/leena333/n/nedc12d5494fe" target="_blank" rel="noopener" >https://note.com/leena333/n/nedc12d5494fe</a></p> </li> </ul> <h2 id="wordpressプラグイン">Wordpressプラグイン </h2> <div class="link-card"> <a href="https://elfsight.com/ja/instagram-feed-instashow/wordpress" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://elfsight.com/ja/instagram-feed-instashow/wordpress" alt="https://elfsight.com/ja/instagram-feed-instashow/wordpress" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://elfsight.com/ja/instagram-feed-instashow/wordpress</span> <span class="link-card-url">https://elfsight.com/ja/instagram-feed-instashow/wordpress</span> </div> </a> </div> <div class="link-card"> <a href="https://ja.wordpress.org/plugins/instagram-widget-by-wpzoom" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://ja.wordpress.org/plugins/instagram-widget-by-wpzoom" alt="https://ja.wordpress.org/plugins/instagram-widget-by-wpzoom" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://ja.wordpress.org/plugins/instagram-widget-by-wpzoom</span> <span class="link-card-url">https://ja.wordpress.org/plugins/instagram-widget-by-wpzoom</span> </div> </a> </div> <div class="link-card"> <a href="https://ja.wordpress.org/plugins/insta-gallery" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://ja.wordpress.org/plugins/insta-gallery" alt="https://ja.wordpress.org/plugins/insta-gallery" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://ja.wordpress.org/plugins/insta-gallery</span> <span class="link-card-url">https://ja.wordpress.org/plugins/insta-gallery</span> </div> </a> </div> <div class="link-card"> <a href="https://wordpress.org/plugins/instagram-feed" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://wordpress.org/plugins/instagram-feed" alt="https://wordpress.org/plugins/instagram-feed" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://wordpress.org/plugins/instagram-feed</span> <span class="link-card-url">https://wordpress.org/plugins/instagram-feed</span> </div> </a> </div> <h3 id="tcd参考ページ">TCD参考ページ </h3> <div class="link-card"> <a href="https://tcd-theme.com/2020/09/smash-balloon-social-photo-feed.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://tcd-theme.com/2020/09/smash-balloon-social-photo-feed.html" alt="https://tcd-theme.com/2020/09/smash-balloon-social-photo-feed.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://tcd-theme.com/2020/09/smash-balloon-social-photo-feed.html</span> <span class="link-card-url">https://tcd-theme.com/2020/09/smash-balloon-social-photo-feed.html</span> </div> </a> </div> <h3 id="その他まとめサイト参考">その他まとめサイト（参考） </h3><ul> <li><a class="link" href="https://embedsocial.jp/blog/wordpress-instagram-plugins/" target="_blank" rel="noopener" >https://embedsocial.jp/blog/wordpress-instagram-plugins/</a></li> </ul> <h2 id="javascriptで埋め込む場合">Javascriptで埋め込む場合 </h2><ul> <li> <p>Instagram Graph APIを使う</p> </li> <li> <p>Instagram ProアカウントとFacebookページを連携させる必要がある</p> </li> <li> <p>以前は「jquery.instagramFeed.js」や「<a class="link" href="https://instafeedjs.com/#/" target="_blank" rel="noopener" >Instafeed.js</a>」など、シンプルで使いやすいJSがあったようでが、APIの仕様変更で現在は使えなくなっています。JSを使う場合はAPIの仕様変更に気を付ける必要がありそうです。</p> </li> </ul> <h3 id="参考サイト">参考サイト </h3> <div class="link-card"> <a href="https://qiita.com/benjuwan/items/a31e23121456f5c29083" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://qiita.com/benjuwan/items/a31e23121456f5c29083" alt="https://qiita.com/benjuwan/items/a31e23121456f5c29083" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://qiita.com/benjuwan/items/a31e23121456f5c29083</span> <span class="link-card-url">https://qiita.com/benjuwan/items/a31e23121456f5c29083</span> </div> </a> </div> <div class="link-card"> <a href="https://arts-factory.net/insta%5c_api" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://arts-factory.net/insta%5c_api" alt="https://arts-factory.net/insta\_api" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://arts-factory.net/insta\_api</span> <span class="link-card-url">https://arts-factory.net/insta\_api</span> </div> </a> </div> <div class="link-card"> <a href="https://toriton.link/coding/insta%5c_embed" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://toriton.link/coding/insta%5c_embed" alt="https://toriton.link/coding/insta\_embed" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://toriton.link/coding/insta\_embed</span> <span class="link-card-url">https://toriton.link/coding/insta\_embed</span> </div> </a> </div> <div class="link-card"> <a href="https://engineering.webstudio168.jp/2022/02/2022-instagram-api-js/#google%5c_vignette" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://engineering.webstudio168.jp/2022/02/2022-instagram-api-js/#google%5c_vignette" alt="https://engineering.webstudio168.jp/2022/02/2022-instagram-api-js/#google\_vignette" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://engineering.webstudio168.jp/2022/02/2022-instagram-api-js/#google\_vignette</span> <span class="link-card-url">https://engineering.webstudio168.jp/2022/02/2022-instagram-api-js/#google\_vignette</span> </div> </a> </div>