https://qwerty.work/tags/%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF/ Recent content in 埋め込み 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> https://qwerty.work/post/2021/11/php-contact-form-parts/ Tue, 02 Nov 2021 11:02:58 +0900 https://qwerty.work/post/2021/11/php-contact-form-parts/ <h2 id="お問い合わせフォームを簡単に設置したい">お問い合わせフォームを簡単に設置したい </h2><p>ホームページ制作にあたり、お問い合わせフォームを設置したいとき、PHPプログラミングで自分でも作成しましが、時短でサクッとコピペで簡単に設置できるものを探してみました。</p> <p>できれば、確認ページもサンクスページも単体で完結しているものが希望でしたが、見つけたのでメモ。</p> <h4 id="mailform01">MailForm01 </h4><p>単体のPHPファイル1つで動作するので、ページの埋め込みが簡単です。しかも無料です。</p> <div class="link-card"> <a href="https://www.php-factory.net/mail/01.php" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.php-factory.net/mail/01.php" alt="https://www.php-factory.net/mail/01.php" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.php-factory.net/mail/01.php</span> <span class="link-card-url">https://www.php-factory.net/mail/01.php</span> </div> </a> </div> <h4 id="php_mailform">php_mailform </h4><p>これはレスポンシブレイアウトや添付ファイㇽにも対応している優れも。これも無料です。</p> <div class="link-card"> <a href="https://econosys-system.com/freesoft/php_mailform.html" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://econosys-system.com/freesoft/php_mailform.html" alt="https://econosys-system.com/freesoft/php_mailform.html" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://econosys-system.com/freesoft/php_mailform.html</span> <span class="link-card-url">https://econosys-system.com/freesoft/php_mailform.html</span> </div> </a> </div> <h4 id="シンプルなサンプル">シンプルなサンプル </h4><p>必要最低限でカスタマイズしやすいサンプル。連投防止のアドバイスもあり。</p> <div class="link-card"> <a href="https://step-by.work/cms/39" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://step-by.work/cms/39" alt="https://step-by.work/cms/39" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://step-by.work/cms/39</span> <span class="link-card-url">https://step-by.work/cms/39</span> </div> </a> </div> <h3 id="その他参考">その他参考 </h3> <div class="link-card"> <a href="https://entsukablog.com/php-questionform/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://entsukablog.com/php-questionform/" alt="https://entsukablog.com/php-questionform/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://entsukablog.com/php-questionform/</span> <span class="link-card-url">https://entsukablog.com/php-questionform/</span> </div> </a> </div> <div class="link-card"> <a href="https://www.web-officer.com/php/how-to-make-inquiry-form.php" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://www.web-officer.com/php/how-to-make-inquiry-form.php" alt="https://www.web-officer.com/php/how-to-make-inquiry-form.php" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://www.web-officer.com/php/how-to-make-inquiry-form.php</span> <span class="link-card-url">https://www.web-officer.com/php/how-to-make-inquiry-form.php</span> </div> </a> </div> https://qwerty.work/post/2020/05/youtube-parameter/ Wed, 20 May 2020 22:56:42 +0900 https://qwerty.work/post/2020/05/youtube-parameter/ <h2 id="動画の初期設定をあらかじめ指定したい">動画の初期設定をあらかじめ指定したい </h2><p>サイトに埋め込んだ外国のYouTube動画の再生時に、いちいち翻訳字幕の設定するのは煩わしいので、**『はじめから翻訳をONにしてサイトに埋め込むことはできないのかな？』**と思って検索したら方法があったのでメモ。</p> <h2 id="参考サイト">参考サイト </h2> <div class="link-card"> <a href="https://support.google.com/youtube/answer/171780?hl=ja" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://support.google.com/youtube/answer/171780?hl=ja" alt="https://support.google.com/youtube/answer/171780?hl=ja" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://support.google.com/youtube/answer/171780?hl=ja</span> <span class="link-card-url">https://support.google.com/youtube/answer/171780?hl=ja</span> </div> </a> </div> <div class="link-card"> <a href="https://wisdommingle.com/youtube-embedded-player-parameter-customize/" target="_blank" rel="noopener noreferrer"> <div class="link-card-image"> <img src="https://image.thum.io/get/width/300/crop/200/https://wisdommingle.com/youtube-embedded-player-parameter-customize/" alt="https://wisdommingle.com/youtube-embedded-player-parameter-customize/" loading="lazy"> </div> <div class="link-card-body"> <span class="link-card-title">https://wisdommingle.com/youtube-embedded-player-parameter-customize/</span> <span class="link-card-url">https://wisdommingle.com/youtube-embedded-player-parameter-customize/</span> </div> </a> </div>