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

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

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

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

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

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

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

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

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

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

ブログへの埋め込み方

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

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

の3つになります。

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

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

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

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

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

Twitterの場合

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

参考リンク : Twitter Publishサイト

Facebookの場合

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

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

YouTubeの場合

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

YouTubeの始め方を分かりやすく解説

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

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

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

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

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

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

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

CDNとは?

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

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

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

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

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

参考リンク : STORK19

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

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

ワードプレスのテーマを紹介する

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

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

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

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

ブログを運営しながらSNSに投稿したコメントを、ブログ記事に埋め込みながら書いていくと結構良い感じになるパターンも最近はよくありますね。

SNSとは?SNSの種類を分かりやすく解説

SNSとは?SNSの種類と仕組みを初心者に分かりやすく解説!

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

ABOUT US

小林 玲王奈Unicorn Consulting Inc. 代表取締役 CEO
起業する人やスタートアップ企業に出資や資金調達を含めてサポートしながら、ブログの運営やWebアプリの開発、LINEスタンプ制作をしています。2003年から映像業界向けの様々な新規事業立ち上げに従事。2014年からは経営/メディアコンサルティング業も始めて2020年01月に独立。今年から来年にかけて、世田谷の私立校で空中ディスプレイ技術とWebマーケティングの講義を行っています。|SMPTE Professional Engineer Member