【超簡単】WordPressにYouTubeやTwitterなど各種SNSを埋め込む方法

WordPress YouTube Twitter 各種SNS 埋め込む方法

こんにちは、きゃぷてんです。

WordPressを使ってブログを運営していると「YouTubeの動画やTwitterの文章を記事内に埋め込みたい」と感じることがあると思います。

記事内に外部のサービスが埋め込まれていると、なんだかんだ言っても”こなれている感”であったり”Web系の知識あります感”が出てくるので、僕は非常に好きです。

自己満足に近いですが(笑)

とは言いつつ、WordPressの記事にYouTubeやTwitterが埋め込まれていると、動画やツイートの発信者の権利が守られ、訪問者は発信元を確認でき、我々ブログ運営者は”こなれている感を演出”できるので、三方よしと言えるでしょう。

また、YouTubeの動画が記事内に埋め込まれていると、読者が動画を見てくれる可能性が非常に高まり、滞在時間の向上にもつながります。

するとGoogleからの評価も高まるので上位表示にも役に立つでしょう。

【超簡単】WordPressに各種SNSを埋め込む方法

さてさて、それでは早速、WordPressに各種SNSを埋め込む方法をお伝えしていきますね。

初めに、操作の全体像がイメージできるようにざっくりとした説明をすると、WordPressの記事に各種SNSを埋め込む場合には「埋め込みコード」というものを、記事内に突っ込んであげます。

この「埋め込みコード」というのは、HTMLであったりjavascriptと呼ばれるプログラム言語で記述されているのですが、簡単に言うと「ここにSNSを表示しますよ!」と書かれているわけです。

また、最近のSNSでは上記の「埋め込みコード」がすでに用意されているので、我々ブログ運営者がやることは、非常に簡単で以下の2ステップです。

  1. 各種SNSから「埋め込みコード」をコピーする
  2. 記事内に張り付ける

 

非常に簡単な操作なので、今日から誰でも簡単に実践できるのですが、WordPress初心者がつまずきやすい注意点が1つあります。

WordPressには記事作成画面に「ビジュアル」と「テキスト」の2種類がありますが、各種SNSを記事内に埋め込む場合には、記事作成画面で「テキスト」を選択してください。

前述したように、埋め込みコードはHTML等で記述されているため、それらを編集できるように「テキスト」を使って記事内に突っ込んであげる必要があります。ちなみに、記事内のその他の文章の編集については「ビジュアル」でも「テキスト」でも大丈夫です。

SNSを突っ込むときは「テキスト」を使う

ここだけを注意すれば、今日から誰でも簡単に各種SNSを記事内に埋め込む事ができます。

 

それでは、注意点も理解できたので各種SNSごとに記事内に埋め込む方法を見ていきましょう。

YouTubeを記事内に埋め込む方法

はじめに、YouTubeを埋め込む方法をご紹介します。

操作の全体像はこんな感じです。

  1. 埋め込みたいYouTubeのページを開く
  2. 埋め込みコードをコピーする
  3. 記事内に埋め込みコードを張り付ける

 

まずは、埋め込みたいYouTubeのページを開きましょう。YouTubeのページを開くと動画の下の方に「共有」というボタンがあるので、それをクリックします。

WordPress YouTube 埋め込む方法

 

SNSの一覧が表示されますが、それは無視して下の方にある「埋め込む」をクリックすると「埋め込みコード」が表示されます。

WordPress YouTube 埋め込む方法

 

ここで、開始位置やその他オプションを設定することができますが、特別希望がなければそのまま埋め込みコードをコピーします。(ちなみに、オプションを設定するとそれに応じた埋め込みコードに変換されますので、オプションを設定した場合は変換後の埋め込みコードをコピーしましょう)

WordPress YouTube 埋め込む方法

 

埋め込みコードをコピーできたら、WordPressの記事作成画面で「テキスト」を選択し、YouTubeを埋め込みたい部分に埋め込みコードを張り付けましょう。

補足説明

動画の幅や高さを変更したい!という希望があると思います。

その場合は、埋め込みコード内のwidthとheightの値を変更してあげると、記事内に埋め込む動画の幅や高さを任意のものに設定することができます。

ちなみに、このブログではwidth=”728″ height=”410″ に変更しています。

width=”ここを任意の値にする(単位はpx)”
height=”ここを任意の値にする(単位はpx)”

WordPress YouTube 埋め込む方法

 

実際にYouTubeの動画を埋め込むと下のようになります。
(最近注目している、いわきFCの動画を張り付けてみました、笑)

Twitterを記事内に埋め込む方法

続きまして、Twitterを埋め込む方法をご紹介します。

操作の全体像はこんな感じです。

  1. 埋め込みたいTwitterのツイートを開く
  2. 埋め込みコードをコピーする
  3. 記事内に埋め込みコードを張り付ける

 

まずは、Twitterにログインした状態で埋め込みたいTwitterのツイートを開きましょう。ツイートを開くと画面の上の方に「矢印マーク」があるので、それをクリックします。

すると、利用できる機能が表示されるので「ツイートをサイトに埋め込む」を選択しましょう。

WordPress Twitter 埋め込む方法

 

埋め込みコードが表示されるのでコピーします。(ツイート内に画像や動画が含まれる場合は「メディアを含める」にチェックを入れると画像や動画も一緒に埋め込むことができます)

WordPress Twitter 埋め込む方法

 

埋め込みコードをコピーできたら、WordPressの記事作成画面で「テキスト」を選択し、Twitterを埋め込みたい部分に埋め込みコードを張り付けましょう。

WordPress Twitter 埋め込む方法

 

実際にTwitterを埋め込むと下のようになります。
(例によって、いわきFCのTwitterを張り付けてみました、笑)

Instagramを記事内に埋め込む方法

続きまして、Instagramを埋め込む方法をご紹介します。

操作の全体像はこんな感じです。

  1. 埋め込みたいInstagramの投稿を開く
  2. 埋め込みコードをコピーする
  3. 記事内に埋め込みコードを張り付ける

 

まずは、Instagramにログインした状態で埋め込みたいInstagramの投稿を開きましょう。投稿を開くと画面の下の方に「・・・」のようなマークがあるので、それをクリックします。

WordPress Instagram 埋め込む方法

 

すると、利用できる機能が表示されるので「埋め込み」を選択しましょう。

WordPress Instagram 埋め込む方法

 

埋め込みコードが表示されるのでコピーします。

補足説明

「キャプションを追加」にチェックを入れると、投稿内の文章やハッシュタグ等も含めた埋め込みコードになります。

画像のみを埋め込みたい場合は「キャプションを追加」のチェックを外します。

WordPress Instagram 埋め込む方法
注意

「埋め込みコードをコピー」というボタンがありますが、僕がやったときは機能していませんでした。

そのため、埋め込みコード自体を選択して「Ctrl + C」等でコピーしましょう。

 

埋め込みコードをコピーできたら、WordPressの記事作成画面で「テキスト」を選択し、Instagramの投稿を埋め込みたい部分に埋め込みコードを張り付けましょう。

WordPress Instagram 埋め込む方法

 

実際にInstagramの投稿を埋め込むと下のようになります。
(例によって、いわきFCのInstagramを張り付けてみました、笑)

Facebookを記事内に埋め込む方法

最後に、Facebookを埋め込む方法をご紹介します。ひと昔前はSNSの王様のような存在でしたが、最近では特に若者のアクティブユーザが減っているのが悲しいですね。

SNS業界の移り変わりの速さに驚きです。

 

さてさて、操作の全体像はこんな感じです。

  1. 埋め込みたいFacebookの投稿を開く
  2. 埋め込みコードをコピーする
  3. 記事内に埋め込みコードを張り付ける

 

まずは、Facebookにログインした状態で埋め込みたいFacebookの投稿を開きましょう。投稿を開くと画面の上の方に「・・・」のようなマークがあるので、それをクリックします。

すると、利用できる機能が表示されるので「埋め込み」を選択しましょう。

WordPress フェイスブック 埋め込む方法

 

埋め込みコードが表示されるのでコピーします。

WordPress フェイスブック 埋め込む方法

 

埋め込みコードをコピーできたら、WordPressの記事作成画面で「テキスト」を選択し、Facebookの投稿を埋め込みたい部分に埋め込みコードを張り付けましょう。

WordPress フェイスブック 埋め込む方法

 

実際にFacebookの投稿を埋め込むと下のようになります。
(例によって、いわきFCのFacebookを張り付けてみました、笑)

まとめ

お疲れ様でした。

以上が、各種SNSをWordPressの記事内に埋め込む方法です。

基本的に「埋め込みコードをコピー」「埋め込みコードを張り付け」の2ステップですので、操作は非常に簡単でしたね。慣れてくるとサイズを変更したり、レスポンシブ対応したり、まだまだかっこよく埋め込む方法があります。

ぜひ、あなたのブログ運営に役立ててくださいね。

WordPress YouTube Twitter 各種SNS 埋め込む方法

あなたのシェアが僕の笑顔の源です

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

きゃぷてん

アフィリエイトは副業でやってます。「まったり自由に生きる」がモットーなのでブログ名をliberty-life-blogにしました。 <趣味> 汚い居酒屋探し、フットサル、お散歩、筋トレ <特技> 足首を無限にポキポキ鳴らせます。