現在デフォルトスキンとして「COLORS(ブルー)」を適用中。

埋め込みインスタグラムが表示されずリンクになってしまう件について | ブログ相談 | Cocoon フォーラム

書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示してください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

フォーラムの内容は、CCライセンス(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

詳細なカスタマイズ依頼をするならこちら。

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
埋め込みインスタグラムが表示されずリン...
 
Share:

[解決済] 埋め込みインスタグラムが表示されずリンクになってしまう件について  


kinakozico
(@kinakozico)
Active Member
参加: 4か月 前
投稿: 12
2019年10月28日 00:25  

わいひらさま、みなさま
いつもお世話になっております。

上記タイトルの件で相談させてください。
コクーンの仕様の問題ではないのかもしれませんが、インスタグラムの埋め込みが表示されずリンクになっています。
埋め込み表示でをさせたいのですが、どのように何のコードを入れたらよいのでしょうか?

実現したいこと
インスタグラムの埋め込みを、リンク先に飛ばすに当ブログ内に表示させたい。

お手数とは存じますがお知恵を拝借できたら有難いです。

どうぞよろしくお願いします。

----------------------------------------------
サイト名:野菜ごはんとお散歩メディア グッドモーニング チェンマイ
サイトURL: https://vegan-chiangmai.site
ホームURL: https://vegan-chiangmai.site
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
Wordpressバージョン:5.2.4
PHPバージョン:7.2.17
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.120 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja,en-GB;q=0.9,en-US;q=0.8,en;q=0.7
----------------------------------------------
テーマ名:Cocoon
バージョン:1.9.9.5.3
カテゴリ数:9
タグ数:2
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.0.8
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Auto Post Thumbnail:0
ホームイメージ:/wp-content/uploads/2019/07/gm-home-ime.png
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:1
CSS縮小化:1
JavaScript縮小化:1
Lazy Load:1
WEBフォントLazy Load:1
JavaScript(フッター):1
----------------------------------------------
利用中のプラグイン:
All In One SEO Pack 3.2.10
Bogo 3.2.1
Broken Link Checker 1.11.8
Contact Form 7 5.1.4
Google XML Sitemaps 4.1.0
Smash Balloon Instagram Feed 2.1
TypeSquare Webfonts for エックスサーバー 1.2.0
WordPress Ping Optimizer 2.35.1.1.0
WP Fastest Cache 0.8.9.9
----------------------------------------------


たなかま
(@tanakama)
Reputable Memberサイト
参加: 2年 前
投稿: 278
たなかま - Twitter
2019年10月28日 09:21  

こんにちは。

インスタグラムの埋め込みコードは、HTMLで入ってますでしょうか?

ブロックエディタをお使いの場合は、添付画像のようにHTMLで入れる必要があります。

 

次回からで良いのですが、不具合のあるページもご提示いただけると、回答する側として助かります。

https://vegan-chiangmai.site/sleeper-train-from-bankok


わいひら 件のいいね!
kinakozico
(@kinakozico)
Active Member
参加: 4か月 前
投稿: 12
2019年10月28日 18:25  

たなかまさま

お世話になります!ご返信ありがとうございます!
埋め込みコードはHTMLで入れております。

つい1週間ほど前まで問題なく埋め込み表示できていました。
特に何の変更もしてないのですが、今までの埋め込みコード含めて全面的にリンクを飛ぶ仕様になってしまい、困っています...

リンク先表示記入漏れ失礼しました。
複数ページに渡ってこのような症状なので、主だった2ページのリンク先と画像をいたします!

どうぞよろしくお願いします!

https://vegan-chiangmai.site/aboutus

https://vegan-chiangmai.site/sleeper-train-from-bankok

お知恵を借りたいこと)上記2ページのインスタ埋め込みを表示させたい

埋め込みコードは添付ファイルのように記入しています。


たなかま
(@tanakama)
Reputable Memberサイト
参加: 2年 前
投稿: 278
たなかま - Twitter
2019年10月28日 19:10  

僕の環境だとできていますね。

なるべく環境を合わせてみました。

プラグインを順番に解除したりは試しましたでしょうか?

Wordpressバージョン:5.2.4
PHPバージョン:7.1.28
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.70 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:1.9.9.5.3
カテゴリ数:17
タグ数:21
ユーザー数:2
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Auto Post Thumbnail:0
ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:1
CSS縮小化:1
JavaScript縮小化:1
Lazy Load:1
WEBフォントLazy Load:1
JavaScript(フッター):1
----------------------------------------------
利用中のプラグイン:
Autoptimize 2.5.1
Contact Form 7 5.1.4
Google XML Sitemaps 4.1.0
Redirection 4.4.2
Share This Image 1.28
Simple 301 Redirects 1.07
tkama_heading-add-link-id 1.0.0
WordPress Importer 0.6.4
----------------------------------------------

 

追記:あと、Smash Balloon Instagram Feedというプラグインが気になりますね・・・。

 

This post was modified 2週間 前 by たなかま

わいひら 件のいいね!
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3728
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年10月28日 19:40  

プラグインの影響ではないか。

って事をチェックするのが手っ取り早いですよ。

 

そうでなければ、データベースのキャッシュの影響もあるのかもしれないです。

https://siteorigin.com/clearing-oembed-cache/

Clearing oEmbed Cache(oEmbedキャッシュのクリア)

 

詳細は上記URLをフォーラム内検索したら、記憶にある範囲ですが、最低2つは出てくると思います。


わいひら 件のいいね!
kinakozico
(@kinakozico)
Active Member
参加: 4か月 前
投稿: 12
2019年10月28日 20:40  

たなかまさま
かうたっくさま

返信頂きありがとうございます!

プラグインは一度全て停止しましたが、該当箇所は表示されないのです。

一度元どおりにプラグインを復活させ
たなかまさまのアドバイス通りにSmash Balloon Instagram Feedというプラグインのみ停止させたのが今の状態です

↓下記にデータを貼ります

また、編集画面上でのプレビューではきちんと表示してくれるのに、
サイト画面上では、やはりInstagramにリンクが飛ぶ設定になってしまいます
(編集画面上のプレビューのスクショを添付いたします)

該当ページはこちらです
https://vegan-chiangmai.site/sleeper-train-from-bankok

初歩的なミスのような気もするのですが
皆目見当がつかないので、お力を貸して頂けると助かります......

----------------------------------------------
サイト名:野菜ごはんとお散歩メディア グッドモーニング チェンマイ
サイトURL: https://vegan-chiangmai.site
ホームURL: https://vegan-chiangmai.site
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
Wordpressバージョン:5.2.4
PHPバージョン:7.2.17
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.120 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja,en-GB;q=0.9,en-US;q=0.8,en;q=0.7
----------------------------------------------
テーマ名:Cocoon
バージョン:1.9.9.5.3
カテゴリ数:9
タグ数:2
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.0.8
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Auto Post Thumbnail:0
ホームイメージ:/wp-content/uploads/2019/07/gm-home-ime.png
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:1
CSS縮小化:1
JavaScript縮小化:1
Lazy Load:1
WEBフォントLazy Load:1
JavaScript(フッター):1
----------------------------------------------
利用中のプラグイン:
All In One SEO Pack 3.2.10
Bogo 3.2.1
Broken Link Checker 1.11.8
Contact Form 7 5.1.4
Google XML Sitemaps 4.1.0
TypeSquare Webfonts for エックスサーバー 1.2.0
WordPress Ping Optimizer 2.35.1.1.0
WP Fastest Cache 0.8.9.9
----------------------------------------------


kinakozico
(@kinakozico)
Active Member
参加: 4か月 前
投稿: 12
2019年10月28日 20:42  

失礼しました
スクショを添付し忘れておりました!

こちらが編集画面上でのプレビューです。


kinakozico
(@kinakozico)
Active Member
参加: 4か月 前
投稿: 12
2019年10月28日 20:47  

かうたっく様のご指摘のキャッシュクリアはこちらかな...と思っているのですが
いかがでしょうか?(勘違いだったらごめんなさい)

このキャッシュクリアは試しているのですが今のところ変化はありません....


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3728
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年10月28日 21:09  

 

このキャッシュのことは書いてないんですよね 😥 

 

データベースのキャッシュのことを書いてます。

一度、まず、前述のリンク先をチェックしてみてください・・・。データベースのバックアップをとってから試すことをお勧めします❦


kinakozico
(@kinakozico)
Active Member
参加: 4か月 前
投稿: 12
2019年10月28日 21:45  

かうたっくさま

ありがとうございます!
まずデータベースのバックアップって何だろうって状態なので
(取ったことがありませんでした汗)そこからやってみます。

その後、また質問させて頂くと思いますのでどうぞよろしくお願いします!


たなかま
(@tanakama)
Reputable Memberサイト
参加: 2年 前
投稿: 278
たなかま - Twitter
2019年10月28日 22:33  

一応ですが、Xサーバーならmod_pagespeed設定が使われてないかご確認くださいませ。

https://www.xserver.ne.jp/manual/man_server_mod_pagespeed.php

僕は使ってなかったので、この機能がなくなってたのに気づかなかったのですが

同機能をすでに有効化しているサイトは、引き続きご利用いただけます。

とのことなので、ちょっと気になりました。

必要なscriptタグがないように見えましたので。

あと、インスタグラム側からコードを取得するとき、埋め込みではなく、「リンクをコピー」は試されてますでしょうか?

※不具合が出ている間は、Cocoon高速化の縮小化も外していただく必要があります。


わいひら 件のいいね!
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 2年 前
投稿: 3728
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2019年10月28日 22:37  

エックスサーバーのようなので、サーバー側がバックアップを取ってくれてるのをうまく利用するのも手かもしれないですね。

https://www.xserver.ne.jp/manual/man_db_restore.php

 

データベースを触るのは、エックスサーバー上にあるサーバーパネルからできますよ。

以下画像なら phpmyadmin(MySQL5.7) より

https://gyazo.com/74e3a0a3b87f7b8011c76347d7b42f7a

 

データベースのログイン方法から不明でしたら、以下もどうぞ

https://bibabosi-rizumu.com/wordpress-mysql-login/

 

 

mod_pagespeedは新しいサーバーではないので、もし見当たらなければ大丈夫かも

***
回答サイド的な事ですが

mod_pagespeedをチェックする方法もついでに。

SEOチェキのHTTPヘッダ情報が参考になりますよ。 http://seocheki.net/http-header.php

https://gyazo.com/96dd23bd708791feba1a1ee69d5bb609

大丈夫そう。ってわかります❦

This post was modified 2週間 前 by かうたっく

わいひら 件のいいね!
kinakozico
(@kinakozico)
Active Member
参加: 4か月 前
投稿: 12
2019年10月28日 23:18  

お世話になっております。お時間いただいてありがとうございます!
知らないことばかりで、検証に時間がかかっております..

① データベースのバックアップはBackWpupというプラグインでとってみました

② Xサーバーのサーバパネルを確認しましたが、高速化カテゴリにmod_pagespeed設定というものがないので、元から使ってなかったのだと思います

③ Instagramからコードをとる時に、「埋め込み」と「リンクをコピー」を両方試したのですが、状況はかわりません。
→画像添付 上がリンクをコピー、下が埋め込み 同じインスタタグです
→該当ページ https://vegan-chiangmai.site/sleeper-train-from-bankok

④ コクーン縮小化 外しましたが変化なし

引き続き、かうんたっくさんが書いてくださったのも試します


kinakozico
(@kinakozico)
Active Member
参加: 4か月 前
投稿: 12
2019年10月29日 14:47  

お世話になります。途中経過をご報告します。

かうたっくさんに教えていただいた
https://siteorigin.com/clearing-oembed-cache/ の使い方がわからず
ググっている中で、見つけた以下3つを試しました↓

①サーバーキャッシュ設定
https://www.xserver.ne.jp/manual/man_server_cache.php

②WP-Optimize 3.0.13というプラグインを設定する

③ブログカードをリセットする方法
https://fantastech.net/wordpress-embed-content-reset

特に③で紹介されているコードを入れて削除する方法は
データベースから直接削除する方法と同じということだったので
これならわかる!とやってみたのですが、変化はありませんでした....


たなかま
(@tanakama)
Reputable Memberサイト
参加: 2年 前
投稿: 278
たなかま - Twitter
2019年10月29日 15:37  

いずれにしても、

src="//www.instagram.com/embed.js"

のscriptタグがなくなっています。

そのため、高速化が怪しいように思ったので、そちらも疑ってくださいませ。

(私の方でHTMLソースの確認をするのに、縮小化を外してくださいという意味でした)

WP Fastest Cacheにも縮小化があるようですね。

scriptタグの許可・不許可もどこかにあるのかもしれません。(プラグインは全停止で試しましたよね)

プラグインを全停止して、URL末尾に?を付けるとどうでしょうか?(全停止後のキャッシュが残っていた可能性など)

 

それでも直らない場合、TwentyNineteenテーマを適用して検証するのも手です。

 

embed.jsを強引にhead内に読めばいけるのでは・・・と思いましたが根本的な解決ではないですね。


わいひら 件のいいね!
kinakozico
(@kinakozico)
Active Member
参加: 4か月 前
投稿: 12
2019年10月29日 16:58  

たなかまさま

声をかけて下さって本当にありがとうございます><
今現在

プラグインを全部停止
HTML、CSS、JavaScriptの縮小化のチェクを全部外しました

該当ページの末尾に?をつけて読み込んでみましたが
変化はないようです。

>TwentyNineteen
ですね
テーマを変更したことはないですが、やってみます!

 


kinakozico
(@kinakozico)
Active Member
参加: 4か月 前
投稿: 12
2019年10月29日 16:59  

該当ページの末尾に?をつけたものです
https://vegan-chiangmai.site/sleeper-train-from-bankok?


たなかま
(@tanakama)
Reputable Memberサイト
参加: 2年 前
投稿: 278
たなかま - Twitter
2019年10月29日 18:02  

縮小化解除ありがとうございます。

根本的な解決ではないですが、やはりhead内に以下のembed.jsを読ませると上手く行きます。(添付画像)

https://notepad.pw/s21vvd80

記事内に入力したscriptタグがなくなっているのが原因ですね。

セキュリティか高速化でscriptタグを移動させたり、入力させなかったりすることがあります。

ちなみにTwentyNineteenで上手くいったからといって、Cocoonテーマに要因があるとは限りません。


たなかま
(@tanakama)
Reputable Memberサイト
参加: 2年 前
投稿: 278
たなかま - Twitter
2019年10月29日 18:17  

追記。

ブラウザかサーバーにキャッシュが残っているか疑わしい場合、

?1

?2

など、?+違う番号をURL末尾につけて、確認するとラクです。(あくまで自分のやり方なだけですが・・・)


わいひら 件のいいね!
kinakozico
(@kinakozico)
Active Member
参加: 4か月 前
投稿: 12
2019年10月29日 18:28  

たなかまさま

ででででできましたーーー!表示できました!!!

本当に本当にご丁寧にたくさんアドバイスをありがとうございます!(泣)

そしてたくさん勉強させていただきました!

もし初心者で同じような症状の方がいらっしゃったらと思い、head内への行き方を残しておきます。

編集画面 → 外観 → Cocoon Child → 右端にある tmp-user → head-insert.php → <?php endif; ?>の下に教えていただいたコードを入れました!

たなかまさま
かうたっくさま

本当にありがとうございます!お二人のファンになりました><
ブログを拝見してさらに勉強させていただきますね!


わいひら 件のいいね!
kinakozico
(@kinakozico)
Active Member
参加: 4か月 前
投稿: 12
2019年10月29日 18:35  
投稿者:: たなかま

追記。

ブラウザかサーバーにキャッシュが残っているか疑わしい場合、

?1

?2

など、?+違う番号をURL末尾につけて、確認するとラクです。(あくまで自分のやり方なだけですが・・・)

追記までありがとうございます!

これも次回からやっていって、少しづつ覚えていきます。


わいひら 件のいいね!
Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバ

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
サービス運営期間:1年3ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2019/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:3年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可
サービス運営期間:16年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:1年1ヶ月

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)
サービス運営期間:3年

Cocoon
  
動作中

ログイン または 登録 してください

タイトルとURLをコピーしました