ランキング
PICKUP一覧
ライター一覧
タグ一覧
ライター募集
広告掲載WordPress利用者必見！XやYouTube、各サイトの「埋め込みリンク」の作成方法を徹底解説
企業のホームページ更新を担当している方、Web編集者さんやライターさん、個人でブログを書いている方、これからWordPressを利用してみようとしている方、「記事中にリンクを貼りたいけど、どうやってやるんだろう？」「うまくリンクが反映されない…」などと、お悩みではありませんか？
この記事では、そんな全国のWordPressユーザーのために、YouTubeやX（旧Twitter）、instagramなど各SNSにおける「埋め込みリンク（埋め込みコード）」の作成方法をご紹介します。
目 次
そもそもなぜ「埋め込みリンク」にしないといけないの？
WordPressで記事を作成する際、ブラウザの表記されているURLを貼りつければかんたんですよね。
それでもなぜ埋め込み型にしないといけないのでしょうか。
その理由は3点あります。
著作権と利用規約の問題回避
動画や投稿を勝手にダウンロードして自サイトにアップするのは、ほとんどの場合著作権違反です。
でも埋め込みリンクなら、そのサービスの利用規約内で正式に認められている方法だから安心して使用できます。
リアルタイムで更新される
埋め込みリンクなら、元の投稿や動画が更新されたときも、自動で反映します。
たとえばTwitchのライブ配信なら、読者がそのリンクをタップすれば、そのままリアルタイムの映像が観られるのです。
データ容量の節約
自サイトに動画データを直接アップロードすると、サーバー容量や通信量がかかってしまします。
でも埋め込み型なら、読者がリンクをタップしたらYouTubeやTwitchなどのサーバーから読み込むので、自サイトへの負担が少なくて済みます。
読者としても、迅速に閲覧することができるのでありがたい機能なのです。
要するに埋め込みリンクは、「著作権的にも安心」、「リアルタイムで更新される」、「サーバー負担も少なく発信者も読者も嬉しい」という、メリットだらけの方法といえますね。
埋め込みリンクの種類
WordPressで埋め込みリンクを設置する方法には大きく分けて2種類あります。
URLを直接貼り付ける方法（自動埋め込み）
WordPressは「oEmbed（オーエンベッド）」という機能を使って、対応しているサービスのURLをそのまま貼るだけで自動的に埋め込み表示してくれる機能があります。
例えば、YouTubeであればこのような形式です。
「https://www.youtube.com/watch?v=動画ID」
これをそのままWordPressの編集画面に貼れば、動画プレイヤーが自動で表示されます。
シンプルで初心者にも便利ですね！
ただ、YouTubeのように対応しているサイトだけに使用できる限定的な方法といえます。
iframeタグ・HTMLコードを使う方法（手動埋め込み）
こちらは、どんなサイトにも対応できる手動の埋め込み方です。
YouTubeやTwitchなどのサイトが発行している「埋め込み用HTMLコード：iframeタグ」を、WordPressの投稿・固定ページの「カスタムHTMLブロック」に貼り付けて表示させることができます。
こちらの方法は、oEmbed非対応のサービスを埋め込みたいときや、自サイト用に埋め込みサイズや枠線などデザイン面を細かく調整したい人に便利！
初心者・手軽に使いたい人は直接リンクを貼り付ける方法がおすすめですが、なかには非対応のサイトもあるため、タグの作成する方法を覚えておいて損はないと思います。
埋め込みリンクの作成手順
それでは実際に、各SNSにおける埋め込みリンクを作成していきましょう！
WordPressの編集画面でURLを直接貼り付けるか、「段落」ブロックに作成したリンクをコピぺすることで反映されます。
YouTube
・URLを直接貼り付ける方法（こちらが断然おすすめ！）
①YouTubeで埋め込みたい動画のリンクをコピー
②コピーしたURLをそのまま貼り付ける
例 https://www.youtube.com/watch?v=動画ID
③数秒で自動でプレビュー表示に変わればOK
・iframeタグを使う場合
①YouTube動画の「共有」をクリック
②「埋め込む」をクリックし、表示されたコードをコピー
例 <iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/動画ID” frameborder=”0″ allowfullscreen></iframe>
③WordPressの「＋」マークをクリックし、「HTML」と検索して「カスタム HTMLブロック」を挿入する
④先ほどコピーしたコードを貼り付ける
X（旧Twitter）
・URLを直接貼り付ける方法
①埋め込みたい投稿の右上「…（もっと見る）」ボタンをクリック
②「ポストを埋め込む」を選択
③コピーしたURLをそのまま貼り付ける
例 https://twitter.com/アカウントID /status/1779876543210
・HTMLコードを使う方法
①埋め込みたい投稿の右上「…（もっと見る）」ボタンをクリック
②ページ下記にある「Embedded Video」（動画用）もしくは「Embed Post」（ポスト単体）を選択
③HTMLコードが表示されるので、コピーする
例 <blockquote class=”twitter-tweet”> <p lang=”ja” dir=”ltr”>投稿内容</p>— (@アカウントID) <a href=”https://twitter.com/アカウントID/status/1779876543210″>投稿日時 </a></blockquote><script async src=”https://platform.twitter.com/widgets.js” charset=”utf-8″></script>
④WordPressの「＋」マークをクリックし、「HTML」と検索して「カスタム HTMLブロック」を挿入する
⑤先ほどコピーしたコードを貼り付ける
⑥※下書き保存したあと、画面右上にある「プレビューアイコン」をクリックして、新しいタブでプレビューして確認してみましょう！
・URLを直接貼り付ける方法
- 埋め込みたい投稿の「紙飛行機マーク」をクリック
- 「リンクをコピー」を選択
- コピーしたURLをそのまま貼り付ける
例 https://www.instagram.com/p/アカウントID/
・HTMLコードを使う方法
※ウェブ版のInstagramでのみ埋め込みリンクの作成が可能です
①投稿の右上にある「…」をクリック
②「埋め込み」を選択
③表示されたiframeコードをコピー
例 <blockquote class=”instagram-media” data-instgrm-permalink=”https://www.instagram.com/p/ABC123xyz/” data-instgrm-version=”14″><p>投稿内容</p> — (@アカウントID)</blockquote><script async src=”//www.instagram.com/embed.js”></script>
④WordPressの「＋」マークをクリックし、「HTML」と検索して「カスタム HTMLブロック」を挿入する
⑤先ほどコピーしたコードを貼り付ける
TikTok
・URLを直接貼り付ける方法
①投稿の「矢印マーク」をクリック
②「Copy」を選択
③コピーしたURLをそのまま貼り付ける
例 https://www.tiktok.com/@アカウント名 /video/7486732420117581063?is_from_webapp=1&sender_device=pc
・HTMLコードを使う方法
①投稿の「矢印マーク」をクリック
②埋め込みマーク</>のボタンをクリック
③表示されたコードをコピー
例 <blockquote class=”tiktok-embed” cite=”動画URL”></blockquote><script async src=”https://www.tiktok.com/embed.js”></script>
④WordPressの「＋」マークをクリックし、「HTML」と検索して「カスタム HTMLブロック」を挿入する
⑤先ほどコピーしたコードを貼り付ける
・URLを直接貼り付ける方法
①投稿の日付をクリックし、投稿単体のページに飛ぶ
②ブラウザのURLをコピー
例 https://www.facebook.com/アカウントID/posts/123456789012345
③コピーしたURLをそのまま貼り付ける
・HTMLコードを使う方法
①投稿の右上にある「…」をクリック
②「埋め込み」を選択
③表示されたコードをコピー
例 <div id=”fb-root”></div><script async defer crossorigin=”anonymous” src=”https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v9.0″></script>
<div class=”fb-post” data-href=”投稿URL” data-width=”500″></div>
④WordPressの「＋」マークをクリックし、「HTML」と検索して「カスタム HTMLブロック」を挿入する
⑤先ほどコピーしたコードを貼り付ける
Twitch
・URLを直接貼り付ける方法
①Twitchの配信ページのURLをコピー
②コピーしたURLをそのまま貼り付ける
例 https://www.twitch.tv/アカウントID
・iframeタグを使う場合
①配信ページの右下にある「シェア」ボタン（上矢印マーク）をクリック
②「埋め込み」を選択
③表示されたタグをコピー
例 <iframe src=”https://player.twitch.tv/?channel=アカウントID &parent=www.example.com” frameborder=”0″ allowfullscreen=”true” scrolling=”no” height=”378″ width=”620″></iframe>
④上記タグの「www.example.com」部分を、「www.アカウントID.com」に変更する
⑤WordPressの「＋」マークをクリックし、「HTML」と検索して「カスタム HTMLブロック」を挿入する
⑥先ほどコピーしたコードを貼り付ける
まとめ
WordPressの埋め込み機能は、利用者にも読者にとってもメリットだらけの機能です。
URLを貼るだけなら初心者でもすぐできますし、iframeタグ・HTMLコードを使えばより自由なデザインも可能です。
この記事で紹介したやり方は、アップデートを経て変更される場合もありますので、各サイトの情報を適宜知っておくと安心ですね！
\こちらもおすすめ/
▼ブログ集客にはインスタを使うべし！誘導する方法や注意ポイントを徹底解説
▼SNSマーケティングを学びたい人必見！オンラインでできるスクールや講習7選をご紹介
▼SNSマーケティングに役立つ資格5選！資格取得のメリットや試験内容を紹介
\インフルエンサーマーケティングに興味がある方へ/
【インフルエンサーマーケティング】月額5万円～PR依頼し放題！圧倒的コスパの『トリドリマーケティング』初月半額＋1万円キャッシュバック
このライターの記事
カテゴリ一覧
ランキング
タグ一覧
