ブログに外部コンテンツを埋め込む方法を分かりやすく解説

ブログ記事にはX（旧Twitter）やFacebook、Instagramなどで公開された様々なコンテンツを埋め込むことが可能です。

本記事では、コードの取得方法や埋め込み方法を分かりやすく解説します。

外部コンテンツの埋め込みとは？

ブログには、多くのSNSコンテンツを埋め込んで記事内に表示させることが出来ます。

表示させたいコンテンツには、大体は共有用URLを生成できるようになっています。

例えば、ブログでよく使われるWordPressの場合、そのURLをコピペするだけで埋め込むことが可能です。

リンクも機能しているので、クリックすれば該当のコンテンツに画面遷移するようにも設定できます。

ブログを始め方ばかりだと、外部コンテンツの埋め込みで迷ってしまうことも多いと思います。

次の章で、外部コンテンツを埋め込む方法を３つに分けて解説します。

ブログへの埋め込み方

ブログへ外部コンテンツを埋め込む方法は大きく分けて３種類になります。

1. 公式サイトからコードを取得して埋め込む
2. Webサービスからコードを取得して埋め込む
3. WordPressのテーマにある機能で埋め込む

の３つになります。

埋め込みコードはコピペでOK

生成した外部コンテンツ用の埋め込みコードなどは、基本的にコピペで済んでしまいます。

それでは、ひとつずつ解説していきます。

公式サイトからコードを取得して埋め込む

多くのSNSでは、外部コンテンツ用としての埋め込みコードを簡単に生成することが可能です。

基本的に、よく利用されるSNSには「共有」ボタンがあるので、そのコードをそのままWebサイトに埋め込むことが可能です。

X（旧Twitter）の場合

X（旧Twitter）の場合は、下記のサイトでツイートのアドレスを入力すると、埋め込み用のコードを生成することが出来ます。

参考リンク : X（旧Twitter） Publishサイト

Facebookの場合

Facebookにも埋め込みコード生成用のページがあります。

参考リンク : Meta for Developers | ページプラグイン

YouTubeの場合

YouTubeの場合は、再生しているコンテンツのページ内にある「共有」→「埋め込み」から埋め込みコードを取得することが可能です。

関連記事：YouTubeの始め方を基本から応用まで初心者用にわかりやすく解説

この他、多くのSNSでは公式サイトで埋め込みコードの生成が可能になっています。

Webサービスからコードを取得して埋め込む

数多くあるWebサービスなかで、とても簡単に色々なSNSの埋め込みコードをカスタマイズして取得できるサービスもあります。

そのひとつがIframelyというWebサイトです。

登録の必要も無く、すぐに埋め込みコードの生成を始めることが可能です。

有料プランの中では、コンテンツのCDNを提供してくれる機能もあるので、試してみる価値がありなサービスです。

参考リンク : Iframely公式サイト

WordPressのテーマにある機能で埋め込む

当ブログは有料テーマの「STORK19」を利用しているのですが、有料テーマには簡単に外部コンテンツが埋め込めるように便利なブロックが容易されています。

参考リンク : STORK19

コンテンツのURLを入れるだけで埋め込んでくれるのでとても便利な機能です。

ブログのコンテンツを積み上げていくスピードを考えると、有料テーマを導入してブログ記事を書いていく方が効率化できます。

関連記事：WordPressテーマでおすすめできる有料版と無料版を比較して実例を基に紹介

まとめ | 外部コンテンツは埋め込みすぎない

外部コンテンツを埋め込みすぎると、Webサイト表示のスピードに影響が大きく出てきます。

今後の検索エンジン最適化においても、Webサイトの訪問者にとっても、Webサイトの表示スピードは、ユーザーの満足度において、重要な指標となります。

したがって、ページ全体に外部コンテンツを埋め込み過ぎるのには注意が必要です。

特に、ホームページ（TOPページ）含め、とくに各Webサイトページの最初のほうを読み込む速度には気を使う必要があります。

最近は、SNSやYouTubeで投稿したコンテンツをブログ記事の初めのほうに埋め込んで、ブログ記事として展開していく記事構成も増えてきましたが、各ページの表示速度も含め、埋め込みコンテンツが影響していないか定期的に確認してみましょう。

関連記事：SNSとは？SNSの種類と仕組みを初心者に分かりやすく解説！

様々な発信媒体を活用して、ブログを彩っていきましょう。