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

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

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

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

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

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

↑で表示しているコンテンツは、Twitterを外部コンテンツとして埋め込んで表示した場合の一例です。

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

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

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

ブログへの埋め込み方

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

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

の3つになります。

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

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

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

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

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

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

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

Twitterの場合

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

参考リンク : Twitter Publishサイト

Facebookの場合

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

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

YouTubeの場合

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

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

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

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

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

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

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

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

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

CDNとは?

CDNとは、サイトへのアクセスを複数のサーバーで分散処理する機能のことで、サイトの高速表示が可能になります。

参考リンク : ブログのおすすめプラグイン10選!各プラグイン機能を徹底解説

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

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

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

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

参考リンク : STORK19

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

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

● WordPressおすすめブログテーマ10選!有料版と無料版を比較

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

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

今後の検索エンジンは、サイトの表示スピードも重視してくるようになるので、外部コンテンツの埋め込み過ぎには要注意です。

ブログを運営しながらSNSに投稿したコメントを、ブログ記事に埋め込みながら書いていくと結構良い感じになるパターンも最近はよくありますね。● SNSとは?SNSの種類と仕組みを初心者に分かりやすく解説!

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

レンタルサーバー移転しました!!
ConoHa WINGかなり快適です^ ^

ConoHa WINGレンタルサーバー ConoHa WINGレンタルサーバー
ABOUT US
小林 玲王奈ユニコーンコンサルティング株式会社 代表取締役

起業する人やスタートアップ企業に出資や資金調達を含めてサポートしながら、主に自社でブログサイト運営やWebアプリの開発、LINEスタンプ制作に絵文字、キャラクターデザイン制作、AR(拡張現実)/VR(仮想現実)プラットフォーム向けの3DCGコンテンツ制作事業をおこなっています。

最近は、「会社の収入だけに依存しない生活を手に入れる」ことをテーマにブログ記事を書いたり、ブログ運営を始める人のサポートを無償で行っています。

2003年から映像業界向けの様々な新規事業立ち上げに従事。

2014年からは経営/メディアコンサルティング業も始めて2020年01月に独立しました。

現在、ユニコブログ®以外にも、数十サイト以上の特化ブログを立ち上げて運用しています。

全て同じサイト構成、ブログ記事構成、文章構成など、検証可能な範囲で仕様を合わせてみて、収益を出すのに再現性があるか?などを試行錯誤している日々です。

ピックアップしているレンタルサーバーとWordPressテーマを総当たりで組み合わせてサイトスピードがどうなるかなど、思いついた事をひたすら検証する日々です。

WordPress用のシンプルなプラグインやブログパーツの開発にもチャレンジしています。

SMPTE Professional Engineer Member

著書 : 『保存版 売上を向上させるためのYouTube活用術』

2020年度と2021年度の 学校法人調布学園 田園調布学園 中等部・高等部「豊かな教養を培う 未来へつなぐ土曜コアプログラム『探究』」にて空中ディスプレイコンテンツ制作及びWebサイト制作の特別講師を担当。2022年度は土曜プログラム(マイプログラム)『仕事最前線』で講演

著述家 / ブロガー兼コンテンツクリエイター

プロフィールの詳細はこちら