このブログでは、テーマ「STORK19」を使用しています!

【ブロガー必見!】WordPressブログへのツイート埋め込みを「高速化」する方法

blank
blank
Tommy

ツイートを効率よく埋め込みたい!

blank
Tommy

けど、ブログ記事の表示が遅くなるのはイヤだな…

まず始めに、

  • ブログ×Twitterは最強。

です。

その理由は、

  • 他のブロガーさんと出会える。
  • モチベーションの維持に繋がる。
  • なにより楽しい。

から。

さらに、良いツイートを発見したら…

  • 利用させてもらえる(ブログに埋め込める)。

こともメリットです。

blank

しかし、

  • その方法を知らない。
  • 知っていても、正しい方法ではない。

という方も いるのではないでしょうか?

そのため今回、

  • 効率よくパパっと埋め込む方法。
  • ブログが重くならない正しい埋め込み方法。

を ご紹介いたします!

blank

ツイートURLをコピペする

さて、1番 手っ取り早い方法は、

  • ツイートURLをコピペする。

です。

WordPressには、すでに「ツイート埋め込み」機能が備わっています。

なので、取得したURLを貼り付ける。

それだけで、きちんと読み込んでくれるんです!

こんな感じで。

blank
とみぃ

上矢印⇧のようなボタンからURLを取得できます!

正式な埋め込み機能のほうがベスト!

ただし、この方法。

注意点が1つあります。

それは、

  • ブログ記事の表示が遅くなる。

ということ。

例えば、以下の記事。

blank

記事内にツイートを10個ほど使っています。

そしたら表示されるまでに、なんと「8秒」も かかること…

  • 約3秒かかると、ユーザーは離脱する。

そう言われているので致命的です。

blank
とみぃ

埋め込み1つあたり、約1秒ってことか…笑

では、これを高速化する方法は無いのか?

もちろん あります!

それは、

  • Twitter社が用意してくれている埋め込み機能を活用する。

という方法です。

ここからはパソコンでの作業と なります。

blank

まず画像のように、

  1. 埋め込みたいツイートの「右上」。
  2. 「ツイートを埋め込む」。

の順でクリックします。

すると、別ページに移動します。

blank

あとは画像のようにコピーして、ブログへ貼り付ける。

そうすれば、とりあえず記事に反映されます。

必ず「テキストエディタ」か「カスタムHTML」ブロックに貼り付けます。

高速化のために「async」を消去

しかし、まだ すべきことが残されています。

それは、

  • 「async」の消去。

です。

async:非同期処理。WordPressで勝手に遅延処理してくれるので必要なし。

先ほど貼り付けたコードを確認すると…

以下のように「async」が含まれています。

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

そちらは気にせず、消しちゃってOKです!

消去したコードが以下になります。

<script src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
blank
とみぃ

ぜんぜん関係ないけど、この「コード」ブロック使うの初めてです!笑

2つ目以降は「script」自体を

さらに、もう1点。

記事内に「2つ以上」ツイートを埋め込む場合。

先ほどのコード自体を、

  • 「script」から始まる文を消去。

してください。

ただし「2つ目」から。

このコードが重いせいで、表示が遅くなるみたい。

しかも、記事内に1つあればいいとのこと。

なので、こちらも気にせず消しちゃいましょう!

ここまでを まとめると、

  1. 正式な方法でツイートを埋め込む。
  2. 1つ目は「async」を消去。
  3. 2つ目以降は「script」自体を消去。

ということに なります。

blank
とみぃ

もっと早く知りたかった。リライト…笑

信頼性アップに繋がるツイート引用

以上、この記事の内容を3行で まとめると、

  1. 効率よくパパっと埋め込みたいなら、ツイートURLをコピペする。
  2. 正式な埋め込み機能のほうがベスト!
  3. 高速化するために、コードの一部を消去する。

でしたが、いかがだったでしょうか?

おかげで先ほどの記事

blank
とみぃ

2秒くらいで表示されるように なりました!

ところで、Twitterのツイート引用は、

  • 執筆作業をラクにする。
  • 記事の信頼性をアップさせる。

ためにも必要不可欠です。

ぜひ活用してみてくださいね。

blank

この記事が、あなたの お役に立てば幸いです!

blank
とみぃ

最後まで お読みいただき、ありがとうございました!

あなたにオススメの1冊を選びました!

¥1,650 (2021/10/31 18:40時点 | Amazon調べ)
\ 楽天ポイント5倍セール!/
楽天市場で見る blank
\ ポイント5% 還元中!/
Yahooショッピングで見る blank

この記事をシェアして、同じく悩んでいる人を助けよう!