CocoonでTwitter埋め込みが表示されない・文字だらけ？失敗原因と正しいやり方

今日はにっきーの作ったテキストを見ながらブログ運営をしている人から、こんな相談がありました。

実際に送っていただいた、Twitterの表示の状態はこんな感じでした。

この状態でも、一応クリックすると元のツイートに飛びますが、訪問者さんにとっては不便この上ないですよね。

この記事では、文字化けか？！って思うようなツイッターの埋め込み失敗例を、どうやったら改善・解決できるのか。やり方の何が間違っているのかを説明していきます！

失敗の原因はURLのコピーのやり方！

URLはなるべく短い状態で扱うもの

早速ですが失敗の原因を見ていきましょう。

これは、「うまくいかなかった表示」がもう答えを示してくれています。

これ、一言でいうと文字だらけですよね。

これはURLが表示されているのですが、TwitterのURLは本来、こんなに長くなくても扱えるものです。

自分のTwitterを開いて見てみてほしいのですが…URLってこんなに長い状態になっていますか？

失敗原因：Twitterの「共有」機能から「URLをコピー」をしている

まずは失敗例としてあった「埋め込みが正しく表示されない」「ツイッター埋め込みなのに文字化けみたいになっている」という状態が、どのような手順を経た結果現れてしまったのかを説明します。

失敗した人に確認したところ、ツイートを開いた時に右下の「共有」ボタンを押して…

そこから出てくる「ツイートのリンクをコピー」をクリックすることで、ブログに貼り付けるためのツイートのURLを取得していたそうです。

この手順でだと、下記のようなURLがコピーされます。

https://twitter.com/kyuryuZ/status/1542704561105670144?s=20&t=d4NptkdsBKOWQjyAXs6TnA

パッと見て分かるレベルで、長いですよね。URLの中に「？」が入っていることが気になる人もいるかもしれませんね。

どうやらこの長いコードになってしまっている中でも「s=20」というのが影響を及ぼしているようです。

「?」より前の部分だけのURLでもリンクとしては、ばっちり機能します（元のツイートに飛べます）ので、このコピーの仕方では後半部分がごっそり不要でした。

Cocoonにツイートを埋め込む正しい手順

Cocoonにツイートを埋め込むときは、大きく分けると下記の２つのやり方があります。

1. 「ツイートのURL」を「Twitterブロック」に貼り付ける
2. 「埋め込みコード」を「HTMLブロック」に貼り付ける

どちらでもできますが、１の方が簡単なので、先に１を説明しますね！

一番簡単なやり方（Cocoonのブロックエディタ）

埋め込みコードを使ったやり方

続いて、どのテーマでもたいてい対応している「埋め込みコードを使ったツイッター埋め込み」のやり方を紹介します。

埋め込みの手順はどちらのやり方でも構いませんが、最も大切なのは「無駄な文字列が入っていない状態でURLをコピーする」ということです。最初に説明したように、Cocoonで埋め込みの表示が壊れるのは「コピーしたURLがおかしいから」というのが原因だからです。

URLが長い＝エラーの元凶だと考えよう

ちょっと与太話ですが…実は、にっきーはこのエラーを出したことがなかったです。

なぜかなと思ってみれば「URLが長い＝変だな」という認識がそもそもあるということに気付きました。

例えば友達に「このツイート面白いよ！」とシェアするとしても、今回の相談者さんの失敗のような「変に長いURL」は選びません。

みなさんはブログ運営者として、「日本語のURLは文字化けする」とか、「長すぎるURLはよくないな」など、URLスラッグに気を使っていると思いますので、SNSからURLをコピーするときにも同じ感覚を持ちましょう！

まとめ

今回はCocoonにツイッターのツイートを埋め込みたいのに、なぜか文字だらけになってしまう・元のツイートが正しく表示されない、という困ったシーンの解決方法についてお話ししました。

＼必見！／

知らないのはもったいない…
知るだけ知っておこう！（だって無料だし。）

「自宅で誰でも始められる」ブログを使った副業って？

まずは無料プレゼントを見てみてね♪

にっきーと一緒に、イラストで楽しく学ぶことから始めよう！

メルマガを無料で読んでみる