スクリプトを埋め込むことから、サーバーのWAFにブロックされてるのかなと思いました。

Twitterは大丈夫なのは謎ですが…。

サーバーの設定からWAFをオフにする(やり方はサーバーによって異なります)といかがでしょう。

@haruinoue

早速教えて頂き、ありがとうございます!!

WAFの設定を確認したところ、全てオフになっていました。

本当に謎です…。

＊＊＊＊＊＊

追記

色々試したところ、インスタにも貼れるのと貼れないのがあるのがわかりました。

例えばエラーが出るのがこういった投稿で、

https://www.instagram.com/p/CJxB7hgFrdY/?utm_source=ig_web_copy_link

出ないのはこういった投稿です。

https://www.instagram.com/p/CLYCpm5Dqrb/?utm_source=ig_web_copy_link

前略、usako20 さん

私は、Instagramについては、サッパリわからないのですが、Instagramの埋め込みについては、昨年10月にロコさんが、注意を促すコメントを書かれています。

雑談

Facebook and Instagram embeds to be deprecated October 24th

自分のInstagramを埋め込むのにも、プラグインやトークンでの設定が必要だとすると、他人のInstagramを埋め込むのは、もしかしたら、難しいのかもしれません。

usako20 さん

WordPressでInstagramの埋め込みができない仕様になったのは、著作権の問題が大きいのかもしれませんね。

私は著作権も、よくわかりませんが、「Instagram 著作権」で検索すると、いろいろな記事がヒットするようです。

【2020年最新情報】他人のインスタグラムの投稿を、ブログに埋め込むのは著作権侵害？

インスタグラムの写真の著作権はどうなっている？投稿する時に気をつけるポイント

自分の Instagram か、先方にブログに掲載する許可をとってからの方が無難なのかもしれません。

@leafytree

リフィトリー様

Instagramの埋め込みについて、そのような状況になっているとは知りませんでした。

確かに著作権の関係の可能性が高そうです。

Instagramに関して、慎重に扱おうと思います…。

貴重な情報を教えていただき、どうもありがとうございます!!

InstagramブロックにURLを入力する埋め込み方の埋め込みができなくなっているだけで、埋め込みコードをカスタムHTMLブロックに入力する方法は問題ない認識です。

「埋め込んだのに表示されない」であればInstagram側で埋め込めなくしていることも考えられますが、記事の保存自体ができないのであればInstagramが原因ではない気がします。

投稿者:: @usako20

例えばエラーが出るのがこういった投稿で、

https://www.instagram.com/p/CJxB7hgFrdY/?utm_source=ig_web_copy_link

出ないのはこういった投稿です。

https://www.instagram.com/p/CLYCpm5Dqrb/?utm_source=ig_web_copy_link

私の環境ではどちらも埋め込みでき、下書き保存ができ、プレビューでも表示されました。

手順は冒頭に書かれていた通り

投稿者:: @usako20

 

• 埋め込みコードをコピー
• 記事編集画面でカスタムHTML
• カスタムHTMLにコピーしたコードを貼り付け

 

です。

原因は謎です…。

@haruinoue

たしかに、埋め込んでいるのに保存だけできない状態です…。

ここのところ、引用や画像、ツイッターの埋め込み、マップも、後から見ると崩れていることがあるので、Instagramが原因ではないかもしれません。

わざわざ、はる様の環境でお試しいただき、どうもありがとうございます…!!

ちゃんと表示されていますね。すばらしい…。

お手数をおかけして申し訳ありません。

私ももう一つのブログで試してみたのですが、そちらでもやはりエラーが出ます。

私のワードプレスだけ何か変なんだなと思います…。

改めて、ご丁寧にみていただき、本当にありがとうございます!!

はるさんとusako20さんのやり取りを拝見していたら、Instagramは別にして、やっぱりちょっと変だなと思いました。

「CJxB7hgFrdY」の文字列の中辺りになにかエラーになるものがあるのでしょうか？

@leafytree

わざわざお気にかけてくださり、ありがとうございます…！

文字列の中のエラーなるものがよくわからず…
申し訳ありません…。

もしかすると絵文字がある投稿がダメなのかなとか、投稿した月日なのかなとか、色々やってみたのですが、そういうわけでもなくて…

不思議です…。

@usako20 さん

投稿者:: @usako20

文字列の中のエラーなるものがよくわからず…

勝手な仮説を立ててみただけですが、エラーになる文字の組み合わせが有ったりするのかな？と考えてみたのです。

いつくかの文字の並びとか・・

エラーになる文字列のパターンがあるのではないかという・・でも見当違いかもしれません。

@leafytree

なるほどです…!!

パターンが見つけられるかなと思って、エラーが出る投稿をリストアップしてみました。

https://www.instagram.com/p/Bxwv8ENF31S/?utm_source=ig_web_copy_link

https://www.instagram.com/p/CFrayLHHfa5/?utm_source=ig_web_copy_link

https://www.instagram.com/p/CFe16gEJSrI/?utm_source=ig_web_copy_link

https://www.instagram.com/p/CFOOfWkJ-Ty/?utm_source=ig_web_copy_link

https://www.instagram.com/p/CETLoyaFaih/?utm_source=ig_web_copy_link

…結局よくわからず…、

おしゃれな投稿という共通点しか思い当たらず…
謎です…。

@usako20 さん

試しにローカルのテストサイトのカスタムHTMLブロックに５つとも貼り付けてみましたが、ロコさんの書かれたとおり、文字列として表示されてしまいました。

Youtubeには、「埋め込みを許可する」という項目があって、許可していない場合は、埋め込んでも動画は再生されないようになっているのは、知っていますが、Instagramはやったことがないので、何とも・・

投稿者:: @usako20

パターンが見つけられるかなと思って、エラーが出る投稿をリストアップしてみました。

私の環境では、前回と同じくいずれも埋め込み可能で、冒頭の投稿に添付のようなエラーは表示されませんんでした。

投稿者:: @leafytree

試しにローカルのテストサイトのカスタムHTMLブロックに５つとも貼り付けてみましたが、

Instagramの埋め込み方法は添付画像の通りです。
例えば「エラーが出る投稿」としてリストアップされたものの1つ目であれば、

<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/Bxwv8ENF31S/?utm_source=ig_embed&amp;utm_campaign=loading" data-instgrm-version="13" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:16px;"> <a href="https://www.instagram.com/p/Bxwv8ENF31S/?utm_source=ig_embed&amp;utm_campaign=loading" style=" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"> <div style=" display: flex; flex-direction: row; align-items: center;"> <div style="background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;"></div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;"></div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;"></div></div></div><div style="padding: 19% 0;"></div> <div style="display:block; height:50px; margin:0 auto 12px; width:50px;"><svg width="50px" height="50px" viewBox="0 0 60 60" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-511.000000, -20.000000)" fill="#000000"><g><path d="M556.869,30.41 C554.814,30.41 553.148,32.076 553.148,34.131 C553.148,36.186 554.814,37.852 556.869,37.852 C558.924,37.852 560.59,36.186 560.59,34.131 C560.59,32.076 558.924,30.41 556.869,30.41 M541,60.657 C535.114,60.657 530.342,55.887 530.342,50 C530.342,44.114 535.114,39.342 541,39.342 C546.887,39.342 551.658,44.114 551.658,50 C551.658,55.887 546.887,60.657 541,60.657 M541,33.886 C532.1,33.886 524.886,41.1 524.886,50 C524.886,58.899 532.1,66.113 541,66.113 C549.9,66.113 557.115,58.899 557.115,50 C557.115,41.1 549.9,33.886 541,33.886 M565.378,62.101 C565.244,65.022 564.756,66.606 564.346,67.663 C563.803,69.06 563.154,70.057 562.106,71.106 C561.058,72.155 560.06,72.803 558.662,73.347 C557.607,73.757 556.021,74.244 553.102,74.378 C549.944,74.521 548.997,74.552 541,74.552 C533.003,74.552 532.056,74.521 528.898,74.378 C525.979,74.244 524.393,73.757 523.338,73.347 C521.94,72.803 520.942,72.155 519.894,71.106 C518.846,70.057 518.197,69.06 517.654,67.663 C517.244,66.606 516.755,65.022 516.623,62.101 C516.479,58.943 516.448,57.996 516.448,50 C516.448,42.003 516.479,41.056 516.623,37.899 C516.755,34.978 517.244,33.391 517.654,32.338 C518.197,30.938 518.846,29.942 519.894,28.894 C520.942,27.846 521.94,27.196 523.338,26.654 C524.393,26.244 525.979,25.756 528.898,25.623 C532.057,25.479 533.004,25.448 541,25.448 C548.997,25.448 549.943,25.479 553.102,25.623 C556.021,25.756 557.607,26.244 558.662,26.654 C560.06,27.196 561.058,27.846 562.106,28.894 C563.154,29.942 563.803,30.938 564.346,32.338 C564.756,33.391 565.244,34.978 565.378,37.899 C565.522,41.056 565.552,42.003 565.552,50 C565.552,57.996 565.522,58.943 565.378,62.101 M570.82,37.631 C570.674,34.438 570.167,32.258 569.425,30.349 C568.659,28.377 567.633,26.702 565.965,25.035 C564.297,23.368 562.623,22.342 560.652,21.575 C558.743,20.834 556.562,20.326 553.369,20.18 C550.169,20.033 549.148,20 541,20 C532.853,20 531.831,20.033 528.631,20.18 C525.438,20.326 523.257,20.834 521.349,21.575 C519.376,22.342 517.703,23.368 516.035,25.035 C514.368,26.702 513.342,28.377 512.574,30.349 C511.834,32.258 511.326,34.438 511.181,37.631 C511.035,40.831 511,41.851 511,50 C511,58.147 511.035,59.17 511.181,62.369 C511.326,65.562 511.834,67.743 512.574,69.651 C513.342,71.625 514.368,73.296 516.035,74.965 C517.703,76.634 519.376,77.658 521.349,78.425 C523.257,79.167 525.438,79.673 528.631,79.82 C531.831,79.965 532.853,80.001 541,80.001 C549.148,80.001 550.169,79.965 553.369,79.82 C556.562,79.673 558.743,79.167 560.652,78.425 C562.623,77.658 564.297,76.634 565.965,74.965 C567.633,73.296 568.659,71.625 569.425,69.651 C570.167,67.743 570.674,65.562 570.82,62.369 C570.966,59.17 571,58.147 571,50 C571,41.851 570.966,40.831 570.82,37.631"></path></g></g></g></svg></div><div style="padding-top: 8px;"> <div style=" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;"> この投稿をInstagramで見る</div></div><div style="padding: 12.5% 0;"></div> <div style="display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;"><div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);"></div> <div style="background-color: #F4F4F4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;"></div> <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);"></div></div><div style="margin-left: 8px;"> <div style=" background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;"></div> <div style=" width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg)"></div></div><div style="margin-left: auto;"> <div style=" width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);"></div> <div style=" background-color: #F4F4F4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);"></div> <div style=" width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);"></div></div></div> <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center; margin-bottom: 24px;"> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 224px;"></div> <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 144px;"></div></div></a><p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;"><a href="https://www.instagram.com/p/Bxwv8ENF31S/?utm_source=ig_embed&amp;utm_campaign=loading" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none;" target="_blank">????(@sem.babygram)がシェアした投稿</a></p></div></blockquote> <script async src="//www.instagram.com/embed.js"></script>

をカスタムHTMLブロックに貼り付けます。

@haruinoue さん

はるさんのやり方が今日はできたので、やってみたら、問題なく埋め込むことができました。

しかし、４つ目を試そうとしたら、リンク先が表示されず、以下のログイン画面になってしまうようになりました。

埋め込みコードは、JavaScriptのコードだったのですね。

usako20 さん

埋め込みコードを Microsoft officeのエクセルとかワード等に一旦貼り付けたりしていませんか？

埋め込みコードや、CSSのコード、JavaScriptのコードを扱うときは、いずれも、文字コードをUTF-8（BOMなし）でプレーンテキストを扱うことができる、テキストエディターを使う必要があります。

それ以外のソフトなどに、一旦貼り付けたりすると、眼でみてもわからない余分な文字等が入ってしまう場合があります。

@leafytree

わざわざお試しいただき、ありがとうございます。＞＜
その方法で表示されていたこともあったそうなのですが、いまは下記にはるさんが示してくださった方法がベストみたいです。

商品を紹介しているような投稿が更新できない傾向があるので、もしかしてYoutubeみたいに、埋め込みの可否ができるようになっている可能性もあるのかなと思います…。
(すこし調べてみたところ、わからなかったのですが…。)

追記　返信が入れ違いになってしまい申し訳ありません。

@haruinoue

そうですか…！！
本当に不思議です。
また試していただき、ありがとうございます。
すみません…。；；

埋込方法についても、ご丁寧に、ありがとうございます。m(_ _)m

@usako20 さん

https://wp-cocoon.com/community/postid/45647/

上の書き込みに貼り付けていただいた、５つのURLのうち３つまでは、はるさんのやり方で問題なく埋め込めたので、埋め込みが出来ない理由は、埋め込みコードの取り扱いに何か問題があるのではないかと推測した次第です。

@usako20 さん

埋め込みコードをofficeなどのソフトに一旦貼り付けたりは、していないんですね？

テキストエディターは、何をお使いですか？

@leafytree

返信が遅くなり申し訳ありません！

いま、テキストエディターにして貼り付けたら、表示されるようになりました!!
なぜか１回目はエラーが出たのですが；

埋め込みコードをofficeなどのソフトに一旦貼り付けたりは、していなかったです。

普段、Gutenbergエディターのブロックエディターを使っています。

これからは、Instagramの埋め込みのときには、テキストエディターにしようと思います。

本当にありがとうございます!!m(_ _)m

こんな感じになりました。

@usako20 さん

ちょっと、テキストエディターについて、言葉の齟齬があるようです。

Instagramを貼り付けるだけのために、旧エディターに戻す必要はないと思われます。（たぶんですが・・）

次で「テキストエディター」の説明をします。

@usako20 さん

パソコン上では、office ソフトの Excel や Word などでも、文字を扱うことはできますが、文字の情報の他に、文字の大きさや、色などの純粋な文字の情報とは別の情報を含んでいる場合がよくあります。

そういった、文字の大きさとか色などの情報を含んでいない純粋なテキストをプレーンテキストなどと呼ぶようです。

そのようなプレーンテキストを扱うことが可能なのが、テキストエディターです。

テキストエディターには、無料で入手できるものがたくさんあります。

初心者向でも扱いやすいものとしては、Mery や　Terapad　や サクラエディタ などがあります。

初心者向け、と言ってもかなり高度なプログラミングでもできるようになっているようです。

現在最よく使われている文字コードはUTF-8（BOMなし）というコードですので、テキストエディターの文字コードをUTF-8（BOMなし）にして使用します。

埋め込みコードを一旦保存する場合や、今後ブログをCSSのコードでカスタマイズしたりする際には、このテキストエディターをお使いになることをオススメします。

私は、一番シンプルな Mery をオススメしています。

Meryの設定方法等は、以下のリンクで書いています。

Mery 設定方法

テキストエディターを、適宜 使うようにしていると、パソコンの文字関連の情報がどうなっているのか、徐々に理解が深まってくると思います。

私は、埋め込みコード等も、一旦、テキストエディターに貼り付けて、内容を確認するようにしています。

今回のエラーの原因は、また別のことかもしれませんが、テキストエディターを使うことでのデメリットは何もありません。

@usako20 さん

はるさんが貼り付けてくださった埋め込みコードと、@usako20 さんの貼り付けてくださった、画像の埋め込みコードを見比べてみると、@usako20 さんの貼り付けてくださったコードの方が、とても長いですね？

もしかしたら、取得している埋め込みコードが違うのかもしれませんね。

@usako20 さん

ちなみに、はるさんが貼り付けてくださった、書き込みから、埋め込みコードをコピーして、カスタムHTMLブロックに貼り付けたら、どうなりますか？

https://wp-cocoon.com/community/postid/45652/

@leafytree

Meryの設定方法を教えていただき、ありがとうございます!

32ビットのzip版をダウンロードするところまではできたのですが、解凍と、パソコンの拡張子を表示する設定というのは、どのように操作するのでしょうか。

@usako20 さん

その前に、32ビットというのは、割と古いパソコンに採用されていた規格です。

最近のものは、ほとんど64ビットになっています。

その点は、大丈夫ですか？

Windows10 - 32ビット版か64ビット版かを確認

@usako20 さん

Windows10のパソコンで拡張子を表示する方法は以下のリンクの記事でわかるかと思います。

Windows10 - ファイルの拡張子を表示/非表示にする

「隠しファイル」については、パソコンの動作に重要なファイルを隠す機能ですので、隠したままにしておく方が無難です。

@leafytree

はるさんが貼り付けてくださった、書き込みから埋め込みコードをコピーして、カスタムHTMLブロックに貼り付けました。

やはりエラーになって、更新と公開もできない状態になります。

@usako20 さん

Cocoonのフォーラムから、コピーして、直接カスタムHTMLブロックに貼り付けていますよね？

それとも、一旦、どこかに貼り付けたりしていますか？

@leafytree

そういうものだとは知りませんでした；

たしかめたら、６４ビットでした。

Windows10のパソコンで拡張子を表示する方法も、ありがとうございます！

やってみます！

@leafytree

Cocoonのフォーラムから、コピーして、直接カスタムHTMLブロックに貼り付けています。

どこにも貼り付けていないです。

普通に、右クリック、コピー、編集画面に移動、貼り付け、の順番で貼り付けています。

@usako20 さん

だとすると、埋め込みコードが原因ではない、ということになりますね。

あと試すとしたら、

１．別のブラウザ（Firefox、Edgeなど）に変えてログインして試してみる

２．プラグインを全て一旦停止した状態で、保存できるか試してみる

ぐらいでしょうか。

@leafytree

１．別のブラウザ（Edge）に変えてログインして試したところ、やはりエラーになります。

２．プラグインを全て一旦停止した状態、というのは、一括操作のところで、無効化にする、という感じでしょうか。

@usako20さん

一括操作の場合は、チェックを入れたプラグインに対しての操作になります。

個別でもどちらでもできるかと思います。

@leafytree

ありがとうございます!!

やはりエラーになってしまいました。

でも、とりあえず貼れる方法がわかったので、本当に良かったです。

@usako20 さん

そうなのですね。

だとすると、素人では、ちょっと対処が難しい問題なのかもしれません。

仮にデータベース辺りの問題だった場合等は、Xサーバーのサポート、もしくは、WordPressの修復のプロに依頼する、などの方法が考えられます。

【WordPress】『禰?豆子』が保存できない？ エラー「更新に失敗しました。データベース内の投稿を更新できませんでした。」の対処方法

@usako20 さん

あまりお役にたてず、すみません。

余談ですが、サイドバーの「最近の投稿」ウィジェットを「新着記事」ウィジェットにすると、「人気記事」ウィジェットと同様に、サムネイル画像が表示されるかと思います。

@leafytree

そうなのですね、私が何か変なことをしてしまったのかもしれません…。

サポートや引用についても、ありがとうございます!!

やたらと不具合が起きる星の下に生まれたので、とても助かります。m(_ _)m

@leafytree

とんでもございません!!

ささやかなブログなのに、とてもご親切にしていただき、本当に恐縮です。

「新着記事」ウィジェットにしたら、すごく見栄えが良くなり感激です!

見やすくなりました。

なかなかここまで教えてもらえる機会もないので、とても嬉しく思います。

本当にありがとうございます!!(*^^*)